import React, { useEffect, useState } from 'react';
import { useAuth } from '../context/AuthContext';
import { supabase } from '../services/supabaseClient';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
import { Users, Clock, AlertTriangle, FileText } from 'lucide-react';

export const Dashboard: React.FC = () => {
  const { user } = useAuth();
  const [stats, setStats] = useState({ present: 0, sick: 0, permission: 0, alpha: 0, late: 0 });
  const [journalCount, setJournalCount] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchDashboardData();
  }, []);

  const fetchDashboardData = async () => {
    const today = new Date().toISOString().split('T')[0];
    
    // 1. Fetch data dari 'jurnal_absensi' untuk hari ini
    const { data: logs } = await supabase
      .from('jurnal_absensi')
      .select('status')
      .eq('tanggal', today);

    // 2. Fetch jumlah jurnal dari 'data_jurnal' untuk user login
    const { count } = await supabase
      .from('data_jurnal')
      .select('*', { count: 'exact' })
      .eq('tanggal', today)
      .eq('nip_guru', user?.nip);

    if (logs) {
      const newStats = logs.reduce((acc: any, curr: any) => {
        const s = curr.status;
        if (s === 'H') acc.present++;
        else if (s === 'S') acc.sick++;
        else if (s === 'I') acc.permission++;
        else if (s === 'A') acc.alpha++;
        else if (s === 'T') acc.late++;
        return acc;
      }, { present: 0, sick: 0, permission: 0, alpha: 0, late: 0 });
      setStats(newStats);
    }
    
    if (count !== null) setJournalCount(count);
    setLoading(false);
  };

  const chartData = [
    { name: 'Sakit', value: stats.sick, color: '#0dcaf0' },
    { name: 'Izin', value: stats.permission, color: '#ffc107' },
    { name: 'Alpa', value: stats.alpha, color: '#dc3545' },
    { name: 'Telat', value: stats.late, color: '#d63384' },
  ];

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-oswald text-white">DASHBOARD</h1>
          <p className="text-sm text-slate-400">Selamat datang, <span className="text-accent">{user?.nama}</span></p>
        </div>
        <div className="text-right hidden sm:block">
          <div className="text-2xl font-oswald text-white">{new Date().toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'})}</div>
          <div className="text-xs text-slate-500">{new Date().toLocaleDateString('id-ID', {weekday: 'long', day:'numeric', month:'long'})}</div>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-card p-4 rounded-xl border border-gray-800">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2 bg-blue-500/10 rounded-lg text-blue-500"><Users size={18} /></div>
            <span className="text-xs text-slate-400 uppercase font-bold">Total Izin</span>
          </div>
          <div className="text-2xl font-oswald text-white">{stats.sick + stats.permission}</div>
        </div>
        <div className="bg-card p-4 rounded-xl border border-gray-800">
          <div className="flex items-center gap-3 mb-2">
             <div className="p-2 bg-red-500/10 rounded-lg text-red-500"><AlertTriangle size={18} /></div>
            <span className="text-xs text-slate-400 uppercase font-bold">Total Alpa</span>
          </div>
           <div className="text-2xl font-oswald text-white">{stats.alpha}</div>
        </div>
        <div className="bg-card p-4 rounded-xl border border-gray-800">
          <div className="flex items-center gap-3 mb-2">
             <div className="p-2 bg-pink-500/10 rounded-lg text-pink-500"><Clock size={18} /></div>
            <span className="text-xs text-slate-400 uppercase font-bold">Terlambat</span>
          </div>
           <div className="text-2xl font-oswald text-white">{stats.late}</div>
        </div>
        <div className="bg-card p-4 rounded-xl border border-gray-800">
          <div className="flex items-center gap-3 mb-2">
             <div className="p-2 bg-yellow-500/10 rounded-lg text-yellow-500"><FileText size={18} /></div>
            <span className="text-xs text-slate-400 uppercase font-bold">Jurnal Anda</span>
          </div>
           <div className="text-2xl font-oswald text-white">{journalCount}</div>
        </div>
      </div>

      {/* Chart Section */}
      <div className="bg-card p-6 rounded-xl border border-gray-800">
        <h3 className="font-oswald text-white mb-6">STATISTIK KETIDAKHADIRAN HARI INI</h3>
        <div className="h-64 w-full">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={chartData}>
              <XAxis dataKey="name" stroke="#64748b" fontSize={12} tickLine={false} axisLine={false} />
              <YAxis stroke="#64748b" fontSize={12} tickLine={false} axisLine={false} />
              <Tooltip 
                cursor={{fill: 'rgba(255,255,255,0.05)'}}
                contentStyle={{ backgroundColor: '#151922', borderColor: '#333', color: '#fff' }}
              />
              <Bar dataKey="value" radius={[4, 4, 0, 0]}>
                {chartData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Recent Activity / Jurnal Progress */}
      <div className="bg-card p-6 rounded-xl border border-gray-800">
        <h3 className="font-oswald text-white mb-4">PROGRESS JURNAL HARIAN</h3>
        {loading ? (
            <div className="text-slate-500 text-sm italic">Memuat data...</div>
        ) : (
            <div className="space-y-4">
                <div className="flex items-center justify-between">
                    <div className="text-sm text-slate-300">Target Anda Hari Ini</div>
                    <div className="text-sm font-bold text-accent">4 Jam Pelajaran</div>
                </div>
                <div className="w-full bg-slate-800 rounded-full h-2.5">
                    <div className="bg-accent h-2.5 rounded-full" style={{ width: `${Math.min((journalCount / 4) * 100, 100)}%` }}></div>
                </div>
                <p className="text-xs text-slate-500">
                    Anda telah mengisi {journalCount} dari estimasi 4 jam mengajar.
                </p>
            </div>
        )}
      </div>
    </div>
  );
};