'use client';

import { useEffect, useState } from 'react';
import { format } from 'date-fns';
import { tr } from 'date-fns/locale';
import { apiFetchJson } from '@/lib/auth';
import { useToast } from '@/components/school/toast-context';
import { CheckCircle2, Loader2, UserCheck, UserX, Users } from 'lucide-react';

type Classroom = {
  id: string;
  name: string;
  branchName?: string;
  _count?: { students: number };
};

type Student = {
  id: string;
  firstName: string;
  lastName: string;
  photoUrl?: string;
  classroomId: string;
};

type AttendanceData = {
  id?: string;
  studentId: string;
  student: Student;
  status: 'PRESENT' | 'ABSENT' | 'LATE' | 'EXCUSED' | null;
  date: string;
  note?: string;
};

type AttendanceRecord = {
  studentId: string;
  status: 'PRESENT' | 'ABSENT' | 'LATE' | 'EXCUSED';
};

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

function AvatarInitials({ name, size = 'md' }: { name: string; size?: 'sm' | 'md' }) {
  const [first, ...rest] = name.trim().split(' ');
  const last = rest[rest.length - 1] ?? '';
  const initials = `${first?.[0] ?? ''}${last?.[0] ?? ''}`.toUpperCase();
  const colors = [
    'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300',
    'bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300',
    'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
    'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
    'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300',
    'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
  ];
  const colorIdx = (first?.charCodeAt(0) ?? 0) % colors.length;
  const sz = size === 'sm' ? 'h-7 w-7 text-[10px]' : 'h-9 w-9 text-xs';
  return (
    <span className={`inline-flex shrink-0 items-center justify-center rounded-full font-semibold ${sz} ${colors[colorIdx]}`}>
      {initials}
    </span>
  );
}

