'use client';

import { useState, useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { FiCalendar, FiCheckCircle, FiXCircle, FiClock, FiFilter } from 'react-icons/fi';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import apiClient, { API_CONFIG } from '@/lib/api';

interface DailyRecord {
  id: number;
  attendance_date: string;
  check_in_time: string | null;
  check_out_time: string | null;
  status: string;
  check_in_method: string;
  notes: string | null;
}

const STATUS_CONFIG: Record<string, { label: string; color: string; bg: string }> = {
  present: { label: 'Hadir', color: 'text-green-700', bg: 'bg-green-100' },
  late:    { label: 'Terlambat', color: 'text-amber-700', bg: 'bg-amber-100' },
  absent:  { label: 'Tidak Hadir', color: 'text-red-700', bg: 'bg-red-100' },
  leave:   { label: 'Izin', color: 'text-blue-700', bg: 'bg-blue-100' },
  sick:    { label: 'Sakit', color: 'text-purple-700', bg: 'bg-purple-100' },
  excused: { label: 'Dispensasi', color: 'text-gray-700', bg: 'bg-gray-100' },
};

export default function StudentAttendancePage() {
  const t = useTranslations();
  const [records, setRecords] = useState<DailyRecord[]>([]);
  const [summary, setSummary] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [dateFrom, setDateFrom] = useState(() => {
    const d = new Date(); d.setDate(1); return d.toISOString().split('T')[0];
  });
  const [dateTo, setDateTo] = useState(() => new Date().toISOString().split('T')[0]);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => { fetchAttendance(); }, [dateFrom, dateTo, page]);

  const fetchAttendance = async () => {
    setLoading(true);
    try {
      const res = await apiClient.get(API_CONFIG.endpoints.studentAttendance.my, {
        params: { start_date: dateFrom, end_date: dateTo, page, per_page: 20 },
      });
      setRecords(res.data.data?.records || []);
      setSummary(res.data.data?.summary);
      setTotalPages(res.data.meta?.pagination?.last_page || 1);
    } catch {
      setRecords([]);
    } finally {
      setLoading(false);
    }
  };

  // Chart data — last 7 days
  const chartData = records.slice(0, 7).reverse().map(r => ({
    date: new Date(r.attendance_date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short' }),
    hadir: r.status === 'present' ? 1 : 0,
    terlambat: r.status === 'late' ? 1 : 0,
    absen: r.status === 'absent' ? 1 : 0,
  }));

  return (
    <div className="p-4 lg:p-6 space-y-5 max-w-3xl mx-auto">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Absensi Saya</h1>
        <p className="text-sm text-gray-500 mt-0.5">Riwayat kehadiran masuk dan pulang sekolah</p>
      </div>

      {/* Summary */}
      {summary && (
        <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
          {[
            { label: 'Hadir', value: summary.present, color: 'text-green-600', bg: 'bg-green-50' },
            { label: 'Terlambat', value: summary.late, color: 'text-amber-600', bg: 'bg-amber-50' },
            { label: 'Tidak Hadir', value: summary.absent, color: 'text-red-600', bg: 'bg-red-50' },
            { label: 'Izin', value: summary.leave, color: 'text-blue-600', bg: 'bg-blue-50' },
            { label: 'Sakit', value: summary.sick, color: 'text-purple-600', bg: 'bg-purple-50' },
            { label: 'Tingkat', value: `${summary.attendance_rate}%`, color: 'text-primary', bg: 'bg-primary/5' },
          ].map((s, i) => (
            <motion.div key={i} initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.04 }}
              className={`${s.bg} rounded-xl p-3 text-center`}>
              <p className={`text-xl font-bold ${s.color}`}>{s.value}</p>
              <p className="text-xs text-gray-600 mt-0.5">{s.label}</p>
            </motion.div>
          ))}
        </div>
      )}

      {/* Filters */}
      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex flex-wrap gap-3 items-center">
        <FiFilter className="text-gray-400" size={14} />
        <div className="flex items-center gap-2">
          <label className="text-sm text-gray-600">Dari</label>
          <input type="date" value={dateFrom} onChange={(e) => { setDateFrom(e.target.value); setPage(1); }}
            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary/30 outline-none" />
        </div>
        <div className="flex items-center gap-2">
          <label className="text-sm text-gray-600">Sampai</label>
          <input type="date" value={dateTo} onChange={(e) => { setDateTo(e.target.value); setPage(1); }}
            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary/30 outline-none" />
        </div>
      </div>

      {/* Records */}
      <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
        {loading ? (
          <div className="flex justify-center items-center h-48">
            <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-primary" />
          </div>
        ) : records.length === 0 ? (
          <div className="text-center py-16 text-gray-400">
            <FiCalendar className="mx-auto text-5xl mb-3 opacity-30" />
            <p>Tidak ada data absensi</p>
          </div>
        ) : (
          <div className="divide-y divide-gray-100">
            {records.map((r) => {
              const cfg = STATUS_CONFIG[r.status] || STATUS_CONFIG.absent;
              return (
                <div key={r.id} className="flex items-center gap-4 px-5 py-3.5 hover:bg-gray-50">
                  <div className="w-24 flex-shrink-0">
                    <p className="text-sm font-medium text-gray-900">
                      {new Date(r.attendance_date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short' })}
                    </p>
                    <p className="text-xs text-gray-400">
                      {new Date(r.attendance_date).toLocaleDateString('id-ID', { weekday: 'short' })}
                    </p>
                  </div>
                  <div className="flex-1 flex items-center gap-4">
                    <div className="text-center">
                      <p className="text-xs text-gray-400">Masuk</p>
                      <p className="text-sm font-medium text-gray-900">{r.check_in_time?.substring(0, 5) || '—'}</p>
                    </div>
                    <div className="text-center">
                      <p className="text-xs text-gray-400">Pulang</p>
                      <p className="text-sm font-medium text-gray-900">{r.check_out_time?.substring(0, 5) || '—'}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className={`px-2.5 py-1 rounded-full text-xs font-medium ${cfg.bg} ${cfg.color}`}>
                      {cfg.label}
                    </span>
                    {r.check_in_method === 'rfid' && (
                      <span className="text-xs text-gray-400">📡</span>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {totalPages > 1 && (
          <div className="px-5 py-3 border-t border-gray-100 flex items-center justify-between">
            <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}
              className="px-3 py-1.5 border border-gray-300 rounded-lg text-sm disabled:opacity-50 hover:bg-gray-50">Sebelumnya</button>
            <span className="text-sm text-gray-500">{page} / {totalPages}</span>
            <button onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages}
              className="px-3 py-1.5 border border-gray-300 rounded-lg text-sm disabled:opacity-50 hover:bg-gray-50">Berikutnya</button>
          </div>
        )}
      </div>
    </div>
  );
}