'use client';

import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import {
  FileText, Plus, Settings2, BookOpen, CalendarDays,
  CheckCircle2, Clock, Users, Search, CheckSquare, Square,
} from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';
import { PageHeader } from '@/components/school/page-header';
import { useToast } from '@/components/school/toast-context';
import { Button } from '@/components/ui/button';

type Branch = { id: string; name: string };
type Classroom = { id: string; name: string; branchId: string; branchName?: string };
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; photoUrl?: string | null };
  classroom?: { id: string; name: string } | null;
};

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

  const [selBranch, setSelBranch] = useState('');
  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(() => {
    const load = async () => {
      const [bRes, cRes, sRes] = await Promise.all([
        apiFetchJson<Branch[]>('/v1/admin/branches?limit=100'),
        apiFetchJson<Classroom[]>('/v1/admin/classrooms?limit=500'),
        apiFetchJson<Student[]>('/v1/admin/students?limit=500'),
      ]);
      setBranches(Array.isArray(bRes.data) ? bRes.data : []);
      setClassrooms(Array.isArray(cRes.data) ? cRes.data : []);
      setStudents(Array.isArray(sRes.data) ? sRes.data : []);
    };
    load();
  }, []);

  const filteredClassrooms = selBranch
    ? classrooms.filter((c) => c.branchId === selBranch)
    : classrooms;

  const classroomStudents = selClassroom
    ? students.filter((s) => s.classroomId === selClassroom)
    : [];

  const loadCards = useCallback(async () => {
    if (!selClassroom || !selDate) return;
    setLoading(true);
    const res = await apiFetchJson<ReportCard[]>(
      `/v1/admin/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/admin/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 toggleAll = () => {
    if (allDraftSelected) {
      setSelected(new Set());
    } else {
      setSelected(new Set(draftCards.map((c) => c.id)));
    }
  };

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

  return (
    <div className="space-y-6 pb-8">
      <PageHeader
        eyebrow="Günlük Karne"
        title="Karne Yönetimi"
        description="Sınıf ve tarihe göre günlük karneleri görüntüleyin, yayınlayın."
        actions={
          <div className="flex items-center gap-2">
            <Link href="/school/report-cards/categories">
              <Button type="button" variant="secondary" className="gap-1.5">
                <Settings2 size={14} strokeWidth={2} />
                Kategoriler
              </Button>
            </Link>
            {selClassroom && selDate && (
              <Link href={`/school/report-cards/new?classroomId=${selClassroom}&date=${selDate}`}>
                <Button type="button" className="gap-1.5">
                  <Plus size={14} strokeWidth={2.5} />
                  Karne Gir
                </Button>
              </Link>
            )}
          </div>
        }
      />

      {/* Filtreler */}
      <div className="admin-panel p-4">
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-4">
          <div className="space-y-1">
            <label className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">Şube</label>
            <select
              value={selBranch}
              onChange={(e) => { setSelBranch(e.target.value); setSelClassroom(''); }}
              className="flex h-9 w-full rounded-lg border border-zinc-200 bg-white px-3 text-sm text-zinc-900 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"
            >
              <option value="">Tüm şubeler</option>
              {branches.map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}
            </select>
          </div>
          <div className="space-y-1">
            <label className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">Sınıf</label>
            <select
              value={selClassroom}
              onChange={(e) => setSelClassroom(e.target.value)}
              className="flex h-9 w-full rounded-lg border border-zinc-200 bg-white px-3 text-sm text-zinc-900 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"
            >
              <option value="">Sınıf seçin</option>
              {filteredClassrooms.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </div>
          <div className="space-y-1">
            <label className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">Tarih</label>
            <input
              type="date"
              value={selDate}
              onChange={(e) => setSelDate(e.target.value)}
              className="flex h-9 w-full rounded-lg border border-zinc-200 bg-white px-3 text-sm text-zinc-900 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"
            />
          </div>
          <div className="space-y-1">
            <label className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">Ara</label>
            <div className="relative">
              <Search size={13} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
              <input
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Öğrenci ara…"
                className="flex h-9 w-full rounded-lg border border-zinc-200 bg-white pl-8 pr-3 text-sm text-zinc-900 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"
              />
            </div>
          </div>
        </div>
      </div>

      {!selClassroom ? (
        <div className="flex h-64 flex-col items-center justify-center rounded-2xl border-2 border-dashed border-zinc-200 text-center dark:border-zinc-700">
          <Users size={36} strokeWidth={1.5} className="mb-3 text-zinc-300" />
          <p className="font-semibold text-zinc-500">Sınıf seçin</p>
          <p className="mt-1 text-sm text-zinc-400">Sınıf ve tarih seçerek karne durumunu görüntüleyin</p>
        </div>
      ) : (
        <div className="admin-panel overflow-hidden">
          {/* Tablo başlık */}
          <div className="flex items-center justify-between border-b border-zinc-100 px-5 py-3 dark:border-zinc-800">
            <div className="flex items-center gap-3">
              <button type="button" onClick={toggleAll} className="text-zinc-400 hover:text-zinc-600">
                {allDraftSelected ? <CheckSquare size={16} strokeWidth={2} className="text-brand-500" /> : <Square size={16} strokeWidth={2} />}
              </button>
              <span className="text-[13px] font-semibold text-zinc-700 dark:text-zinc-300">
                {displayStudents.length} öğrenci
              </span>
              <span className="rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-semibold text-green-700 dark:bg-green-900/30 dark:text-green-400">
                {cards.filter((c) => c.status === 'PUBLISHED').length} yayınlı
              </span>
              <span className="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">
                {cards.filter((c) => c.status === 'DRAFT').length} taslak
              </span>
            </div>
            {selected.size > 0 && (
              <Button type="button" size="sm" disabled={publishing} onClick={handleBulkPublish} className="gap-1.5">
                <CheckCircle2 size={13} strokeWidth={2} />
                {selected.size} karneyi yayınla
              </Button>
            )}
          </div>

          {loading ? (
            <div className="space-y-2 p-4">
              {[1, 2, 3].map((i) => <div key={i} className="h-12 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" />)}
            </div>
          ) : displayStudents.length === 0 ? (
            <div className="py-12 text-center">
              <p className="text-sm text-zinc-400">Bu sınıfta öğrenci bulunamadı</p>
            </div>
          ) : (
            <div className="divide-y divide-zinc-50 dark:divide-zinc-800/50">
              {displayStudents.map((student) => {
                const card = cardMap.get(student.id);
                const isDraft = card?.status === 'DRAFT';
                const isPublished = card?.status === 'PUBLISHED';
                const noCard = !card;

                return (
                  <div
                    key={student.id}
                    className={`flex items-center gap-3 px-5 py-3 transition-colors ${
                      noCard ? 'bg-red-50/40 dark:bg-red-950/10' : ''
                    }`}
                  >
                    {isDraft ? (
                      <button type="button" onClick={() => toggleSelect(card.id)}>
                        {selected.has(card.id)
                          ? <CheckSquare size={15} strokeWidth={2} className="text-brand-500" />
                          : <Square size={15} strokeWidth={2} className="text-zinc-300" />}
                      </button>
                    ) : (
                      <div className="w-[15px]" />
                    )}

                    {/* Avatar */}
                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-100 text-[13px] font-bold text-brand-700 dark:bg-brand-900/40 dark:text-brand-300">
                      {student.firstName[0]}{student.lastName[0]}
                    </div>

                    <div className="min-w-0 flex-1">
                      <span className="text-sm font-medium text-zinc-800 dark:text-zinc-200">
                        {student.firstName} {student.lastName}
                      </span>
                    </div>

                    {/* Alan sayısı */}
                    {card && (
                      <span className="text-xs text-zinc-400">
                        {card.entryCount} alan
                      </span>
                    )}

                    {/* Durum */}
                    {isPublished && (
                      <span className="flex items-center gap-1 rounded-full bg-green-100 px-2.5 py-0.5 text-[11px] font-semibold text-green-700 dark:bg-green-900/30 dark:text-green-400">
                        <CheckCircle2 size={10} strokeWidth={2.5} />
                        Yayınlandı
                      </span>
                    )}
                    {isDraft && (
                      <span className="flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-0.5 text-[11px] font-semibold text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
                        <Clock size={10} strokeWidth={2.5} />
                        Taslak
                      </span>
                    )}
                    {noCard && (
                      <span className="rounded-full bg-red-100 px-2.5 py-0.5 text-[11px] font-semibold text-red-600 dark:bg-red-900/30 dark:text-red-400">
                        Karne yok
                      </span>
                    )}

                    {/* Aksiyon */}
                    {card ? (
                      <Link
                        href={`/school/report-cards/new?editId=${card.id}`}
                        className="rounded-lg px-2.5 py-1.5 text-[12px] font-medium text-brand-600 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-950/30"
                      >
                        Düzenle
                      </Link>
                    ) : (
                      <Link
                        href={`/school/report-cards/new?studentId=${student.id}&classroomId=${selClassroom}&date=${selDate}`}
                        className="rounded-lg px-2.5 py-1.5 text-[12px] font-medium text-brand-600 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-950/30"
                      >
                        Gir
                      </Link>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}
    </div>
  );
}