'use client';

import { useState } from "react";
import StatistikMahasiswaChart from "@/components/charts/StatistikMahasiswaChart";
import StatistikPerAngkatanChart from "@/components/charts/StatistikPerAngkatanChart";
import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart";
import AsalDaerahChart from "@/components/charts/AsalDaerahChart";
import IPKChart from "@/components/charts/IPKChart";
import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
import JenisPendaftaranPerAngkatanChart from "@/components/charts/JenisPendaftaranPerAngkatanChart";
import AsalDaerahPerAngkatanChart from "@/components/charts/AsalDaerahPerAngkatanChart";
import StatusMahasiswaChart from "@/components/charts/StatusMahasiswaChart";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function TotalMahasiswaPage() {
  const [selectedYear, setSelectedYear] = useState<string>("all");

  // helper wrapper biar semua chart full-height di dalam card
  const Tile = ({ title, children, className = "" }: any) => (
    <Card className={`bg-white dark:bg-slate-900 shadow-lg gap-0 dark:text-white ${className}`}>
      {title && (
        <CardHeader className="py-3">
          <CardTitle className="text-sm">{title}</CardTitle>
        </CardHeader>
      )}
      <CardContent className="p-4"> {/* atur tinggi tile di sini */}
        <div className="h-full">{children}</div>
      </CardContent>
    </Card>
  );

  return (
    <div className="container mx-auto p-4 space-y-6">
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
  <div>
    <h1 className="text-3xl font-bold">Mahasiswa</h1>
    <p className="text-sm text-gray-600 dark:text-gray-300 mt-1 max-w-prose">
      Informasi jumlah mahasiswa, jenis pendaftaran, status mahasiswa, rata-rata IPK, dan asal daerah dengan filter tahun angkatan.
    </p>
  </div>
  {/* (opsional) tempat tombol aksi */}
  {/* <div className="flex items-center gap-2">
    <Button variant="outline" size="sm">Export</Button>
  </div> */}
</div>

{/* Toolbar Filter (sticky) */}
<div className="sticky top-16 z-30"> 
  <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
    <CardContent className="py-3">
      <div className="flex flex-wrap items-center gap-3">
        <FilterTahunAngkatan
          selectedYear={selectedYear}
          onYearChange={setSelectedYear}
        />
        {/* tombol reset (opsional) */}
        {/* <Button variant="outline" size="sm" onClick={() => setSelectedYear('all')}>Reset</Button> */}
      </div>
    </CardContent>
  </Card>
</div>

      {selectedYear === "all" ? (
        /* ===== LAYOUT ALL YEARS (12 kolom) ===== */
        <div
          className="
            grid gap-4
            grid-cols-1
            md:grid-cols-6
            lg:grid-cols-12
          "
        >
          {/* Bar besar kiri */}
          <div className="md:col-span-6 lg:col-span-7">
            <Tile title="Statistik Mahasiswa">
              <StatistikMahasiswaChart />
            </Tile>
          </div>

          {/* Dua tile kecil kanan atas */}
          <div className="md:col-span-6 lg:col-span-5">
            <Tile title="Jenis Pendaftaran">
              <JenisPendaftaranChart />
            </Tile>
          </div>

          {/* Bar horizontal (wilayah) */}
          <div className="md:col-span-6 lg:col-span-7">
            <Tile title="Status Mahasiswa">
              <StatusMahasiswaChart />
            </Tile>
          </div>

          {/* Rata-rata IPK */}
          <div className="md:col-span-6 lg:col-span-5">
            <Tile title="Rata-rata IPK">
              <IPKChart />
            </Tile>
          </div>

          {/* Lebar penuh di bawah */}
          <div className="lg:col-span-12">
            <Tile title="Asal Daerah">
              <AsalDaerahChart />
            </Tile>
          </div>
        </div>
      ) : (
        /* ===== LAYOUT PER ANGKATAN (12 kolom) ===== */
        <div
          className="
            grid gap-4
            grid-cols-1
            md:grid-cols-6
            lg:grid-cols-12
          "
        >
          <div className="md:col-span-6 lg:col-span-7">
            <Tile title={`Statistik Angkatan ${selectedYear}`}>
              <StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
            </Tile>
          </div>

          <div className="md:col-span-6 lg:col-span-5">
            <Tile title="Jenis Pendaftaran per Angkatan">
              <JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
            </Tile>
          </div>

          <div className="lg:col-span-12">
            <Tile title="Asal Daerah per Angkatan">
              <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
            </Tile>
          </div>
        </div>
      )}
    </div>
  );
}