<template>
  <div>
    <div class="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
      <h3 class="text-lg leading-6 font-medium text-gray-900">
        {{ $t('dashboard.title') }}
      </h3>
      <div class="mt-3 sm:mt-0 sm:ml-4">
        <router-link
          to="/calendar"
          class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
        >
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
          </svg>
          {{ $t('dashboard.newUpload') }}
        </router-link>
      </div>
    </div>

    <div class="mt-6">
      <div v-if="loading" class="flex justify-center">
        <svg class="animate-spin -ml-1 mr-3 h-10 w-10 text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      </div>
      <div v-else>
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
          <!-- Stats Cards -->
          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0 bg-primary-100 rounded-md p-3">
                  <svg class="h-6 w-6 text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                  </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                  <dl>
                    <dt class="text-sm font-medium text-gray-500 truncate">
                      {{ $t('dashboard.totalUploads') }}
                    </dt>
                    <dd>
                      <div class="text-lg font-medium text-gray-900">
                        {{ stats.totalUploads }}
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6">
              <div class="text-sm">
                <router-link to="/uploads" class="font-medium text-primary-600 hover:text-primary-500">
                  {{ $t('dashboard.viewAllUploads') }}
                </router-link>
              </div>
            </div>
          </div>

          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0 bg-primary-100 rounded-md p-3">
                  <svg class="h-6 w-6 text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                  </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                  <dl>
                    <dt class="text-sm font-medium text-gray-500 truncate">
                      {{ $t('dashboard.newComments') }}
                    </dt>
                    <dd>
                      <div class="text-lg font-medium text-gray-900">
                        {{ stats.newComments }}
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6">
              <div class="text-sm">
                <router-link to="/comments" class="font-medium text-primary-600 hover:text-primary-500">
                  {{ $t('dashboard.viewAllComments') }}
                </router-link>
              </div>
            </div>
          </div>

          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0 bg-primary-100 rounded-md p-3">
                  <svg class="h-6 w-6 text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                  <dl>
                    <dt class="text-sm font-medium text-gray-500 truncate">
                      {{ $t('dashboard.totalEarnings') }}
                    </dt>
                    <dd>
                      <div class="text-lg font-medium text-gray-900">
                        ${{ stats.totalEarnings.toFixed(2) }}
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6">
              <div class="text-sm">
                <router-link to="/earnings" class="font-medium text-primary-600 hover:text-primary-500">
                  {{ $t('dashboard.viewEarningsDetails') }}
                </router-link>
              </div>
            </div>
          </div>

          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0 bg-primary-100 rounded-md p-3">
                  <svg class="h-6 w-6 text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                  <dl>
                    <dt class="text-sm font-medium text-gray-500 truncate">
                      {{ $t('dashboard.totalViews') }}
                    </dt>
                    <dd>
                      <div class="text-lg font-medium text-gray-900">
                        {{ stats.totalViews }}
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6">
              <div class="text-sm">
                <router-link to="/analytics" class="font-medium text-primary-600 hover:text-primary-500">
                  {{ $t('dashboard.viewAnalytics') }}
                </router-link>
              </div>
            </div>
          </div>

          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0 bg-primary-100 rounded-md p-3">
                  <svg class="h-6 w-6 text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <div class="ml-5 w-0 flex-1">
                  <dl>
                    <dt class="text-sm font-medium text-gray-500 truncate">
                      {{ $t('dashboard.monthlyEarnings') }}
                    </dt>
                    <dd>
                      <div class="text-lg font-medium text-gray-900">
                        {{ formatCurrency(stats.monthlyEarnings) }}
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
            <div class="bg-gray-50 px-4 py-4 sm:px-6">
              <div class="text-sm">
                <router-link to="/earnings" class="font-medium text-primary-600 hover:text-primary-500">
                  {{ $t('dashboard.viewEarnings') }}
                </router-link>
              </div>
            </div>
          </div>
        </div>

        <!-- Upcoming Uploads -->
        <div class="mt-8">
          <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
            {{ $t('dashboard.upcomingUploads') }}
          </h3>
          <div class="bg-white shadow overflow-hidden sm:rounded-md">
            <ul class="divide-y divide-gray-200">
              <li v-if="upcomingUploads.length === 0" class="px-4 py-4 sm:px-6">
                <p class="text-sm text-gray-500">{{ $t('dashboard.noUpcomingUploads') }}</p>
              </li>
              <li v-for="(upload, index) in upcomingUploads" :key="index" class="px-4 py-4 sm:px-6">
                <div class="flex items-center justify-between">
                  <div class="sm:flex sm:items-center">
                    <div class="flex-shrink-0">
                      <div class="h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center">
                        <svg v-if="upload.platform === 'TikTok'" class="h-6 w-6 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
                        </svg>
                        <svg v-else-if="upload.platform === 'YouTube'" class="h-6 w-6 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                        </svg>
                        <svg v-else class="h-6 w-6 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                        </svg>
                      </div>
                    </div>
                    <div class="mt-3 sm:mt-0 sm:ml-4">
                      <div class="text-sm font-medium text-primary-600">
                        {{ upload.title }}
                      </div>
                      <div class="mt-1 text-sm text-gray-500 sm:flex sm:items-center">
                        <div>
                          {{ formatDate(upload.uploadDate) }}
                        </div>
                        <svg class="hidden sm:block mx-2 h-1 w-1 text-gray-500" fill="currentColor" viewBox="0 0 8 8">
                          <circle cx="4" cy="4" r="3" />
                        </svg>
                        <div>
                          {{ upload.platform }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="mt-4 sm:mt-0 sm:ml-6 sm:flex-shrink-0">
                    <span :class="[
                      upload.status === 'geplant' ? 'bg-green-100 text-green-800' : 
                      upload.status === 'hochgeladen' ? 'bg-blue-100 text-blue-800' : 
                      'bg-red-100 text-red-800',
                      'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium'
                    ]">
                      {{ 
                        upload.status === 'geplant' ? $t('dashboard.status.scheduled') : 
                        upload.status === 'hochgeladen' ? $t('dashboard.status.uploaded') : 
                        $t('dashboard.status.failed') 
                      }}
                    </span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- Recent Comments -->
        <div class="mt-8">
          <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
            {{ $t('dashboard.recentComments') }}
          </h3>
          <div class="bg-white shadow overflow-hidden sm:rounded-md">
            <ul class="divide-y divide-gray-200">
              <li v-if="recentComments.length === 0" class="px-4 py-4 sm:px-6">
                <p class="text-sm text-gray-500">{{ $t('dashboard.noRecentComments') }}</p>
              </li>
              <li v-for="(comment, index) in recentComments" :key="index" class="px-4 py-4 sm:px-6">
                <div class="flex space-x-3">
                  <div class="flex-shrink-0">
                    <div class="h-10 w-10 rounded-full bg-gray-200"></div>
                  </div>
                  <div class="min-w-0 flex-1">
                    <p class="text-sm font-medium text-gray-900">
                      {{ $t('dashboard.anonymousUser') }}
                    </p>
                    <p class="text-sm text-gray-500">
                      {{ comment.comment_text }}
                    </p>
                    <div class="mt-2 text-sm">
                      <span class="text-gray-500">
                        {{ formatDate(comment.created_at) }} {{ $t('dashboard.on') }} 
                      </span>
                      <span class="font-medium text-gray-900">
                        {{ comment.videoTitle }}
                      </span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';

