'use client';

import { useEffect, useState } from 'react';
import { 
  Table, 
  TableBody, 
  TableCell, 
  TableHead, 
  TableHeader, 
  TableRow 
} from "@/components/ui/table";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { 
  Select, 
  SelectContent, 
  SelectItem, 
  SelectTrigger, 
  SelectValue 
} from "@/components/ui/select";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import { Loader2, GraduationCap, Trophy, Medal, Award } from "lucide-react";

interface MahasiswaKKLulusTepat {
  nim: string;
  nama: string;
  tahun_angkatan: number;
  nama_kelompok_keahlian: string;
  semester: number;
}

interface TabelKKLulusTepatMahasiswaProps {
  selectedYear: string;
}

export default function TabelKKLulusTepatMahasiswa({ selectedYear }: TabelKKLulusTepatMahasiswaProps) {
  const [mahasiswaData, setMahasiswaData] = useState<MahasiswaKKLulusTepat[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  
  // State for pagination
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [paginatedData, setPaginatedData] = useState<MahasiswaKKLulusTepat[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        setError(null);
        
        const url = selectedYear === 'all' 
          ? '/api/tabeldetail/kk-lulus-tepat'
          : `/api/tabeldetail/kk-lulus-tepat?tahun_angkatan=${selectedYear}`;
          
        const response = await fetch(url, {
          cache: 'no-store',
        });
        
        if (!response.ok) {
          throw new Error('Failed to fetch mahasiswa kelompok keahlian lulus tepat data');
        }
        
        const data = await response.json();
        setMahasiswaData(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Terjadi kesalahan');
        console.error('Error fetching data:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [selectedYear]);

  // Update paginated data when data or pagination settings change
  useEffect(() => {
    paginateData();
  }, [mahasiswaData, currentPage, pageSize]);

  // Paginate data
  const paginateData = () => {
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    setPaginatedData(mahasiswaData.slice(startIndex, endIndex));
  };

  // Get total number of pages
  const getTotalPages = () => {
    return Math.ceil(mahasiswaData.length / pageSize);
  };

  // Handle page change
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  // Handle page size change
  const handlePageSizeChange = (size: string) => {
    setPageSize(Number(size));
    setCurrentPage(1); // Reset to first page when changing page size
  };

  // Fungsi untuk mendapatkan icon berdasarkan ranking semester
  const getRankingIcon = (index: number) => {
    if (index === 0) return <Trophy className="h-4 w-4 text-yellow-500" />;
    if (index === 1) return <Medal className="h-4 w-4 text-gray-400" />;
    if (index === 2) return <Award className="h-4 w-4 text-amber-600" />;
    return null;
  };

  // Hitung statistik kelompok keahlian dan semester
  const kelompokKeahlianStats = mahasiswaData.reduce((acc, mahasiswa) => {
    const kelompok = mahasiswa.nama_kelompok_keahlian;
    acc[kelompok] = (acc[kelompok] || 0) + 1;
    return acc;
  }, {} as Record<string, number>);

  const stats = {
    total: mahasiswaData.length,
    total_kelompok: Object.keys(kelompokKeahlianStats).length,
    fastest_semester: mahasiswaData.length > 0 ? Math.min(...mahasiswaData.map(m => m.semester)) : 0
  };

  if (loading) {
    return (
      <Card className="bg-white dark:bg-slate-900 shadow-lg">
        <CardHeader>
          <CardTitle className="text-xl font-bold dark:text-white">
            <div className="flex items-center gap-2">
              <Loader2 className="h-5 w-5 animate-spin" />
              Loading...
            </div>
          </CardTitle>
        </CardHeader>
      </Card>
    );
  }

  if (error) {
    return (
      <Card className="bg-white dark:bg-slate-900 shadow-lg">
        <CardHeader>
          <CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
            Error: {error}
          </CardTitle>
        </CardHeader>
      </Card>
    );
  }

  return (
    <Card className="bg-white dark:bg-slate-900 shadow-lg">
      <CardHeader>
        <CardTitle className="text-xl font-bold dark:text-white flex items-center gap-2">
          <GraduationCap className="h-5 w-5" />
          Tabel Mahasiswa Lulus Tepat Waktu per Kelompok Keahlian {selectedYear !== 'all' ? `Angkatan ${selectedYear}` : 'Semua Angkatan'}
        </CardTitle>
        {/* Tampilkan ringkasan statistik */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-2">
          <div className="px-3 py-2 rounded-lg bg-green-50 dark:bg-green-900/20">
            <div className="text-xs text-green-600 dark:text-green-400">Total Lulus Tepat Waktu</div>
            <div className="font-bold text-green-800 dark:text-green-300">{stats.total}</div>
          </div>
          <div className="px-3 py-2 rounded-lg bg-purple-50 dark:bg-purple-900/20">
            <div className="text-xs text-purple-600 dark:text-purple-400">Total Kelompok Keahlian</div>
            <div className="font-bold text-purple-800 dark:text-purple-300">{stats.total_kelompok}</div>
          </div>
          <div className="px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/20">
            <div className="text-xs text-blue-600 dark:text-blue-400">Semester Tercepat</div>
            <div className="font-bold text-blue-800 dark:text-blue-300">{stats.fastest_semester}</div>
          </div>
        </div>
        {/* Tampilkan ringkasan kelompok keahlian */}
        <div className="flex flex-wrap gap-2 mt-2">
          {Object.entries(kelompokKeahlianStats)
            .sort(([,a], [,b]) => b - a) // Urutkan berdasarkan jumlah mahasiswa terbanyak
            .map(([kelompok, count]) => (
            <span 
              key={kelompok} 
              className="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
            >
              {kelompok}: {count}
            </span>
          ))}
        </div>
      </CardHeader>
      <CardContent>
        {/* Show entries selector */}
        <div className="flex items-center gap-2 mb-4">
          <span className="text-sm">Show</span>
          <Select
            value={pageSize.toString()}
            onValueChange={handlePageSizeChange}
          >
            <SelectTrigger className="w-[80px]">
              <SelectValue placeholder={pageSize.toString()} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="5">5</SelectItem>
              <SelectItem value="10">10</SelectItem>
              <SelectItem value="25">25</SelectItem>
              <SelectItem value="50">50</SelectItem>
              <SelectItem value="100">100</SelectItem>
            </SelectContent>
          </Select>
          <span className="text-sm">entries</span>
        </div>

        <div className="border rounded-md overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow className="bg-gray-50 dark:bg-slate-800">
                <TableHead className="font-semibold text-center">Ranking</TableHead>
                <TableHead className="font-semibold">NIM</TableHead>
                <TableHead className="font-semibold">Nama Mahasiswa</TableHead>
                <TableHead className="font-semibold text-center">Tahun Angkatan</TableHead>
                <TableHead className="font-semibold text-center">Kelompok Keahlian</TableHead>
                <TableHead className="font-semibold text-center">Semester Lulus</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {paginatedData.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
                    Tidak ada data yang tersedia
                  </TableCell>
                </TableRow>
              ) : (
                paginatedData.map((mahasiswa, index) => {
                  const globalIndex = (currentPage - 1) * pageSize + index;
                  return (
                    <TableRow 
                      key={mahasiswa.nim}
                      className={index % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-gray-50/50 dark:bg-slate-800/50"}
                    >
                      <TableCell className="text-center font-medium dark:text-white">
                        <div className="flex items-center justify-center gap-1">
                          {getRankingIcon(globalIndex)}
                          <span>{globalIndex + 1}</span>
                        </div>
                      </TableCell>
                      <TableCell className="font-medium dark:text-white">
                        {mahasiswa.nim}
                      </TableCell>
                      <TableCell className="dark:text-white">
                        {mahasiswa.nama}
                      </TableCell>
                      <TableCell className="text-center dark:text-white">
                        {mahasiswa.tahun_angkatan}
                      </TableCell>
                      <TableCell className="text-center font-medium dark:text-white">
                        {mahasiswa.nama_kelompok_keahlian}
                      </TableCell>
                      <TableCell className="text-center font-medium dark:text-white">
                        <span className="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                          {mahasiswa.semester} semester
                        </span>
                      </TableCell>
                    </TableRow>
                  );
                })
              )}
            </TableBody>
          </Table>
        </div>

        {/* Pagination info and controls */}
        {!loading && !error && mahasiswaData.length > 0 && (
          <div className="flex flex-col sm:flex-row justify-between items-center gap-4 mt-4">
            <div className="text-sm text-muted-foreground">
              Showing {getDisplayRange().start} to {getDisplayRange().end} of {mahasiswaData.length} entries
            </div>
            <Pagination>
              <PaginationContent>
                <PaginationItem>
                  <PaginationPrevious 
                    onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
                    className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
                  />
                </PaginationItem>
                
                {renderPaginationItems()}
                
                <PaginationItem>
                  <PaginationNext 
                    onClick={() => handlePageChange(Math.min(getTotalPages(), currentPage + 1))}
                    className={currentPage === getTotalPages() ? "pointer-events-none opacity-50" : "cursor-pointer"}
                  />
                </PaginationItem>
              </PaginationContent>
            </Pagination>
          </div>
        )}
      </CardContent>
    </Card>
  );

  // Calculate the range of entries being displayed
  function getDisplayRange() {
    if (mahasiswaData.length === 0) return { start: 0, end: 0 };
    
    const start = (currentPage - 1) * pageSize + 1;
    const end = Math.min(currentPage * pageSize, mahasiswaData.length);
    
    return { start, end };
  }

  // Generate pagination items
  function renderPaginationItems() {
    const totalPages = getTotalPages();
    const items = [];
    
    // Always show first page
    items.push(
      <PaginationItem key="first">
        <PaginationLink 
          isActive={currentPage === 1} 
          onClick={() => handlePageChange(1)}
          className="cursor-pointer"
        >
          1
        </PaginationLink>
      </PaginationItem>
    );
    
    // Show ellipsis if needed
    if (currentPage > 3) {
      items.push(
        <PaginationItem key="ellipsis-start">
          <PaginationEllipsis />
        </PaginationItem>
      );
    }
    
    // Show pages around current page
    for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
      if (i === 1 || i === totalPages) continue; // Skip first and last pages as they're always shown
      items.push(
        <PaginationItem key={i}>
          <PaginationLink 
            isActive={currentPage === i} 
            onClick={() => handlePageChange(i)}
            className="cursor-pointer"
          >
            {i}
          </PaginationLink>
        </PaginationItem>
      );
    }
    
    // Show ellipsis if needed
    if (currentPage < totalPages - 2) {
      items.push(
        <PaginationItem key="ellipsis-end">
          <PaginationEllipsis />
        </PaginationItem>
      );
    }
    
    // Always show last page if there's more than one page
    if (totalPages > 1) {
      items.push(
        <PaginationItem key="last">
          <PaginationLink 
            isActive={currentPage === totalPages} 
            onClick={() => handlePageChange(totalPages)}
            className="cursor-pointer"
          >
            {totalPages}
          </PaginationLink>
        </PaginationItem>
      );
    }
    
    return items;
  }
}
