'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import { format } from 'date-fns';
import { tr } from 'date-fns/locale';
import {
  CheckCircle2,
  XCircle,
  Clock,
  MinusCircle,
  Users,
  CalendarDays,
  ChevronDown,
  Loader2,
  Inbox,
  ArrowRight,
  TrendingUp,
} from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';
import { BranchSelector } from '@/components/school/branch-selector';
import { useSearchParams } from 'next/navigation';

type Row = {
  id: string;
  studentId: string;
  status: 'PRESENT' | 'ABSENT' | 'LATE' | 'EXCUSED';
  arrivalAt?: string | null;
  departureAt?: string | null;
  student?: { firstName: string; lastName: string };
};

type ClassroomOpt = { id: string; name: string; branchName?: string };

const STATUS_MAP = {
  PRESENT: {
    label: 'Geldi',
    bg: 'bg-emerald-100 dark:bg-emerald-900/40',
    text: 'text-emerald-800 dark:text-emerald-400',
    dot: 'bg-emerald-500',
    icon: CheckCircle2,
    rowHl: '',
  },
  ABSENT: {
    label: 'Gelmedi',
    bg: 'bg-red-100 dark:bg-red-900/40',
    text: 'text-red-800 dark:text-red-400',
    dot: 'bg-red-500',
    icon: XCircle,
    rowHl: 'bg-red-50/40 dark:bg-red-950/10',
  },
  LATE: {
    label: 'Geç Geldi',
    bg: 'bg-amber-100 dark:bg-amber-900/40',
    text: 'text-amber-800 dark:text-amber-400',
    dot: 'bg-amber-500',
    icon: Clock,
    rowHl: 'bg-amber-50/40 dark:bg-amber-950/10',
  },
  EXCUSED: {
    label: 'İzinli',
    bg: 'bg-sky-100 dark:bg-sky-900/40',
    text: 'text-sky-800 dark:text-sky-400',
    dot: 'bg-sky-500',
    icon: MinusCircle,
    rowHl: '',
  },
} as const;

function formatTime(iso: string | null | undefined): string {
  if (!iso) return '—';
  try {
    return format(new Date(iso), 'HH:mm');
  } catch {
    return '—';
  }
}

function getInitials(firstName: string, lastName: string): string {
  return `${firstName[0] ?? ''}${lastName[0] ?? ''}`.toUpperCase();
}