export default {
  name: 'Dashboard',
  setup() {
    const { t, locale } = useI18n();
    const loading = ref(true);
    const stats = ref({
      totalUploads: 0,
      newComments: 0,
      totalEarnings: 0,
      totalViews: 0,
      monthlyEarnings: 0
    });
    const upcomingUploads = ref([]);
    const recentComments = ref([]);

    const fetchDashboardData = async () => {
      loading.value = true;
      try {
        // In a real app, this would be an API call
        // const response = await axios.get('/api/dashboard');
        // stats.value = response.data.stats;
        // upcomingUploads.value = response.data.upcomingUploads;
        // recentComments.value = response.data.recentComments;
        
        // For demo purposes, we'll use mock data
        setTimeout(() => {
          stats.value = {
            totalUploads: 24,
            newComments: 12,
            totalEarnings: 345.67,
            totalViews: 100,
            monthlyEarnings: 123.45
          };
          
          upcomingUploads.value = [
            {
              title: 'Relaxing ASMR Whispers',
              platform: 'TikTok',
              uploadDate: new Date(Date.now() + 86400000), // Tomorrow
              status: 'geplant'
            },
            {
              title: 'Tapping & Scratching Sounds',
              platform: 'YouTube',
              uploadDate: new Date(Date.now() + 172800000), // Day after tomorrow
              status: 'geplant'
            },
            {
              title: 'Ear Cleaning Session',
              platform: 'Instagram',
              uploadDate: new Date(Date.now() + 259200000), // 3 days from now
              status: 'geplant'
            }
          ];
          
          recentComments.value = [
            {
              comment_text: 'This is so relaxing! I love your content.',
              created_at: new Date(Date.now() - 3600000), // 1 hour ago
              videoTitle: 'Soft Whispering ASMR'
            },
            {
              comment_text: 'The sound quality is amazing! What microphone do you use?',
              created_at: new Date(Date.now() - 7200000), // 2 hours ago
              videoTitle: 'Binaural ASMR Experience'
            },
            {
              comment_text: 'I fall asleep to this every night. Thank you!',
              created_at: new Date(Date.now() - 86400000), // 1 day ago
              videoTitle: 'Sleep-Inducing ASMR'
            }
          ];
          
          loading.value = false;
        }, 1000);
      } catch (error) {
        console.error('Error fetching dashboard data:', error);
        loading.value = false;
      }
    };

    const formatDate = (date) => {
      if (!date) return '';
      
      const d = new Date(date);
      return d.toLocaleDateString(locale.value, {
        month: 'short',
        day: 'numeric',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });
    };

    const formatCurrency = (amount) => {
      return '$' + amount.toFixed(2);
    };

    onMounted(() => {
      fetchDashboardData();
    });

    return {
      loading,
      stats,
      upcomingUploads,
      recentComments,
      formatDate,
      formatCurrency
    };
  }
};
</script> 