import React, { useEffect, useState } from 'react';
import { supabase } from '../services/supabaseClient';
import { 
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer 
} from 'recharts';
import { 
  Users, CheckCircle2, RefreshCw, Filter, 
  ChevronDown, ChevronUp, ChevronRight, XCircle, Clock, Search 
} from 'lucide-react';

// --- Interfaces ---
interface ScheduleItem {
  id: string;
  jam_ke: string;
  mapel: string;
  nama_guru: string;
  kelas: string;
  isFilled: boolean;
}

interface AbsenceItem {
  nama: string;
  status: string; // S, I, A, D
}

interface ClassData {
  className: string; // "7A"
  male: number;
  female: number;
  total: number;
  present: number;
  schedules: ScheduleItem[];
  absences: AbsenceItem[];
}

interface GradeGroup {
  grade: string; // "7", "8", "9"
  label: string; // "JENJANG KELAS 7"
  total_present: number;
  total_students: number;
  classes: ClassData[];
}

interface TeacherScheduleDetail {
  kelas: string;
  jam_ke: string;
  mapel: string;
  isFilled: boolean;
}

interface TeacherProgress {
  nama: string;
  nip: string;
  filled: number;
  target: number;
  schedules: TeacherScheduleDetail[];
}

export const LiveDashboard: React.FC = () => {
  const [time, setTime] = useState(new Date());
  
  // Data States
  const [stats, setStats] = useState({ sick: 0, permission: 0, alpha: 0, dispen: 0, late: 0, total_students: 0 });
  const [gradeGroups, setGradeGroups] = useState<GradeGroup[]>([]);
  const [teacherList, setTeacherList] = useState<TeacherProgress[]>([]);
  const [loading, setLoading] = useState(true);

  // UI States (Accordion)
  const [expandedGrades, setExpandedGrades] = useState<Record<string, boolean>>({ '7': true, '8': false, '9': false });
  const [expandedClasses, setExpandedClasses] = useState<Record<string, boolean>>({});
  const [expandedTeacher, setExpandedTeacher] = useState<string | null>(null);

  // --- Effects ---
  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    fetchLiveData();
    const interval = setInterval(fetchLiveData, 60000); 
    return () => clearInterval(interval);
  }, []);

  // --- Helper Functions ---
  const getDayName = (date: Date) => {
    const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
    return days[date.getDay()];
  };

  const toggleGrade = (grade: string) => {
    setExpandedGrades(prev => ({ ...prev, [grade]: !prev[grade] }));
  };

  const toggleClass = (className: string) => {
    setExpandedClasses(prev => ({ ...prev, [className]: !prev[className] }));
  };

  const toggleTeacher = (nama: string) => {
    setExpandedTeacher(prev => (prev === nama ? null : nama));
  };

  // --- Data Fetching ---
  const fetchLiveData = async () => {
    const todayStr = new Date().toISOString().split('T')[0];
    const dayName = getDayName(new Date());

    try {
      // 1. Fetch Students
      const { data: students } = await supabase.from('data_siswa').select('*');
      
      // 2. Fetch Attendance Logs (Today)
      const { data: logs } = await supabase.from('jurnal_absensi').select('*').eq('tanggal', todayStr);

      // 3. Fetch Schedules (Today)
      const { data: schedules } = await supabase.from('jadwal_pelajaran').select('*').eq('hari', dayName);

      // 4. Fetch Filled Journals (Today)
      const { data: journals } = await supabase.from('data_jurnal').select('*').eq('tanggal', todayStr);

      // --- Processing Logic ---
      
      // A. Process Overall Stats
      const currentStats = { sick: 0, permission: 0, alpha: 0, dispen: 0, late: 0, total_students: students?.length || 0 };
      logs?.forEach(l => {
        if(l.status === 'S') currentStats.sick++;
        else if(l.status === 'I') currentStats.permission++;
        else if(l.status === 'A') currentStats.alpha++;
        else if(l.status === 'D') currentStats.dispen++;
        else if(l.status === 'T') currentStats.late++;
      });
      setStats(currentStats);

      // B. Structure Hierarchy: Grade -> Class -> Data
      const hierarchy: Record<string, GradeGroup> = {
        '7': { grade: '7', label: 'JENJANG KELAS 7', total_present: 0, total_students: 0, classes: [] },
        '8': { grade: '8', label: 'JENJANG KELAS 8', total_present: 0, total_students: 0, classes: [] },
        '9': { grade: '9', label: 'JENJANG KELAS 9', total_present: 0, total_students: 0, classes: [] }
      };

      // Group students by class
      const classMap: Record<string, ClassData> = {};
      
      // Init Classes from Students
      students?.forEach(s => {
        const cls = s.kelas;
        const grade = cls.charAt(0);
        
        if (!classMap[cls]) {
          classMap[cls] = { className: cls, male: 0, female: 0, total: 0, present: 0, schedules: [], absences: [] };
        }
        
        classMap[cls].total++;
        if (s.jenis_kelamin === 'L') classMap[cls].male++;
        else classMap[cls].female++;
        classMap[cls].present++; // Assume present initially
        
        // Add to Grade Totals
        if (hierarchy[grade]) {
          hierarchy[grade].total_students++;
          hierarchy[grade].total_present++;
        }
      });

      // Apply Absences
      logs?.forEach(l => {
        const cls = l.kelas;
        const grade = cls?.charAt(0);
        if (classMap[cls]) {
          // If status is not Hadir/Late, decrease present count
          if (['S', 'I', 'A', 'D'].includes(l.status)) {
            classMap[cls].present--;
            classMap[cls].absences.push({ nama: l.nama, status: l.status });
            
            if (hierarchy[grade]) {
              hierarchy[grade].total_present--;
            }
          }
        }
      });

      // Apply Schedule & Journal Check (Class View)
      const activeSchedules = (schedules && schedules.length > 0) ? schedules : generateMockSchedules(Object.keys(classMap));

      activeSchedules.forEach((sch: any) => {
        if (classMap[sch.kelas]) {
          const isFilled = journals?.some(j => 
            j.kelas === sch.kelas && 
            j.jam_ke === sch.jam_ke && 
            j.mapel === sch.mapel
          ) || false;

          classMap[sch.kelas].schedules.push({
            id: sch.id || Math.random().toString(),
            jam_ke: sch.jam_ke,
            mapel: sch.mapel,
            nama_guru: sch.nama_guru,
            kelas: sch.kelas,
            isFilled: isFilled
          });
        }
      });

      // Convert Map to Array and Sort
      Object.keys(classMap).sort().forEach(cls => {
        const grade = cls.charAt(0);
        if (hierarchy[grade]) {
          hierarchy[grade].classes.push(classMap[cls]);
        }
      });

      setGradeGroups(Object.values(hierarchy));

      // C. Teacher Progress Processing (Group by Teacher)
      const teacherMap: Record<string, TeacherProgress> = {};
      
      activeSchedules.forEach((sch: any) => {
        const teacherName = sch.nama_guru || 'Unknown';
        
        if (!teacherMap[teacherName]) {
          teacherMap[teacherName] = { 
            nama: teacherName, 
            nip: sch.nip || '', 
            filled: 0, 
            target: 0, 
            schedules: [] 
          };
        }

        // Check if filled based on teacher schedule
        const isFilled = journals?.some(j => 
          (j.nama_guru === teacherName || j.nip_guru === sch.nip) && 
          j.kelas === sch.kelas && 
          j.jam_ke === sch.jam_ke
        ) || false;

        teacherMap[teacherName].target++;
        if (isFilled) teacherMap[teacherName].filled++;
        
        teacherMap[teacherName].schedules.push({
            kelas: sch.kelas,
            jam_ke: sch.jam_ke,
            mapel: sch.mapel,
            isFilled: isFilled
        });
      });

      setTeacherList(Object.values(teacherMap).sort((a, b) => b.filled - a.filled));

    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  // Helper to generate mock schedules if DB is empty (to match visual requirement)
  const generateMockSchedules = (classes: string[]) => {
    const mocks: any[] = [];
    // Ensure we have enough data for the visual
    const teacherPool = [
      { name: 'Achmad Miftakul Arifin, S.Pd', mapel: 'Matematika' },
      { name: 'Dhian Manik Surendra, S.Pd', mapel: 'Bahasa Indonesia' },
      { name: 'Didik Ponco Utomo, S.Pd', mapel: 'PJOK' },
      { name: 'Mamik Agustini, S.Si', mapel: 'IPA' },
      { name: 'Ribut Sulichati, S.Si', mapel: 'Matematika' },
      { name: 'Shofia Dwi Kusumawati, S.Pd', mapel: 'Bahasa Inggris' },
      { name: 'Siti Aminah, S.Pd', mapel: 'PPKn' },
      { name: 'Ilsa Wajarriati, S.Pd', mapel: 'BK' },
      { name: 'Anisul Kharis, S.Pd', mapel: 'Bahasa Jawa' },
      { name: 'Denok Styaningrum, S.Pd', mapel: 'Seni Budaya' },
      { name: 'Nur Bina, S.E', mapel: 'IPS' },
      { name: 'Catur Perdana Putra, S.Pd.I', mapel: 'PAI' }
    ];

    classes.forEach((c, idx) => {
      // Assign random teachers to classes for mock
      const t1 = teacherPool[idx % teacherPool.length];
      const t2 = teacherPool[(idx + 1) % teacherPool.length];
      
      mocks.push({ kelas: c, jam_ke: 'Jam 2, 3', mapel: t1.mapel, nama_guru: t1.name });
      mocks.push({ kelas: c, jam_ke: 'Jam 4, 5', mapel: t2.mapel, nama_guru: t2.name });
      
      // Add more for specific teachers to match image density
      if(idx % 2 === 0) {
         mocks.push({ kelas: c, jam_ke: 'Jam 7, 8', mapel: 'Project', nama_guru: 'Denok Styaningrum, S.Pd' });
      }
    });
    return mocks;
  };

  // Chart Data (Static for Demo)
  const chartData = [
    { name: '5 Jan', total: 45, telat: 10 },
    { name: '6 Jan', total: 90, telat: 15 },
    { name: '7 Jan', total: 120, telat: 30 },
    { name: '8 Jan', total: 60, telat: 80 },
    { name: '9 Jan', total: 30, telat: 10 },
    { name: '10 Jan', total: 70, telat: 110 },
    { name: '19 Jan', total: 20, telat: 80 },
  ];

  return (
    <div className="min-h-screen bg-[#151922] text-slate-200 p-2 md:p-6 font-sans">
      {/* Header */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
        <div>
           <div className="font-oswald text-4xl text-white font-medium tracking-wide">
             {time.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' }).replace(/\./g, ':')}
           </div>
           <div className="text-slate-400 text-sm font-medium mt-1">
             {time.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'short', year: 'numeric' })}
           </div>
        </div>
        <div className="flex items-center gap-3">
           <div className="text-right hidden sm:block">
             <h1 className="font-oswald text-2xl text-white leading-none"><span className="text-orange-500">SMP NEGERI 6</span> PASURUAN</h1>
             <p className="text-[10px] tracking-[0.2em] text-slate-400 uppercase">Berkarakter & Berprestasi</p>
           </div>
           <div className="w-12 h-12 bg-gradient-to-br from-orange-600 to-yellow-500 rounded-lg flex items-center justify-center shadow-lg shadow-orange-500/20">
              <span className="font-oswald font-bold text-2xl text-black">6</span>
           </div>
        </div>
      </div>

      {/* Top Banner: Progress Sekolah */}
      <div className="bg-[#212529] rounded-lg p-4 border-l-4 border-orange-500 mb-6 shadow-lg relative overflow-hidden">
        <div className="flex justify-between items-end relative z-10">
           <div>
             <h3 className="text-orange-500 text-xs font-bold uppercase tracking-wider mb-1">JURNAL KBM REALTIME</h3>
             <h2 className="text-white font-oswald text-xl">PROGRESS HARI INI</h2>
             <div className="text-xs text-slate-400 mt-1 flex gap-2">
                <span>Total Guru: <span className="text-white">{teacherList.length}</span></span> |
                <span>Terisi: <span className="text-green-400">{teacherList.filter(t => t.filled > 0).length}</span></span>
             </div>
           </div>
           <div className="text-right">
             <div className="text-3xl font-oswald text-orange-500">68%</div>
             <div className="text-[10px] text-slate-500">Global Coverage</div>
           </div>
        </div>
        <div className="mt-3 w-full bg-slate-800 h-2 rounded-full overflow-hidden">
           <div className="bg-gradient-to-r from-orange-600 to-yellow-400 h-full rounded-full" style={{width: '68%'}}></div>
        </div>
      </div>

      {/* Main Layout Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* Left Column (Stats & Accordion) */}
        <div className="lg:col-span-2 space-y-6">
          
          {/* ACCORDION DATA KELAS & MURID */}
          <div className="bg-[#212529] rounded-xl border border-slate-800 shadow-lg overflow-hidden">
             
             {/* Main Header */}
             <div className="p-5 border-b border-slate-700 flex justify-between items-center bg-[#1a1d23]">
               <div className="flex items-center gap-2">
                 <Users size={18} className="text-slate-400" />
                 <span className="font-bold text-sm text-white">Data Kelas & Murid</span>
               </div>
               <div className="font-oswald text-xl text-white">
                 Hadir <span className="text-white">{gradeGroups.reduce((a,b)=>a+b.total_present, 0)}</span> <span className="text-slate-500 text-lg">| {gradeGroups.reduce((a,b)=>a+b.total_students, 0)}</span>
               </div>
             </div>

             {/* Grade Levels Loop */}
             <div className="divide-y divide-slate-800">
                {gradeGroups.map((group) => (
                  <div key={group.grade}>
                    {/* Level 1: Grade Header */}
                    <button 
                      onClick={() => toggleGrade(group.grade)}
                      className="w-full flex justify-between items-center p-4 bg-[#212529] hover:bg-slate-800 transition-colors"
                    >
                      <div className="flex items-center gap-3">
                        {expandedGrades[group.grade] ? <ChevronDown size={18} className="text-white"/> : <ChevronRight size={18} className="text-slate-500"/>}
                        <span className="font-oswald text-white tracking-wide uppercase">{group.label}</span>
                      </div>
                      <div className="flex items-center gap-3">
                        <div className="border border-slate-600 px-3 py-1 rounded text-xs font-mono text-slate-300">
                          Hadir <span className="text-white font-bold">{group.total_present}</span> | {group.total_students}
                        </div>
                        <div className="w-6 h-6 rounded-full bg-green-500/20 flex items-center justify-center">
                           <CheckCircle2 size={14} className="text-green-500"/>
                        </div>
                      </div>
                    </button>

                    {/* Grade Expanded Content */}
                    {expandedGrades[group.grade] && (
                      <div className="bg-black/20 p-2 space-y-2">
                         {group.classes.map((cls) => (
                           <div key={cls.className} className="border border-slate-700 rounded-lg overflow-hidden bg-[#252a30]">
                             
                             {/* Level 2: Class Header */}
                             <div className="flex justify-between items-center p-3 cursor-pointer" onClick={() => toggleClass(cls.className)}>
                                <div className="flex items-center gap-4">
                                  <span className="font-oswald text-2xl text-white w-10">{cls.className}</span>
                                  <span className="text-xs text-slate-400 border-l border-slate-600 pl-4">
                                    L:{cls.male} P:{cls.female}
                                  </span>
                                </div>
                                <div className="flex items-center gap-3">
                                  <span className="text-xs text-slate-300 font-mono">
                                    Hadir <span className="text-white font-bold text-sm">{cls.present}</span> | {cls.total}
                                  </span>
                                  <div className={`w-6 h-6 rounded-full flex items-center justify-center ${cls.present === cls.total ? 'bg-green-500/20' : 'bg-yellow-500/20'}`}>
                                    <CheckCircle2 size={14} className={cls.present === cls.total ? 'text-green-500' : 'text-yellow-500'}/>
                                  </div>
                                  {expandedClasses[cls.className] ? <ChevronUp size={16} className="text-accent"/> : <ChevronDown size={16} className="text-slate-500"/>}
                                </div>
                             </div>

                             {/* Level 2: Class Expanded Content (Detail Schedule) */}
                             {expandedClasses[cls.className] && (
                               <div className="border-t border-slate-700 bg-[#151922] p-4 animate-in slide-in-from-top-2 duration-200">
                                  <h4 className="text-xs font-bold text-orange-500 uppercase mb-3">Jadwal & Status Jurnal</h4>
                                  <div className="space-y-3 mb-6">
                                    {cls.schedules.length === 0 ? (
                                      <p className="text-xs text-slate-500 italic">Belum ada jadwal tersimpan.</p>
                                    ) : cls.schedules.map((sch, i) => (
                                      <div key={i} className="flex justify-between items-center border-b border-slate-800 pb-2 last:border-0">
                                        <div>
                                          <div className="text-sm text-white">
                                            <span className="font-bold">{sch.jam_ke}</span> | <span className="font-medium">{sch.mapel}</span>
                                          </div>
                                          <div className="text-xs text-slate-500 uppercase">{sch.nama_guru}</div>
                                        </div>
                                        <div>
                                          {sch.isFilled ? (
                                            <div className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center border border-green-500/30">
                                              <CheckCircle2 size={18} className="text-green-500" />
                                            </div>
                                          ) : (
                                            <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center border border-red-500/30">
                                              <XCircle size={18} className="text-red-500" />
                                            </div>
                                          )}
                                        </div>
                                      </div>
                                    ))}
                                  </div>

                                  {/* Section: Ketidakhadiran */}
                                  <div className="flex justify-between items-center mb-2">
                                     <h4 className="text-xs font-bold text-slate-400 italic">KETIDAKHADIRAN HARI INI</h4>
                                     <button className="flex items-center gap-1 text-[10px] border border-slate-600 rounded-full px-2 py-1 hover:bg-slate-700">
                                       <Search size={10} /> Detail
                                     </button>
                                  </div>
                                  
                                  <div className="space-y-1">
                                    {cls.absences.length === 0 ? (
                                      <span className="text-xs text-green-500 flex items-center gap-2"><CheckCircle2 size={12}/> Nihil (Semua Hadir)</span>
                                    ) : cls.absences.map((abs, idx) => (
                                      <div key={idx} className="flex items-start gap-3">
                                        <span className={`font-bold font-mono text-sm w-4 ${
                                          abs.status === 'S' ? 'text-blue-400' : 
                                          abs.status === 'I' ? 'text-yellow-400' : 
                                          abs.status === 'A' ? 'text-red-500' : 'text-purple-400'
                                        }`}>{abs.status}</span>
                                        <span className={`text-sm ${
                                           abs.status === 'S' ? 'text-blue-400' : 
                                           abs.status === 'I' ? 'text-yellow-400' : 
                                           abs.status === 'A' ? 'text-red-500' : 'text-purple-400'
                                        }`}>{abs.nama}</span>
                                      </div>
                                    ))}
                                  </div>

                               </div>
                             )}

                           </div>
                         ))}
                      </div>
                    )}
                  </div>
                ))}
             </div>
          </div>

          {/* Absence Statistics Cards */}
          <div className="bg-[#212529] rounded-xl p-5 border border-slate-800 shadow-lg">
             <div className="flex justify-between items-center mb-4">
               <div className="flex items-center gap-2">
                  <span className="bg-green-600 w-1 h-4 rounded-full"></span>
                  <span className="font-bold text-sm text-white uppercase">Data MBG Hari Ini | {time.toLocaleDateString('id-ID')}</span>
               </div>
             </div>

             <div className="grid grid-cols-5 gap-3">
                {[
                  { label: 'SAKIT', val: stats.sick, color: 'text-blue-400' },
                  { label: 'IJIN', val: stats.permission, color: 'text-yellow-400' },
                  { label: 'ALPA', val: stats.alpha, color: 'text-red-500' },
                  { label: 'DISPEN', val: stats.dispen, color: 'text-purple-400' },
                  { label: 'TELAT', val: stats.late, color: 'text-pink-500' }
                ].map((item, i) => (
                  <div key={i} className="bg-[#1a1d23] rounded-lg p-3 text-center border border-slate-800 hover:border-slate-600 transition-colors">
                     <div className={`font-oswald text-2xl md:text-3xl ${item.color} mb-1`}>{item.val}</div>
                     <div className="text-[10px] md:text-xs text-slate-400 font-bold tracking-wider">{item.label}</div>
                  </div>
                ))}
             </div>
          </div>

          {/* Chart Section */}
          <div className="bg-[#212529] rounded-xl p-5 border border-slate-800 shadow-lg relative">
             <div className="flex justify-between items-center mb-6">
               <h3 className="text-blue-400 font-bold text-sm flex items-center gap-2">
                 <Filter size={14} /> Grafik Tren Ketidakhadiran
               </h3>
               <div className="flex gap-4 text-xs">
                  <div className="flex items-center gap-1"><span className="w-3 h-3 bg-white rounded-sm"></span> Total</div>
                  <div className="flex items-center gap-1"><span className="w-3 h-3 bg-pink-500 rounded-sm"></span> Telat</div>
               </div>
             </div>

             <div className="h-[250px] w-full">
               <ResponsiveContainer width="100%" height="100%">
                 <LineChart data={chartData}>
                   <CartesianGrid strokeDasharray="3 3" stroke="#333" vertical={false} />
                   <XAxis dataKey="name" stroke="#64748b" fontSize={10} tickLine={false} axisLine={false} />
                   <YAxis stroke="#64748b" fontSize={10} tickLine={false} axisLine={false} />
                   <Tooltip 
                     contentStyle={{ backgroundColor: '#151922', borderColor: '#333', color: '#fff' }}
                     itemStyle={{ fontSize: '12px' }}
                   />
                   <Line type="monotone" dataKey="total" stroke="#fff" strokeWidth={2} dot={{r: 3, fill: '#fff'}} />
                   <Line type="monotone" dataKey="telat" stroke="#ec4899" strokeWidth={2} dot={{r: 3, fill: '#ec4899'}} />
                 </LineChart>
               </ResponsiveContainer>
             </div>
          </div>

        </div>

        {/* Right Column: Teacher List & Extra */}
        <div className="space-y-6">
           {/* Peminatan Stat */}
           <div className="bg-[#212529] rounded-xl p-4 border border-slate-800 flex justify-between items-center">
              <div className="flex items-center gap-2">
                 <div className="p-2 bg-blue-500/10 rounded text-blue-500"><CheckCircle2 size={16}/></div>
                 <span className="font-bold text-sm text-white">Kelas Peminatan</span>
              </div>
              <span className="font-oswald text-xl text-white">496 Peserta</span>
           </div>

           {/* Teacher Journal List (Accordion Update) */}
           <div className="bg-[#212529] rounded-xl border border-slate-800 shadow-lg h-[800px] flex flex-col">
              <div className="p-4 border-b border-slate-700 flex justify-between items-center bg-[#1a1d23]">
                 <h3 className="font-bold text-sm text-white flex items-center gap-2">
                   <Clock size={16} className="text-orange-500"/> Keterlaksanaan Jurnal
                 </h3>
                 <button onClick={fetchLiveData} className="text-slate-500 hover:text-white"><RefreshCw size={14}/></button>
              </div>
              
              <div className="flex-1 overflow-y-auto p-2 space-y-1 custom-scrollbar">
                {loading ? (
                  <div className="text-center text-slate-500 py-10 text-xs">Memuat data guru...</div>
                ) : teacherList.map((t, idx) => (
                  <div key={idx} className="rounded-lg overflow-hidden border border-slate-800/30 transition-all duration-300">
                     
                     {/* Teacher Header */}
                     <button 
                       onClick={() => toggleTeacher(t.nama)}
                       className={`w-full p-3 text-left transition-colors ${
                         expandedTeacher === t.nama ? 'bg-slate-800 border-l-4 border-accent' : 'hover:bg-slate-800/50 bg-[#212529]'
                       }`}
                     >
                       <div className="flex justify-between items-center mb-2">
                          <span className="text-xs font-bold text-slate-200 uppercase truncate max-w-[180px]">{t.nama}</span>
                          <div className="flex items-center gap-2">
                             <span className={`font-oswald text-xs font-bold ${t.filled >= t.target ? 'text-green-500' : 'text-white'}`}>
                               {t.filled}/{t.target}
                             </span>
                             {expandedTeacher === t.nama ? <ChevronUp size={14} className="text-accent"/> : <ChevronDown size={14} className="text-slate-600"/>}
                          </div>
                       </div>
                       
                       <div className="w-full bg-slate-700/50 h-1.5 rounded-full overflow-hidden">
                          <div 
                            className={`h-full rounded-full transition-all duration-500 ${
                              t.filled === 0 ? 'bg-slate-600' :
                              t.filled < t.target ? 'bg-yellow-500' : 'bg-green-500'
                            }`} 
                            style={{width: `${t.target > 0 ? (t.filled / t.target) * 100 : 0}%`}}
                          ></div>
                       </div>
                     </button>

                     {/* Expanded Detail */}
                     {expandedTeacher === t.nama && (
                       <div className="bg-[#151922] p-2 border-t border-slate-700 animate-in slide-in-from-top-2">
                          {t.schedules.length > 0 ? (
                            <div className="space-y-1">
                              {t.schedules.map((sch, i) => (
                                <div key={i} className="flex items-center justify-between p-2 rounded hover:bg-white/5 transition-colors border-b border-slate-800 last:border-0">
                                   <div className="flex flex-col">
                                      <div className="flex items-center gap-2 text-xs">
                                         <span className="font-bold text-white w-6">{sch.kelas}</span>
                                         <span className="text-orange-500 font-bold">| {sch.jam_ke}</span>
                                      </div>
                                      <span className="text-[10px] text-slate-400 truncate max-w-[150px]">{sch.mapel}</span>
                                   </div>
                                   <div>
                                     {sch.isFilled ? (
                                        <CheckCircle2 size={16} className="text-green-500" />
                                     ) : (
                                        <XCircle size={16} className="text-red-500" />
                                     )}
                                   </div>
                                </div>
                              ))}
                            </div>
                          ) : (
                            <p className="text-[10px] text-slate-500 text-center py-2">Tidak ada detail jadwal.</p>
                          )}
                       </div>
                     )}
                  </div>
                ))}
              </div>
              
              <div className="p-3 border-t border-slate-800 text-center bg-[#1a1d23]">
                 <span className="text-[10px] text-slate-500">Data diperbarui setiap menit</span>
              </div>
           </div>
        </div>

      </div>
    </div>
  );
};