'use client';

import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import { format } from 'date-fns';
import { tr } from 'date-fns/locale';
import {
  FileText, CheckCircle2, Clock, Search,
  CheckSquare, Square, Send, FilePlus2, Loader2, Users,
} from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';
import { useToast } from '@/components/school/toast-context';

type Classroom = { id: string; name: string; branch?: { id: string; name: string } | null };
type Student = { id: string; firstName: string; lastName: string; classroomId?: string | null };
type ReportCard = {
  id: string; studentId: string; date: string; status: 'DRAFT' | 'PUBLISHED';
  entryCount: number;
  student: { id: string; firstName: string; lastName: string };
  classroom?: { id: string; name: string } | null;
};

function Avatar({ name, size = 'md' }: { name: string; size?: 'sm' | 'md' }) {
  const parts = name.trim().split(' ');
  const initials = `${parts[0]?.[0] ?? ''}${parts[parts.length - 1]?.[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',
  ];
  const ci = (parts[0]?.charCodeAt(0) ?? 0) % colors.length;
  const sz = size === 'sm' ? 'h-8 w-8 text-[11px]' : 'h-9 w-9 text-xs';
  return (
    <span className={`inline-flex shrink-0 items-center justify-center rounded-full font-bold ${sz} ${colors[ci]}`}>
      {initials}
    </span>
  );
}

export default function TeacherReportCardsPage() {
  const { toast } = useToast();
  const [classrooms, setClassrooms] = useState<Classroom[]>([]);
  const [students, setStudents] = useState<Student[]>([]);
  const [cards, setCards] = useState<ReportCard[]>([]);
  const [loading, setLoading] = useState(false);

  const [selClassroom, setSelClassroom] = useState('');
  const [selDate, setSelDate] = useState(() => new Date().toISOString().split('T')[0]);
  const [search, setSearch] = useState('');
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [publishing, setPublishing] = useState(false);

  useEffect(() => {
    (async () => {
      const clsRes = await apiFetchJson<Classroom[]>('/v1/teacher/classrooms');
      if (!clsRes.error) {
        const cls = clsRes.data ?? [];
        setClassrooms(cls);
        if (cls.length > 0) setSelClassroom(cls[0].id);
      }
    })();
  }, []);

  useEffect(() => {
    if (!selClassroom) return;
    apiFetchJson<Student[]>(`/v1/admin/students?classroomId=${selClassroom}&limit=100`)
      .then((res) => { if (!res.error) setStudents(res.data ?? []); });
  }, [selClassroom]);

  const loadCards = useCallback(async () => {
    if (!selClassroom || !selDate) return;
    setLoading(true);
    const res = await apiFetchJson<ReportCard[]>(
      `/v1/teacher/report-cards?classroomId=${selClassroom}&date=${selDate}`,
    );
    setCards(Array.isArray(res.data) ? res.data : []);
    setLoading(false);
    setSelected(new Set());
  }, [selClassroom, selDate]);

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

  const handleBulkPublish = async () => {
    if (selected.size === 0) return;
    setPublishing(true);
    const res = await apiFetchJson('/v1/teacher/report-cards/bulk-publish', {
      method: 'PATCH',
      body: JSON.stringify({ ids: Array.from(selected) }),
    });
    setPublishing(false);
    if (res.error) { toast({ title: 'Hata', description: res.error, variant: 'destructive' }); return; }
    toast({ title: `${selected.size} karne velilere gönderildi` });
    setSelected(new Set());
    loadCards();
  };

  const toggleSelect = (id: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  const draftCards = cards.filter((c) => c.status === 'DRAFT');
  const allDraftSelected = draftCards.length > 0 && draftCards.every((c) => selected.has(c.id));

  const cardMap = new Map(cards.map((c) => [c.studentId, c]));
  const searchLower = search.toLowerCase();
  const displayStudents = students.filter(
    (s) =>
      !search ||
      s.firstName.toLowerCase().includes(searchLower) ||
      s.lastName.toLowerCase().includes(searchLower),
  );

  const publishedCount = cards.filter((c) => c.status === 'PUBLISHED').length;
  const draftCount = draftCards.length;
  const noCardCount = students.filter((s) => !cardMap.has(s.id)).length;
  const selectedClassroom = classrooms.find((c) => c.id === selClassroom);

  const newCardUrl = (student: Student) => {
    const name = encodeURIComponent(`${student.firstName} ${student.lastName}`);
    return `/teacher/report-cards/new?studentId=${student.id}&studentName=${name}&classroomId=${selClassroom}&date=${selDate}`;
  };

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

      {/* ── 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">
            Günlük Karne
          </p>
          <h1 className="mt-0.5 text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
            Karnelerim
          </h1>
        </div>

        {selected.size > 0 && (
          <button
            type="button"
            disabled={publishing}
            onClick={handleBulkPublish}
            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"
          >
            {publishing
              ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
              : <Send className="h-3.5 w-3.5" />}
            {selected.size} karneyi velilere gönder
          </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-wrap items-center gap-x-4 gap-y-3 p-4">

          {/* Sınıf */}
          <div className="flex items-center gap-2.5">
            <label htmlFor="rc-classroom" className="shrink-0 text-xs font-semibold text-zinc-500 dark:text-zinc-400">
              Sınıf
            </label>
            <select
              id="rc-classroom"
              value={selClassroom}
              onChange={(e) => setSelClassroom(e.target.value)}
              className="h-8 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 pr-7 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"
            >
              {classrooms.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.branch?.name ? `${c.branch.name} / ` : ''}{c.name}
                </option>
              ))}
            </select>
          </div>

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

          {/* Tarih */}
          <div className="flex items-center gap-2.5">
            <label htmlFor="rc-date" className="shrink-0 text-xs font-semibold text-zinc-500 dark:text-zinc-400">
              Tarih
            </label>
            <input
              id="rc-date"
              type="date"
              value={selDate}
              onChange={(e) => setSelDate(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" />

          {/* Arama */}
          <div className="relative flex items-center">
            <Search className="absolute left-2.5 h-3.5 w-3.5 text-zinc-400" />
            <input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Öğrenci ara…"
              className="h-8 w-44 rounded-lg border border-zinc-200 bg-zinc-50 pl-8 pr-3 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>

          {/* İ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 text-zinc-400 dark:text-zinc-500">
                  <Users className="h-3.5 w-3.5" />
                  {students.length}
                </span>
                {publishedCount > 0 && (
                  <span className="flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
                    <CheckCircle2 className="h-3 w-3" />
                    {publishedCount} yayınlı
                  </span>
                )}
                {draftCount > 0 && (
                  <span className="flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
                    <Clock className="h-3 w-3" />
                    {draftCount} taslak
                  </span>
                )}
                {noCardCount > 0 && (
                  <span className="rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-semibold text-red-600 dark:bg-red-900/30 dark:text-red-400">
                    {noCardCount} girilmedi
                  </span>
                )}
              </div>
            </>
          )}
        </div>
      </div>

      {/* ── Öğrenci Listesi ─────────────────────────────────── */}
      <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">

        {/* Tablo başlığı */}
        <div className="flex items-center gap-3 border-b border-zinc-100 px-5 py-3.5 dark:border-zinc-800">
          {draftCards.length > 0 && (
            <button
              type="button"
              onClick={() => allDraftSelected
                ? setSelected(new Set())
                : setSelected(new Set(draftCards.map((c) => c.id)))}
              className="text-zinc-300 transition hover:text-zinc-500 dark:text-zinc-600 dark:hover:text-zinc-400"
            >
              {allDraftSelected
                ? <CheckSquare className="h-4 w-4 text-primary dark:text-teal-400" />
                : <Square className="h-4 w-4" />}
            </button>
          )}
          <div>
            <span className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">
              {selectedClassroom?.name ?? 'Sınıf seçin'}
            </span>
            {selDate && (
              <span className="ml-2 text-xs text-zinc-400">
                {format(new Date(selDate + 'T12:00:00'), 'd MMMM yyyy, EEEE', { locale: tr })}
              </span>
            )}
          </div>
        </div>

        {/* İçerik */}
        {loading ? (
          <div className="space-y-2 p-4">
            {[1, 2, 3, 4].map((i) => (
              <div key={i} className="flex items-center gap-3 px-1 py-2">
                <div className="h-9 w-9 animate-pulse rounded-full bg-zinc-100 dark:bg-zinc-800" />
                <div className="flex-1 space-y-1.5">
                  <div className="h-3 w-36 animate-pulse rounded bg-zinc-100 dark:bg-zinc-800" />
                  <div className="h-2.5 w-20 animate-pulse rounded bg-zinc-100 dark:bg-zinc-800" />
                </div>
              </div>
            ))}
          </div>
        ) : displayStudents.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-16 text-center">
            <FileText className="mb-3 h-9 w-9 text-zinc-200 dark:text-zinc-700" strokeWidth={1.5} />
            <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">Öğrenci bulunamadı</p>
            <p className="mt-1 text-xs text-zinc-400 dark:text-zinc-500">
              {selClassroom ? 'Bu sınıfta aktif öğrenci yok' : 'Sınıf seçin'}
            </p>
          </div>
        ) : (
          <div className="divide-y divide-zinc-50 dark:divide-zinc-800/50">
            {displayStudents.map((student) => {
              const card = cardMap.get(student.id);
              const isPublished = card?.status === 'PUBLISHED';
              const isDraft = card?.status === 'DRAFT';
              const noCard = !card;

              return (
                <div
                  key={student.id}
                  className={`group flex items-center gap-3 px-5 py-3 transition-colors ${
                    noCard
                      ? 'bg-red-50/30 hover:bg-red-50/60 dark:bg-red-950/10 dark:hover:bg-red-950/20'
                      : 'hover:bg-zinc-50/80 dark:hover:bg-zinc-800/30'
                  }`}
                >
                  {/* Checkbox (sadece taslak karneler için) */}
                  <div className="w-5 shrink-0">
                    {isDraft ? (
                      <button type="button" onClick={() => toggleSelect(card.id)}>
                        {selected.has(card.id)
                          ? <CheckSquare className="h-4 w-4 text-primary dark:text-teal-400" />
                          : <Square className="h-4 w-4 text-zinc-300 dark:text-zinc-600" />}
                      </button>
                    ) : null}
                  </div>

                  {/* Avatar */}
                  <Avatar name={`${student.firstName} ${student.lastName}`} />

                  {/* İsim + detay */}
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-medium text-zinc-800 dark:text-zinc-100">
                      {student.firstName} {student.lastName}
                    </p>
                    {card && (
                      <p className="text-xs text-zinc-400 dark:text-zinc-500">{card.entryCount} alan dolduruldu</p>
                    )}
                  </div>

                  {/* Durum badge */}
                  {isPublished && (
                    <span className="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-[10px] font-semibold text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
                      <CheckCircle2 className="h-3 w-3" />
                      Gönderildi
                    </span>
                  )}
                  {isDraft && (
                    <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
                      <Clock className="h-3 w-3" />
                      Taslak
                    </span>
                  )}
                  {noCard && (
                    <span className="rounded-full bg-zinc-100 px-2.5 py-0.5 text-[10px] font-semibold text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
                      Girilmedi
                    </span>
                  )}

                  {/* Aksiyon butonu */}
                  {card ? (
                    <Link
                      href={`/teacher/report-cards/new?editId=${card.id}`}
                      className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-zinc-200 bg-white px-3 text-[11px] font-semibold text-zinc-600 shadow-sm transition hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700"
                    >
                      Düzenle
                    </Link>
                  ) : (
                    <Link
                      href={newCardUrl(student)}
                      className="inline-flex h-7 items-center gap-1.5 rounded-lg bg-primary px-3 text-[11px] font-semibold text-white shadow-sm transition hover:bg-[#1c5f66] dark:bg-teal-700 dark:hover:bg-teal-600"
                    >
                      <FilePlus2 className="h-3.5 w-3.5" />
                      Karne Oluştur
                    </Link>
                  )}
                </div>
              );
            })}
          </div>
        )}

        {/* Footer */}
        {!loading && displayStudents.length > 0 && (
          <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">
            <p className="text-xs text-zinc-400 dark:text-zinc-500">
              {displayStudents.length} öğrenci
            </p>
            {selected.size > 0 && (
              <button
                type="button"
                disabled={publishing}
                onClick={handleBulkPublish}
                className="inline-flex h-7 items-center gap-1.5 rounded-full bg-primary px-3.5 text-[11px] font-semibold text-white transition hover:bg-[#1c5f66] disabled:opacity-60 dark:bg-teal-600 dark:hover:bg-teal-500"
              >
                {publishing ? <Loader2 className="h-3 w-3 animate-spin" /> : <Send className="h-3 w-3" />}
                {selected.size} seçili · Velilere Gönder
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}