<template>
  <AppLayout :breadcrumbs="breadcrumbs">
    <div class="space-y-6">
      <!-- Header -->
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Student Dashboard</h1>
          <p class="text-sm text-gray-600 dark:text-gray-400">
            Welcome back, {{ student?.user?.name || student?.first_name + ' ' + student?.last_name || 'Student' }}
          </p>
        </div>
        <div class="text-sm text-gray-500 dark:text-gray-400">
          Academic Year: {{ currentAcademicYear?.name || 'No active academic year' }}
        </div>
      </div>

      <!-- Error State -->
      <div v-if="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
            </svg>
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-red-800 dark:text-red-200">Error</h3>
            <p class="mt-1 text-sm text-red-700 dark:text-red-300">{{ error }}</p>
          </div>
        </div>
      </div>

      <!-- Student Profile Card -->
      <div v-else-if="student" class="bg-white dark:bg-gray-800 shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <div class="flex items-center">
            <div class="h-12 w-12 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center">
              <span class="text-lg font-medium text-indigo-600 dark:text-indigo-400">
                {{ getInitials(student.user?.name || student.first_name + ' ' + student.last_name) }}
              </span>
            </div>
            <div class="ml-4">
              <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                {{ student.user?.name || student.first_name + ' ' + student.last_name }}
              </h2>
              <p class="text-sm text-gray-500 dark:text-gray-400">
                Student ID: {{ student.student_id }}
              </p>
            </div>
          </div>
        </div>

        <div class="px-6 py-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Current Enrollment -->
            <div>
              <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Current Enrollment</h3>
              <div v-if="currentEnrollment" class="text-sm text-gray-600 dark:text-gray-400">
                <p><strong>Classroom:</strong> {{ currentEnrollment.classroom?.name || 'Not assigned' }}</p>
                <p><strong>Academic Year:</strong> {{ currentEnrollment.academicYear?.name || 'Not specified' }}</p>
                <p><strong>Enrolled:</strong> {{ formatDate(currentEnrollment.enrolled_at) }}</p>
              </div>
              <div v-else class="text-sm text-gray-500 dark:text-gray-400">
                Not currently enrolled
              </div>
            </div>

            <!-- Attendance Stats -->
            <div>
              <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Attendance</h3>
              <div class="text-sm text-gray-600 dark:text-gray-400">
                <p><strong>Present Days:</strong> {{ attendanceStats.present_days }}</p>
                <p><strong>Absent Days:</strong> {{ attendanceStats.absent_days }}</p>
                <p><strong>Attendance Rate:</strong> {{ attendanceStats.attendance_percentage }}%</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Academic Performance -->
      <div v-if="student && !error" class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Academic Stats -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Academic Performance</h3>
          <div class="space-y-3">
            <div v-if="resultSummary">
              <div class="flex justify-between">
                <span class="text-sm text-gray-600 dark:text-gray-400">Average Marks:</span>
                <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ resultSummary.average_marks }}%</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm text-gray-600 dark:text-gray-400">Total Points:</span>
                <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ resultSummary.total_points }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm text-gray-600 dark:text-gray-400">Division:</span>
                <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ resultSummary.division || 'Not calculated' }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm text-gray-600 dark:text-gray-400">Rank:</span>
                <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ resultSummary.rank || 'Not ranked' }}</span>
              </div>
            </div>
            <div v-else class="text-sm text-gray-500 dark:text-gray-400">
              No academic performance data available
            </div>
          </div>
        </div>

        <!-- Recent Results -->
        <div class="md:col-span-2 bg-white dark:bg-gray-800 shadow rounded-lg">
          <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Recent Results</h3>
          </div>
          <div class="px-6 py-4">
            <div v-if="recentResults && recentResults.length > 0" class="space-y-3">
              <div v-for="result in recentResults.slice(0, 5)" :key="result.id" class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700 last:border-b-0">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ result.subject?.name }}</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">{{ result.examType?.name }}</p>
                </div>
                <div class="text-right">
                  <p class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ result.marks }}%</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Grade {{ result.grade }}</p>
                </div>
              </div>
            </div>
            <div v-else class="text-center py-8">
              <div class="text-gray-400 dark:text-gray-500">
                <svg class="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
              <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">No results yet</h3>
              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your examination results will appear here once they are entered.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Quick Actions -->
      <div v-if="student && !error" class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Quick Actions</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <a href="#" class="flex items-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            <div class="flex-shrink-0">
              <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </div>
            <div class="ml-3">
              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">View All Results</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">See complete academic history</p>
            </div>
          </a>
          
          <a href="#" class="flex items-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            <div class="flex-shrink-0">
              <svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3a4 4 0 118 0v4m-4 8a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
            </div>
            <div class="ml-3">
              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Update Profile</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Edit personal information</p>
            </div>
          </a>
          
          <a href="#" class="flex items-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            <div class="flex-shrink-0">
              <svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
              </svg>
            </div>
            <div class="ml-3">
              <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Class Schedule</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">View timetable and subjects</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import AppLayout from '@/layouts/AppLayout.vue'

// Props from controller
const props = defineProps({
  student: Object,
  currentEnrollment: Object,
  academicStats: Object,
  attendanceStats: Object,
  recentResults: Array,
  resultSummary: Object,
  currentAcademicYear: Object,
  error: String,
})

// Breadcrumbs
const breadcrumbs = [
  { name: 'Dashboard', href: route('dashboard'), current: true },
]

// Helper functions
const getInitials = (name: string) => {
  if (!name) return 'S'
  const parts = name.split(' ')
  if (parts.length >= 2) {
    return `${parts[0].charAt(0)}${parts[1].charAt(0)}`
  }
  return name.charAt(0) + (name.charAt(1) || 'S')
}

const formatDate = (dateString: string) => {
  if (!dateString) return 'Not specified'
  return new Date(dateString).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
}
</script>
