'use client';

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Users, GraduationCap, Trophy, BookOpen } from "lucide-react";

// Skeleton loading component for stats cards
export const DashboardStatsSkeleton = () => (
  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-8">
    {[...Array(4)].map((_, i) => (
      <Card key={i} className="bg-white dark:bg-slate-900 shadow-lg">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          <div className="h-4 w-4 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        </CardHeader>
        <CardContent>
          <div className="h-8 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-2"></div>
          <div className="flex justify-between">
            <div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
          </div>
        </CardContent>
      </Card>
    ))}
  </div>
);

interface MahasiswaTotal {
  total_mahasiswa: number;
  mahasiswa_aktif: number;
  total_lulus: number;
  pria_lulus: number;
  wanita_lulus: number;
  total_berprestasi: number;
  prestasi_akademik: number;
  prestasi_non_akademik: number;
  total_mahasiswa_aktif_lulus: number;
  total_mahasiswa_beasiswa: number;
  total_mahasiswa_beasiswa_pemerintah: number;
  total_mahasiswa_beasiswa_non_pemerintah: number;
}

interface DashboardStatsProps {
  mahasiswaData: MahasiswaTotal;
}

export default function DashboardStats({ mahasiswaData }: DashboardStatsProps) {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-4">
      {/* Kartu Total Mahasiswa */}
      <Card className="bg-white dark:bg-slate-900 shadow-lg">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium dark:text-white">
            Total Mahasiswa
          </CardTitle>
          <Users className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_mahasiswa}</div>
          <div className="flex justify-between mt-2 text-xs text-muted-foreground">
            <span className="dark:text-white">Aktif: <span className="text-green-500">{mahasiswaData.mahasiswa_aktif}</span></span>
          </div>
        </CardContent>
      </Card>

      {/* Kartu Total Kelulusan */}
      <Card className="bg-white dark:bg-slate-900 shadow-lg">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium dark:text-white">
            Total Kelulusan
          </CardTitle>
          <GraduationCap className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_lulus}</div>
          <div className="flex justify-between mt-2 text-xs text-muted-foreground">
            <span className="dark:text-white">Laki-laki: <span className="text-blue-500">{mahasiswaData.pria_lulus}</span></span>
            <span className="dark:text-white">Perempuan: <span className="text-pink-500">{mahasiswaData.wanita_lulus}</span></span>
          </div>
        </CardContent>
      </Card>

      {/* Kartu Total Prestasi */}
      <Card className="bg-white dark:bg-slate-900 shadow-lg">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium dark:text-white">
            Mahasiswa Berprestasi
          </CardTitle>
          <Trophy className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_berprestasi}</div>
          <div className="flex justify-between mt-2 text-xs text-muted-foreground">
            <span className="dark:text-white">Akademik: <span className="text-yellow-500">{mahasiswaData.prestasi_akademik}</span></span>
            <span className="dark:text-white">Non-Akademik: <span className="text-purple-500">{mahasiswaData.prestasi_non_akademik}</span></span>
          </div>
        </CardContent>
      </Card>

      {/* Kartu Mahasiswa Beasiswa */}
      <Card className="bg-white dark:bg-slate-900 shadow-lg">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium dark:text-white">
            Mahasiswa Beasiswa
          </CardTitle>
          <BookOpen className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_mahasiswa_beasiswa}</div>
          <div className="flex justify-between mt-2 text-xs text-muted-foreground">
            <span className="dark:text-white">Pemerintah: <span className="text-green-500">{mahasiswaData.total_mahasiswa_beasiswa_pemerintah}</span></span>
            <span className="dark:text-white">Non-Pemerintah: <span className="text-amber-400">{mahasiswaData.total_mahasiswa_beasiswa_non_pemerintah}</span></span>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}