export default function TeacherAttendancePage() {
  const { toast } = useToast();
  const [classrooms, setClassrooms] = useState<Classroom[]>([]);
  const [students, setStudents] = useState<Student[]>([]);
  const [attendance, setAttendance] = useState<Map<string, AttendanceRecord>>(new Map());
  const [selectedClassroomId, setSelectedClassroomId] = useState('');
  const [attendanceDate, setAttendanceDate] = useState(format(new Date(), 'yyyy-MM-dd'));
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    (async () => {
      const res = await apiFetchJson<Classroom[]>('/v1/teacher/attendance/my-classrooms');
      if (res.error) {
        toast({ title: 'Hata', description: res.error, variant: 'destructive' });
        return;
      }
      setClassrooms(res.data || []);
      if (res.data?.[0]) setSelectedClassroomId(res.data[0].id);
    })();
  }, []);

  useEffect(() => {
    if (!selectedClassroomId) return;
    (async () => {
      setLoading(true);
      const res = await apiFetchJson<AttendanceData[]>(
        `/v1/teacher/attendance?date=${attendanceDate}&classroomId=${selectedClassroomId}`,
      );
      setLoading(false);
      if (res.error) {
        toast({ title: 'Hata', description: res.error, variant: 'destructive' });
        return;
      }
      const data = res.data || [];
      setStudents(data.map((a) => a.student));
      const map = new Map<string, AttendanceRecord>();
      data.forEach((a) => {
        map.set(a.studentId, { studentId: a.studentId, status: a.status || 'PRESENT' });
      });
      setAttendance(map);
    })();
  }, [selectedClassroomId, attendanceDate]);

  const toggleAttendance = (studentId: string) => {
    setAttendance((prev) => {
      const updated = new Map(prev);
      const current = updated.get(studentId);
      if (!current) return prev;
      updated.set(studentId, { ...current, status: current.status === 'PRESENT' ? 'ABSENT' : 'PRESENT' });
      return updated;
    });
  };

  const markAll = (status: 'PRESENT' | 'ABSENT') => {
    const map = new Map<string, AttendanceRecord>();
    students.forEach((s) => map.set(s.id, { studentId: s.id, status }));
    setAttendance(map);
  };

  const handleSave = async () => {
    if (!selectedClassroomId) return;
    setSaving(true);
    const res = await apiFetchJson('/v1/teacher/attendance/bulk', {
      method: 'POST',
      body: JSON.stringify({
        date: attendanceDate,
        classroomId: selectedClassroomId,
        records: Array.from(attendance.values()),
      }),
    });
    setSaving(false);
    if (res.error) {
      toast({ title: 'Kayıt başarısız', description: res.error, variant: 'destructive' });
      return;
    }
    toast({ title: 'Yoklama kaydedildi.' });
  };

  const presentCount = Array.from(attendance.values()).filter((r) => r.status === 'PRESENT').length;
  const absentCount = students.length - presentCount;
  const selectedClassroom = classrooms.find((c) => c.id === selectedClassroomId);

  return (
    <div className="font-urbanist space-y-5">

      {/* ── Header ─────────────────────────────────────────── */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-widest text-primary dark:text-teal-400">
            Öğretmen Paneli
          </p>
          <h1 className="mt-0.5 text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
            Yoklama
          </h1>
        </div>
        {students.length > 0 && (
          <button
            type="button"
            disabled={saving}
            onClick={handleSave}
            className="inline-flex h-9 items-center gap-2 rounded-full bg-primary px-5 text-sm font-semibold text-white shadow-sm transition hover:bg-[#1c5f66] disabled:opacity-60 dark:bg-teal-600 dark:hover:bg-teal-500"
          >
            {saving ? (
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
            ) : (
              <CheckCircle2 className="h-3.5 w-3.5" />
            )}
            {saving ? 'Kaydediliyor…' : 'Yoklamayı Kaydet'}
          </button>
        )}
      </div>

      {/* ── Filtre Çubuğu ──────────────────────────────────── */}
      <div className="rounded-xl border border-zinc-200/90 bg-white shadow-theme-sm dark:border-zinc-800/90 dark:bg-zinc-900/40">
        <div className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:gap-4">
          {/* Tarih */}
          <div className="flex items-center gap-2.5">
            <label htmlFor="att-date" className="shrink-0 text-xs font-semibold text-zinc-500 dark:text-zinc-400">
              Tarih
            </label>
            <input
              id="att-date"
              type="date"
              value={attendanceDate}
              onChange={(e) => setAttendanceDate(e.target.value)}
              className="h-8 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 text-sm text-zinc-900 focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
            />
          </div>

          <div className="hidden h-4 w-px bg-zinc-200 dark:bg-zinc-700 sm:block" />

          {/* Sınıf */}
          <div className="flex items-center gap-2.5">
            <label htmlFor="att-classroom" className="shrink-0 text-xs font-semibold text-zinc-500 dark:text-zinc-400">
              Sınıf
            </label>
            <select
              id="att-classroom"
              value={selectedClassroomId}
              onChange={(e) => setSelectedClassroomId(e.target.value)}
              className="h-8 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 pr-8 text-sm text-zinc-900 focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
            >
              <option value="">Seçin</option>
              {classrooms.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.name}
                </option>
              ))}
            </select>
          </div>

          {/* İstatistikler */}
          {students.length > 0 && (
            <>
              <div className="hidden h-4 w-px bg-zinc-200 dark:bg-zinc-700 sm:block" />
              <div className="flex items-center gap-3 text-xs">
                <span className="flex items-center gap-1.5 font-medium text-zinc-500 dark:text-zinc-400">
                  <Users className="h-3.5 w-3.5" />
                  {students.length}
                </span>
                <span className="flex items-center gap-1.5 font-semibold text-emerald-600 dark:text-emerald-400">
                  <UserCheck className="h-3.5 w-3.5" />
                  {presentCount}
                </span>
                <span className="flex items-center gap-1.5 font-semibold text-red-500 dark:text-red-400">
                  <UserX className="h-3.5 w-3.5" />
                  {absentCount}
                </span>
              </div>

              <div className="hidden h-4 w-px bg-zinc-200 dark:bg-zinc-700 sm:block" />

              {/* Toplu işlemler */}
              <div className="flex items-center gap-1.5">
                <button
                  type="button"
                  onClick={() => markAll('PRESENT')}
                  className="h-7 rounded-md border border-emerald-200 bg-emerald-50 px-2.5 text-[11px] font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-400 dark:hover:bg-emerald-900/40"
                >
                  Tümü Mevcut
                </button>
                <button
                  type="button"
                  onClick={() => markAll('ABSENT')}
                  className="h-7 rounded-md border border-red-200 bg-red-50 px-2.5 text-[11px] font-semibold text-red-600 transition hover:bg-red-100 dark:border-red-800/60 dark:bg-red-950/40 dark:text-red-400 dark:hover:bg-red-900/40"
                >
                  Tümü Yok
                </button>
              </div>
            </>
          )}
        </div>
      </div>

      {/* ── Öğrenci Listesi ────────────────────────────────── */}
      {selectedClassroom && (
        <div className="overflow-hidden rounded-xl border border-zinc-200/90 bg-white shadow-theme-sm dark:border-zinc-800/90 dark:bg-zinc-900/40">

          {/* Liste başlığı */}
          <div className="flex items-center justify-between border-b border-zinc-100 px-5 py-3.5 dark:border-zinc-800">
            <div>
              <span className="text-sm font-semibold text-zinc-800 dark:text-zinc-100">
                {selectedClassroom.name}
              </span>
              <span className="ml-2 text-xs text-zinc-400 dark:text-zinc-500">
                {format(new Date(attendanceDate + 'T12:00:00'), 'd MMMM yyyy, EEEE', { locale: tr })}
              </span>
            </div>
          </div>

          {/* İçerik */}
          {loading ? (
            <div className="flex items-center justify-center gap-2 py-16 text-sm text-zinc-400">
              <Loader2 className="h-4 w-4 animate-spin" />
              Yükleniyor…
            </div>
          ) : students.length === 0 ? (
            <div className="py-16 text-center text-sm text-zinc-400 dark:text-zinc-500">
              Bu sınıfta aktif öğrenci bulunamadı.
            </div>
          ) : (
            <div className="divide-y divide-zinc-100 dark:divide-zinc-800/60">
              {students.map((student, idx) => {
                const record = attendance.get(student.id);
                const isPresent = record?.status === 'PRESENT';
                const fullName = `${student.firstName} ${student.lastName}`;

                return (
                  <div
                    key={student.id}
                    className={`group flex items-center gap-3 px-5 py-3 transition-colors ${
                      isPresent
                        ? 'hover:bg-emerald-50/50 dark:hover:bg-emerald-950/20'
                        : 'bg-red-50/30 hover:bg-red-50/60 dark:bg-red-950/10 dark:hover:bg-red-950/20'
                    }`}
                  >
                    {/* Sıra no */}
                    <span className="w-5 shrink-0 text-right text-[11px] tabular-nums text-zinc-300 dark:text-zinc-600">
                      {idx + 1}
                    </span>

                    {/* Avatar */}
                    {student.photoUrl ? (
                      <img
                        src={student.photoUrl}
                        alt={fullName}
                        className="h-9 w-9 shrink-0 rounded-full object-cover ring-2 ring-white dark:ring-zinc-800"
                      />
                    ) : (
                      <AvatarInitials name={fullName} />
                    )}

                    {/* İsim */}
                    <span className="min-w-0 flex-1 truncate text-sm font-medium text-zinc-800 dark:text-zinc-100">
                      {fullName}
                    </span>

                    {/* Toggle */}
                    <button
                      type="button"
                      onClick={() => toggleAttendance(student.id)}
                      className={`inline-flex h-7 shrink-0 items-center gap-1.5 rounded-full px-3 text-[11px] font-semibold transition-all ${
                        isPresent
                          ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/40 dark:text-emerald-300 dark:hover:bg-emerald-800/50'
                          : 'bg-red-100 text-red-600 hover:bg-red-200 dark:bg-red-900/40 dark:text-red-400 dark:hover:bg-red-800/50'
                      }`}
                    >
                      <span
                        className={`h-1.5 w-1.5 rounded-full ${
                          isPresent ? 'bg-emerald-500' : 'bg-red-500'
                        }`}
                      />
                      {isPresent ? 'Mevcut' : 'Gelmedi'}
                    </button>
                  </div>
                );
              })}
            </div>
          )}

          {/* Footer özeti */}
          {students.length > 0 && !loading && (
            <div className="flex items-center justify-between border-t border-zinc-100 bg-zinc-50/60 px-5 py-3 dark:border-zinc-800 dark:bg-zinc-800/30">
              <div className="flex items-center gap-4 text-xs">
                <span className="flex items-center gap-1.5 text-zinc-500 dark:text-zinc-400">
                  <span className="h-2 w-2 rounded-full bg-emerald-500" />
                  <strong className="text-emerald-600 dark:text-emerald-400">{presentCount}</strong>
                  &nbsp;mevcut
                </span>
                <span className="flex items-center gap-1.5 text-zinc-500 dark:text-zinc-400">
                  <span className="h-2 w-2 rounded-full bg-red-500" />
                  <strong className="text-red-600 dark:text-red-400">{absentCount}</strong>
                  &nbsp;gelmedi
                </span>
                {students.length > 0 && (
                  <span className="text-zinc-400 dark:text-zinc-500">
                    %{Math.round((presentCount / students.length) * 100)} katılım
                  </span>
                )}
              </div>

              <button
                type="button"
                disabled={saving}
                onClick={handleSave}
                className="inline-flex h-7 items-center gap-1.5 rounded-full bg-primary px-3.5 text-[11px] font-semibold text-white shadow-sm transition hover:bg-[#1c5f66] disabled:opacity-60 dark:bg-teal-600 dark:hover:bg-teal-500"
              >
                {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : <CheckCircle2 className="h-3 w-3" />}
                {saving ? 'Kaydediliyor…' : 'Kaydet'}
              </button>
            </div>
          )}
        </div>
      )}

      {/* Sınıf seçilmemiş durum */}
      {!selectedClassroom && !loading && classrooms.length > 0 && (
        <div className="rounded-xl border border-dashed border-zinc-200 py-16 text-center dark:border-zinc-700">
          <p className="text-sm text-zinc-400 dark:text-zinc-500">Yoklama yapmak için yukarıdan bir sınıf seçin.</p>
        </div>
      )}

      {!loading && classrooms.length === 0 && (
        <div className="rounded-xl border border-dashed border-zinc-200 py-16 text-center dark:border-zinc-700">
          <p className="text-sm font-medium text-zinc-400 dark:text-zinc-500">Atandığınız bir sınıf bulunamadı.</p>
          <p className="mt-1 text-xs text-zinc-300 dark:text-zinc-600">Yöneticinizle iletişime geçin.</p>
        </div>
      )}
    </div>
  );
}