export default function SchoolAttendancePage() {
  const searchParams = useSearchParams();
  const branchId = searchParams.get('branchId') ?? 'all';

  const [date, setDate] = useState(() => format(new Date(), 'yyyy-MM-dd'));
  const [classroomId, setClassroomId] = useState('');
  const [classrooms, setClassrooms] = useState<ClassroomOpt[]>([]);
  const [rows, setRows] = useState<Row[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [statusFilter, setStatusFilter] = useState<'ALL' | 'PRESENT' | 'ABSENT' | 'LATE' | 'EXCUSED'>('ALL');
  const [search, setSearch] = useState('');

  useEffect(() => {
    setClassroomId('');
    const q = new URLSearchParams({ limit: '200' });
    if (branchId !== 'all') q.set('branchId', branchId);
    apiFetchJson<ClassroomOpt[]>(`/v1/admin/classrooms?${q.toString()}`).then((res) => {
      setClassrooms(Array.isArray(res.data) ? res.data : []);
    });
  }, [branchId]);

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    const q = new URLSearchParams();
    q.set('date', date);
    if (classroomId) q.set('classroomId', classroomId);
    const res = await apiFetchJson<Row[]>(`/v1/teacher/attendance?${q.toString()}`);
    if (res.error) {
      setError(res.error);
      setRows([]);
    } else {
      setRows(Array.isArray(res.data) ? res.data : []);
    }
    setLoading(false);
  }, [date, classroomId]);

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

  const stats = useMemo(() => ({
    total: rows.length,
    present: rows.filter((r) => r.status === 'PRESENT').length,
    absent: rows.filter((r) => r.status === 'ABSENT').length,
    late: rows.filter((r) => r.status === 'LATE').length,
    excused: rows.filter((r) => r.status === 'EXCUSED').length,
  }), [rows]);

  const attendanceRate = stats.total > 0
    ? Math.round(((stats.present + stats.late) / stats.total) * 100)
    : 0;

  const filtered = useMemo(() => {
    let list = rows;
    if (statusFilter !== 'ALL') list = list.filter((r) => r.status === statusFilter);
    if (search.trim()) {
      const q = search.toLowerCase();
      list = list.filter((r) => {
        if (!r.student) return r.studentId.toLowerCase().includes(q);
        const full = `${r.student.firstName} ${r.student.lastName}`.toLowerCase();
        return full.includes(q);
      });
    }
    return list;
  }, [rows, statusFilter, search]);

  const formattedDate = useMemo(() => {
    try {
      return format(new Date(date), 'd MMMM yyyy, EEEE', { locale: tr });
    } catch {
      return date;
    }
  }, [date]);

  return (
    <div className="space-y-5 font-[var(--font-urbanist,_system-ui)]">

      {/* ── Hero Header ─────────────────────────────────────────── */}
      <div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-[#f0fdf4] via-[#f8fafc] to-[#eff6ff] p-6 dark:border-slate-700 dark:from-emerald-950/30 dark:via-slate-900 dark:to-blue-950/30">
        {/* Decorative blur */}
        <div className="pointer-events-none absolute -right-16 -top-16 h-64 w-64 rounded-full bg-emerald-300/20 blur-3xl dark:bg-emerald-600/10" />
        <div className="pointer-events-none absolute -bottom-10 right-32 h-40 w-40 rounded-full bg-sky-300/20 blur-2xl dark:bg-sky-600/10" />

        <div className="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600 dark:text-emerald-400">
              Operasyon
            </p>
            <h1 className="mt-1.5 text-2xl font-bold tracking-tight text-slate-900 dark:text-white">
              Yoklama Özeti
            </h1>
            <div className="mt-1 flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
              <CalendarDays className="h-3.5 w-3.5 shrink-0" />
              <span className="capitalize">{formattedDate}</span>
            </div>
          </div>

          {stats.total > 0 && (
            <div className="flex shrink-0 flex-col items-center gap-0.5 rounded-xl border border-emerald-200 bg-white/70 px-5 py-3 dark:border-emerald-800/40 dark:bg-emerald-900/20">
              <div className="flex items-center gap-2">
                <TrendingUp className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
                <span className="text-2xl font-bold text-emerald-700 dark:text-emerald-300">
                  %{attendanceRate}
                </span>
              </div>
              <p className="text-xs font-medium text-slate-500 dark:text-slate-400">Katılım oranı</p>
            </div>
          )}
        </div>
      </div>

      {/* ── Stats Cards ─────────────────────────────────────────── */}
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-5">
        {[
          { label: 'Toplam', value: stats.total, color: 'bg-slate-50 dark:bg-slate-900', border: 'border-slate-200 dark:border-slate-700', text: 'text-slate-900 dark:text-white', sub: 'text-slate-500', icon: Users, iconColor: 'text-slate-400' },
          { label: 'Geldi', value: stats.present, color: 'bg-emerald-50 dark:bg-emerald-950/40', border: 'border-emerald-200 dark:border-emerald-800/40', text: 'text-emerald-900 dark:text-emerald-200', sub: 'text-emerald-600 dark:text-emerald-500', icon: CheckCircle2, iconColor: 'text-emerald-500' },
          { label: 'Gelmedi', value: stats.absent, color: 'bg-red-50 dark:bg-red-950/40', border: 'border-red-200 dark:border-red-800/40', text: 'text-red-900 dark:text-red-200', sub: 'text-red-500', icon: XCircle, iconColor: 'text-red-500' },
          { label: 'Geç Geldi', value: stats.late, color: 'bg-amber-50 dark:bg-amber-950/40', border: 'border-amber-200 dark:border-amber-800/40', text: 'text-amber-900 dark:text-amber-200', sub: 'text-amber-600 dark:text-amber-500', icon: Clock, iconColor: 'text-amber-500' },
          { label: 'İzinli', value: stats.excused, color: 'bg-sky-50 dark:bg-sky-950/40', border: 'border-sky-200 dark:border-sky-800/40', text: 'text-sky-900 dark:text-sky-200', sub: 'text-sky-500', icon: MinusCircle, iconColor: 'text-sky-500' },
        ].map((s) => {
          const Icon = s.icon;
          return (
            <div
              key={s.label}
              className={`flex flex-col gap-2 rounded-xl border ${s.border} ${s.color} p-4 transition-shadow hover:shadow-sm`}
            >
              <div className="flex items-center justify-between">
                <p className={`text-xs font-semibold ${s.sub}`}>{s.label}</p>
                <Icon className={`h-4 w-4 ${s.iconColor}`} strokeWidth={1.75} />
              </div>
              <p className={`text-2xl font-bold ${s.text}`}>{s.value}</p>
            </div>
          );
        })}
      </div>

      {/* ── Filters & Table Card ─────────────────────────────────── */}
      <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900/40">

        {/* Toolbar */}
        <div className="border-b border-slate-200 px-5 py-4 dark:border-slate-700">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <h2 className="text-base font-bold text-slate-900 dark:text-white">Yoklama Kayıtları</h2>
              <p className="mt-0.5 text-xs text-slate-500 dark:text-slate-400">
                Salt okunur — kayıtlar öğretmen panelinden güncellenir.
              </p>
            </div>

            {/* Search */}
            <div className="relative w-full sm:w-64">
              <svg className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" viewBox="0 0 16 16">
                <path fill="currentColor" fillRule="evenodd" d="M7.333.583a6.75 6.75 0 1 0 4.213 12.022l2.59 2.592a.75.75 0 0 0 1.062-1.06l-2.591-2.592A6.75 6.75 0 0 0 7.334.583zm0 1.5a5.25 5.25 0 1 1 0 10.5 5.25 5.25 0 0 1 0-10.5" clipRule="evenodd" />
              </svg>
              <input
                type="text"
                placeholder="Öğrenci ara…"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="h-9 w-full rounded-full border border-slate-200 bg-slate-50 py-2 pl-9 pr-3.5 text-sm text-slate-900 transition placeholder:text-slate-400 focus:border-emerald-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-400/25 dark:border-slate-700 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-emerald-600 dark:focus:bg-slate-900"
              />
            </div>
          </div>

          {/* Filters row */}
          <div className="mt-4 flex flex-col flex-wrap gap-3 sm:flex-row sm:items-end">
            <BranchSelector />

            {/* Date picker */}
            <div className="flex flex-col gap-1">
              <label className="text-xs font-medium text-slate-500 dark:text-slate-400">Tarih</label>
              <div className="relative">
                <CalendarDays className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" />
                <input
                  type="date"
                  value={date}
                  onChange={(e) => setDate(e.target.value)}
                  className="h-9 rounded-lg border border-slate-200 bg-slate-50 py-2 pl-8 pr-3 text-sm text-slate-900 transition focus:border-emerald-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-400/25 dark:border-slate-700 dark:bg-slate-800 dark:text-white dark:focus:border-emerald-600 dark:focus:bg-slate-900"
                />
              </div>
            </div>

            {/* Classroom select */}
            <div className="flex flex-col gap-1">
              <label className="text-xs font-medium text-slate-500 dark:text-slate-400">Sınıf</label>
              <div className="relative">
                <select
                  value={classroomId}
                  onChange={(e) => setClassroomId(e.target.value)}
                  className="h-9 min-w-[200px] appearance-none rounded-lg border border-slate-200 bg-slate-50 py-2 pl-3 pr-8 text-sm text-slate-900 transition focus:border-emerald-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-400/25 dark:border-slate-700 dark:bg-slate-800 dark:text-white dark:focus:border-emerald-600 dark:focus:bg-slate-900"
                >
                  <option value="">Tüm sınıflar</option>
                  {classrooms.map((c) => (
                    <option key={c.id} value={c.id}>
                      {c.name}{c.branchName ? ` · ${c.branchName}` : ''}
                    </option>
                  ))}
                </select>
                <ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" />
              </div>
            </div>

            {/* Status filter pills */}
            <div className="flex flex-wrap items-center gap-1.5 sm:ml-auto">
              {(['ALL', 'PRESENT', 'ABSENT', 'LATE', 'EXCUSED'] as const).map((s) => {
                const active = statusFilter === s;
                const label = s === 'ALL' ? 'Tümü' : STATUS_MAP[s].label;
                return (
                  <button
                    key={s}
                    type="button"
                    onClick={() => setStatusFilter(s)}
                    className={`inline-flex h-7 items-center gap-1.5 rounded-full px-3 text-xs font-semibold transition-all ${
                      active
                        ? s === 'ALL'
                          ? 'bg-slate-800 text-white dark:bg-white dark:text-slate-900'
                          : `${STATUS_MAP[s].bg} ${STATUS_MAP[s].text} ring-1 ring-current/20`
                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700'
                    }`}
                  >
                    {s !== 'ALL' && (
                      <span className={`h-1.5 w-1.5 rounded-full ${active ? STATUS_MAP[s].dot : 'bg-slate-400 dark:bg-slate-500'}`} />
                    )}
                    {label}
                    {s !== 'ALL' && (
                      <span className="opacity-70">
                        {s === 'PRESENT' ? stats.present
                          : s === 'ABSENT' ? stats.absent
                          : s === 'LATE' ? stats.late
                          : stats.excused}
                      </span>
                    )}
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        {/* Error */}
        {error && (
          <div className="border-b border-red-200 bg-red-50 px-5 py-3 dark:border-red-800/30 dark:bg-red-950/30">
            <p className="text-sm font-medium text-red-700 dark:text-red-400">{error}</p>
          </div>
        )}

        {/* Table */}
        {loading ? (
          <div className="flex flex-col items-center justify-center gap-3 py-20">
            <Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
            <p className="text-sm font-medium text-slate-500 dark:text-slate-400">Yükleniyor…</p>
          </div>
        ) : filtered.length === 0 ? (
          <div className="flex flex-col items-center justify-center gap-4 py-20 text-center">
            <div className="flex h-14 w-14 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800">
              <Inbox className="h-7 w-7 text-slate-400 dark:text-slate-500" strokeWidth={1.5} />
            </div>
            <div className="space-y-1">
              <p className="text-[15px] font-semibold text-slate-800 dark:text-slate-200">
                Kayıt bulunamadı
              </p>
              <p className="max-w-xs text-sm text-slate-500 dark:text-slate-400">
                {search || statusFilter !== 'ALL'
                  ? 'Filtreyi değiştirerek tekrar deneyin.'
                  : 'Seçili tarih ve sınıf için yoklama kaydı yok.'}
              </p>
            </div>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-slate-200 bg-slate-50/80 dark:border-slate-700 dark:bg-slate-800/60">
                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-600 dark:text-slate-400">Öğrenci</th>
                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-600 dark:text-slate-400">Durum</th>
                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-600 dark:text-slate-400">Geliş Saati</th>
                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-600 dark:text-slate-400">Gidiş Saati</th>
                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-600 dark:text-slate-400">Süre</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200 dark:divide-slate-700/70">
                {filtered.map((row) => {
                  const s = row.student;
                  const name = s ? `${s.firstName} ${s.lastName}` : row.studentId;
                  const initials = s ? getInitials(s.firstName, s.lastName) : '??';
                  const st = STATUS_MAP[row.status] ?? STATUS_MAP.PRESENT;
                  const Icon = st.icon;

                  const arrivalTime = formatTime(row.arrivalAt);
                  const departureTime = formatTime(row.departureAt);

                  // Duration calc
                  let duration = '—';
                  if (row.arrivalAt && row.departureAt) {
                    try {
                      const diff = new Date(row.departureAt).getTime() - new Date(row.arrivalAt).getTime();
                      if (diff > 0) {
                        const h = Math.floor(diff / 3600000);
                        const m = Math.floor((diff % 3600000) / 60000);
                        duration = h > 0 ? `${h}s ${m}dk` : `${m}dk`;
                      }
                    } catch {
                      duration = '—';
                    }
                  }

                  return (
                    <tr
                      key={row.id}
                      className={`transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50 ${st.rowHl}`}
                    >
                      {/* Öğrenci */}
                      <td className="px-5 py-3.5">
                        <div className="flex items-center gap-3">
                          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-slate-200 to-slate-300 text-xs font-bold text-slate-700 dark:from-slate-700 dark:to-slate-600 dark:text-slate-200">
                            {initials}
                          </div>
                          <span className="text-sm font-medium text-slate-900 dark:text-white">{name}</span>
                        </div>
                      </td>

                      {/* Durum */}
                      <td className="px-5 py-3.5">
                        <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold ${st.bg} ${st.text}`}>
                          <Icon className="h-3.5 w-3.5" strokeWidth={2} />
                          {st.label}
                        </span>
                      </td>

                      {/* Geliş */}
                      <td className="px-5 py-3.5">
                        {arrivalTime !== '—' ? (
                          <div className="flex items-center gap-1.5 text-sm text-slate-700 dark:text-slate-300">
                            <Clock className="h-3.5 w-3.5 text-slate-400" strokeWidth={1.75} />
                            <span className="font-medium">{arrivalTime}</span>
                          </div>
                        ) : (
                          <span className="text-sm text-slate-400 dark:text-slate-600">—</span>
                        )}
                      </td>

                      {/* Gidiş */}
                      <td className="px-5 py-3.5">
                        {departureTime !== '—' ? (
                          <div className="flex items-center gap-1.5 text-sm text-slate-700 dark:text-slate-300">
                            <ArrowRight className="h-3.5 w-3.5 text-slate-400" strokeWidth={1.75} />
                            <span className="font-medium">{departureTime}</span>
                          </div>
                        ) : (
                          <span className="text-sm text-slate-400 dark:text-slate-600">—</span>
                        )}
                      </td>

                      {/* Süre */}
                      <td className="px-5 py-3.5">
                        {duration !== '—' ? (
                          <span className="inline-flex items-center rounded-md bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-700 dark:bg-slate-800 dark:text-slate-300">
                            {duration}
                          </span>
                        ) : (
                          <span className="text-sm text-slate-400 dark:text-slate-600">—</span>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}

        {/* Footer */}
        {!loading && filtered.length > 0 && (
          <div className="border-t border-slate-200 px-5 py-3 dark:border-slate-700">
            <p className="text-xs text-slate-500 dark:text-slate-400">
              <span className="font-semibold text-slate-700 dark:text-slate-300">{filtered.length}</span> kayıt gösteriliyor
              {filtered.length !== rows.length && (
                <> · toplam <span className="font-semibold text-slate-700 dark:text-slate-300">{rows.length}</span></>
              )}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}