'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";

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

  return (
    <div className="p-4 bg-gray-50 dark:bg-[var(--background)] min-h-screen">
      {/* Header */}
      <div className="mb-4">
        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
          <div>
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
              Dashboard Mahasiswa
            </h1>
            <p className="text-sm text-gray-600 dark:text-gray-300">
              Data visualisasi mahasiswa per jenis pendaftaran, status, IPK, dan asal daerah
            </p>
          </div>
          <div className="flex-shrink-0">
            <FilterTahunAngkatan 
              selectedYear={selectedYear}
              onYearChange={setSelectedYear}
            />
          </div>
        </div>
      </div>

      {selectedYear === "all" ? (
        /* Layout untuk semua data */
        <div className="space-y-4">
          {/* Row 1: Main chart + Side chart */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
            {/* Statistik Mahasiswa - Large */}
            <div className="lg:col-span-2">
              <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
                <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
                  Statistik Mahasiswa (Keseluruhan)
                </h3>
                <div style={{ height: '300px' }}>
                  <StatistikMahasiswaChart />
                </div>
              </div>
            </div>

            {/* Jenis Pendaftaran */}
            <div className="lg:col-span-1">
              <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
                <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
                  Jenis Pendaftaran Mahasiswa
                </h3>
                <div style={{ height: '300px' }}>
                  <JenisPendaftaranChart />
                </div>
              </div>
            </div>
          </div>

          {/* Row 2: Three equal charts */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {/* Status Mahasiswa */}
            <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
              <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
                Status Mahasiswa
              </h3>
              <div style={{ height: '250px' }}>
                <StatusMahasiswaChart />
              </div>
            </div>

            {/* IPK Chart */}
            <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
              <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
                Rata-rata IPK per Program Studi
              </h3>
              <div style={{ height: '250px' }}>
                <IPKChart />
              </div>
            </div>

            {/* Asal Daerah */}
            <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
              <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
                Distribusi Asal Daerah Mahasiswa
              </h3>
              <div style={{ height: '250px' }}>
                <AsalDaerahChart />
              </div>
            </div>
          </div>
        </div>
      ) : (
        /* Layout untuk data per angkatan */
        <div className="space-y-4">
          {/* Row 1: Main chart + Side chart */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
            {/* Statistik Per Angkatan - Large */}
            <div className="lg:col-span-2">
              <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
                <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
                  Statistik Mahasiswa Angkatan {selectedYear}
                </h3>
                <div style={{ height: '300px' }}>
                  <StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
                </div>
              </div>
            </div>

            {/* Jenis Pendaftaran Per Angkatan */}
            <div className="lg:col-span-1">
              <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
                <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
                  Jenis Pendaftaran Angkatan {selectedYear}
                </h3>
                <div style={{ height: '300px' }}>
                  <JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
                </div>
              </div>
            </div>
          </div>

          {/* Row 2: Full width chart */}
          <div className="grid grid-cols-1 gap-4">
            <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
              <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
                Asal Daerah Mahasiswa Angkatan {selectedYear}
              </h3>
              <div style={{ height: '250px' }}>
                <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}