'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import { format, parseISO, isToday, isYesterday, differenceInCalendarDays } from 'date-fns';
import { tr } from 'date-fns/locale';
import {
  BookOpen,
  ChevronLeft,
  ChevronRight,
  CalendarDays,
  FileText,
  Loader2,
  Baby,
  Sparkles,
  ArrowLeft,
} from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';

// ─── Types ────────────────────────────────────────────────────

type ReportCardEntry = {
  categoryId: string;
  value: string;
  category: { id: string; name: string; icon: string };
};

type ReportCard = {
  id: string;
  studentId: string;
  date: string;
  status: 'DRAFT' | 'PUBLISHED';
  entries: ReportCardEntry[];
  student: { id: string; firstName: string; lastName: string; photoUrl?: string | null };
};

// ─── Helpers ─────────────────────────────────────────────────

function parseDateStr(dateStr: string): Date {
  try { return parseISO(dateStr); } catch { return new Date(dateStr); }
}

function toDateKey(dateStr: string): string {
  return parseDateStr(dateStr).toISOString().split('T')[0];
}

function humanDate(dateStr: string): string {
  try {
    const d = parseDateStr(dateStr);
    if (isToday(d)) return 'Bugün';
    if (isYesterday(d)) return 'Dün';
    const diff = differenceInCalendarDays(new Date(), d);
    if (diff < 7) return format(d, 'EEEE', { locale: tr });
    return format(d, 'd MMMM yyyy, EEEE', { locale: tr });
  } catch { return dateStr; }
}

const MONTH_NAMES = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran',
  'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'];
const DAY_NAMES = ['Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt', 'Paz'];

const AVATAR_PALETTE = [
  { bg: 'bg-violet-100', text: 'text-violet-700', accent: 'bg-violet-600', light: 'bg-violet-50', border: 'border-violet-200' },
  { bg: 'bg-sky-100', text: 'text-sky-700', accent: 'bg-sky-600', light: 'bg-sky-50', border: 'border-sky-200' },
  { bg: 'bg-teal-100', text: 'text-teal-700', accent: 'bg-teal-600', light: 'bg-teal-50', border: 'border-teal-200' },
  { bg: 'bg-amber-100', text: 'text-amber-700', accent: 'bg-amber-600', light: 'bg-amber-50', border: 'border-amber-200' },
  { bg: 'bg-rose-100', text: 'text-rose-700', accent: 'bg-rose-600', light: 'bg-rose-50', border: 'border-rose-200' },
  { bg: 'bg-indigo-100', text: 'text-indigo-700', accent: 'bg-indigo-600', light: 'bg-indigo-50', border: 'border-indigo-200' },
];

function getInitials(s: ReportCard['student']): string {
  return ((s.firstName?.[0] ?? '') + (s.lastName?.[0] ?? '')).toUpperCase() || '?';
}

function Skeleton({ className }: { className?: string }) {
  return <div className={`animate-pulse rounded-2xl bg-zinc-100 ${className}`} />;
}

// ─── Calendar ────────────────────────────────────────────────

function MiniCalendar({
  cardDates,
  calendarDate,
  selectedDate,
  onSelectDate,
  onPrevMonth,
  onNextMonth,
}: {
  cardDates: Set<string>;
  calendarDate: Date;
  selectedDate: string | null;
  onSelectDate: (d: string | null) => void;
  onPrevMonth: () => void;
  onNextMonth: () => void;
}) {
  const year = calendarDate.getFullYear();
  const month = calendarDate.getMonth();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const firstDow = (new Date(year, month, 1).getDay() + 6) % 7;

  const cells: Array<{ date: string; day: number } | null> = [];
  for (let i = 0; i < firstDow; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) {
    const m = String(month + 1).padStart(2, '0');
    const dd = String(d).padStart(2, '0');
    cells.push({ date: `${year}-${m}-${dd}`, day: d });
  }

  const todayKey = new Date().toISOString().split('T')[0];

  return (
    <div className="rounded-2xl border border-zinc-200/80 bg-white p-5 shadow-[0_1px_2px_rgba(15,23,42,0.05)]">
      {/* Nav */}
      <div className="mb-4 flex items-center justify-between">
        <button
          type="button"
          onClick={onPrevMonth}
          className="flex h-8 w-8 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600"
        >
          <ChevronLeft className="size-4" />
        </button>
        <p className="text-sm font-bold text-zinc-800">
          {MONTH_NAMES[month]} {year}
        </p>
        <button
          type="button"
          onClick={onNextMonth}
          className="flex h-8 w-8 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600"
        >
          <ChevronRight className="size-4" />
        </button>
      </div>

      {/* Day headers */}
      <div className="mb-1.5 grid grid-cols-7 gap-1">
        {DAY_NAMES.map((d) => (
          <div key={d} className="text-center text-[10px] font-semibold uppercase tracking-wider text-zinc-400">
            {d}
          </div>
        ))}
      </div>

      {/* Days */}
      <div className="grid grid-cols-7 gap-1">
        {cells.map((cell, i) => {
          if (!cell) return <div key={`e-${i}`} />;
          const hasCard = cardDates.has(cell.date);
          const isSelected = selectedDate === cell.date;
          const isTodayCell = cell.date === todayKey;

          return (
            <button
              key={cell.date}
              type="button"
              disabled={!hasCard}
              onClick={() => onSelectDate(isSelected ? null : cell.date)}
              className={`relative flex flex-col items-center justify-center rounded-xl py-2 text-sm font-medium transition-all
                ${isSelected
                  ? 'bg-indigo-600 text-white shadow-sm'
                  : hasCard
                    ? 'cursor-pointer bg-indigo-50 text-indigo-700 hover:bg-indigo-100'
                    : isTodayCell
                      ? 'bg-zinc-100 text-zinc-600'
                      : 'cursor-default text-zinc-300'
                }`}
            >
              {cell.day}
              {hasCard && (
                <span className={`mt-0.5 h-1 w-1 rounded-full ${isSelected ? 'bg-white/70' : 'bg-indigo-500'}`} />
              )}
            </button>
          );
        })}
      </div>

      {/* Legend */}
      <div className="mt-4 flex items-center gap-4 border-t border-zinc-100 pt-3 text-xs text-zinc-400">
        <span className="flex items-center gap-1.5">
          <span className="h-2 w-2 rounded-full bg-indigo-400" />
          Karne var
        </span>
        <span className="flex items-center gap-1.5">
          <span className="h-2 w-2 rounded-full bg-zinc-200" />
          Karne yok
        </span>
      </div>
    </div>
  );
}

// ─── Card Detail ──────────────────────────────────────────────

function ReportCardDetail({
  card,
  paletteIndex,
  onBack,
}: {
  card: ReportCard;
  paletteIndex: number;
  onBack: () => void;
}) {
  const palette = AVATAR_PALETTE[paletteIndex % AVATAR_PALETTE.length];
  const dateStr = toDateKey(card.date);

  return (
    <div className="overflow-hidden rounded-2xl border border-zinc-200/80 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.07)]">
      {/* Header */}
      <div className={`border-b ${palette.border} ${palette.light} px-5 py-4`}>
        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={onBack}
            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-white/70 text-zinc-500 shadow-sm transition-colors hover:bg-white hover:text-zinc-800"
          >
            <ArrowLeft className="size-4" />
          </button>
          <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl ${palette.bg}`}>
            <span className={`text-sm font-bold ${palette.text}`}>{getInitials(card.student)}</span>
          </div>
          <div className="min-w-0 flex-1">
            <p className={`font-bold ${palette.text}`}>
              {card.student.firstName} {card.student.lastName}
            </p>
            <p className="flex items-center gap-1 text-xs text-zinc-500">
              <CalendarDays className="size-3" />
              <span className="capitalize">{humanDate(card.date)}</span>
              <span className="text-zinc-300">·</span>
              <span>{format(parseDateStr(dateStr), 'd MMMM yyyy', { locale: tr })}</span>
            </p>
          </div>
          <div className="shrink-0 rounded-full bg-white/80 px-2.5 py-1 text-[11px] font-bold text-zinc-600 shadow-sm">
            {card.entries.length} kategori
          </div>
        </div>
      </div>

      {/* Entries */}
      {card.entries.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-center">
          <FileText className="size-8 text-zinc-200" />
          <p className="mt-3 text-sm text-zinc-400">Bu karnede giriş bulunamadı.</p>
        </div>
      ) : (
        <div className="divide-y divide-zinc-50">
          {card.entries.map((entry, idx) => (
            <div key={entry.categoryId} className="px-5 py-4">
              <div className="mb-2 flex items-center gap-2">
                <span className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-base leading-none
                  ${idx % 2 === 0 ? palette.light : 'bg-zinc-50'}`}
                >
                  {entry.category.icon}
                </span>
                <p className="text-[13px] font-semibold text-zinc-700">{entry.category.name}</p>
              </div>
              <p className="ml-9 whitespace-pre-wrap text-sm leading-relaxed text-zinc-600">
                {entry.value}
              </p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Card List Item ───────────────────────────────────────────

function CardListItem({
  card,
  paletteIndex,
  isSelected,
  onClick,
}: {
  card: ReportCard;
  paletteIndex: number;
  isSelected: boolean;
  onClick: () => void;
}) {
  const palette = AVATAR_PALETTE[paletteIndex % AVATAR_PALETTE.length];

  return (
    <button
      type="button"
      onClick={onClick}
      className={`w-full rounded-2xl border p-4 text-left transition-all hover:shadow-sm
        ${isSelected
          ? `${palette.border} ${palette.light} shadow-sm`
          : 'border-zinc-100 bg-white hover:border-zinc-200'
        }`}
    >
      <div className="flex items-center gap-3">
        <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${palette.bg}`}>
          <span className={`text-sm font-bold ${palette.text}`}>{getInitials(card.student)}</span>
        </div>
        <div className="min-w-0 flex-1">
          <p className="truncate text-sm font-semibold text-zinc-900">
            {card.student.firstName} {card.student.lastName}
          </p>
          <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-zinc-400">
            <CalendarDays className="size-3 shrink-0" />
            <span className="capitalize">{humanDate(card.date)}</span>
          </p>
        </div>
        <div className="flex shrink-0 flex-col items-end gap-1">
          <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[10px] font-semibold text-zinc-500">
            {card.entries.length} kategori
          </span>
          <ChevronRight className={`size-3.5 transition-transform ${isSelected ? `${palette.text} translate-x-0.5` : 'text-zinc-300'}`} />
        </div>
      </div>
    </button>
  );
}

// ─── Main Page ────────────────────────────────────────────────

export default function ParentReportCardsPage() {
  const [cards, setCards] = useState<ReportCard[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeStudentId, setActiveStudentId] = useState<string | null>(null);
  const [calendarDate, setCalendarDate] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState<string | null>(null);
  const [selectedCardId, setSelectedCardId] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    const res = await apiFetchJson<ReportCard[]>('/v1/parent/report-cards');
    const data = Array.isArray(res.data) ? res.data : [];
    setCards(data);
    if (data.length > 0) {
      setActiveStudentId((prev) => prev ?? data[0].studentId);
    }
    setLoading(false);
  }, []);

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

  // Benzersiz çocuklar (sıralı)
  const students = useMemo(() => {
    const map = new Map<string, ReportCard['student']>();
    for (const c of cards) {
      if (!map.has(c.studentId)) map.set(c.studentId, c.student);
    }
    return Array.from(map.values());
  }, [cards]);

  const studentIndex = useMemo(
    () => students.findIndex((s) => s.id === activeStudentId),
    [students, activeStudentId],
  );

  // Aktif çocuğun karteleri (en yeniden eskiye)
  const studentCards = useMemo(
    () => cards.filter((c) => c.studentId === activeStudentId),
    [cards, activeStudentId],
  );

  // Karne olan günler (takvim için)
  const cardDates = useMemo(
    () => new Set(studentCards.map((c) => toDateKey(c.date))),
    [studentCards],
  );

  // Seçilen tarihteki karne
  const dateCard = useMemo(
    () => selectedDate ? studentCards.find((c) => toDateKey(c.date) === selectedDate) ?? null : null,
    [studentCards, selectedDate],
  );

  // Seçilen ID'deki karne (liste tıklamasından)
  const idCard = useMemo(
    () => selectedCardId ? studentCards.find((c) => c.id === selectedCardId) ?? null : null,
    [studentCards, selectedCardId],
  );

  const activeCard = idCard ?? dateCard;

  const handleSelectDate = (d: string | null) => {
    setSelectedDate(d);
    setSelectedCardId(null);
  };

  const handleSelectCard = (card: ReportCard) => {
    const dk = toDateKey(card.date);
    setSelectedCardId(card.id);
    setSelectedDate(dk);
    setCalendarDate(new Date(parseDateStr(dk).getFullYear(), parseDateStr(dk).getMonth(), 1));
  };

  const handleBack = () => {
    setSelectedCardId(null);
    setSelectedDate(null);
  };

  const handleStudentSwitch = (id: string) => {
    setActiveStudentId(id);
    setSelectedDate(null);
    setSelectedCardId(null);
  };

  // ─── Loading ────────────────────────────────────────────────
  if (loading) {
    return (
      <div className="space-y-6 pb-8 font-urbanist">
        <Skeleton className="h-32" />
        <div className="grid gap-4 lg:grid-cols-[300px_1fr]">
          <Skeleton className="h-80" />
          <div className="space-y-3">
            {[1, 2, 3].map((i) => <Skeleton key={i} className="h-20" />)}
          </div>
        </div>
      </div>
    );
  }

  // ─── Empty ──────────────────────────────────────────────────
  if (students.length === 0) {
    return (
      <div className="space-y-6 pb-8 font-urbanist">
        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-600 via-indigo-600 to-indigo-700 p-6 text-white shadow-lg">
          <div className="pointer-events-none absolute -right-10 -top-10 h-48 w-48 rounded-full bg-white/[0.06]" />
          <p className="relative text-[11px] font-semibold uppercase tracking-[0.18em] text-indigo-200">Veli Paneli</p>
          <h1 className="relative mt-1.5 text-2xl font-bold tracking-tight">Günlük Karne</h1>
          <p className="relative mt-1 text-sm text-indigo-100/70">Yemek, uyku, ilaç ve öğretmen notları</p>
        </div>
        <div className="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-zinc-200 py-24 text-center">
          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-indigo-50">
            <BookOpen className="size-8 text-indigo-300" strokeWidth={1.5} />
          </div>
          <p className="mt-4 font-semibold text-zinc-600">Henüz karne yok</p>
          <p className="mt-1 text-sm text-zinc-400">Öğretmeniniz karne girdiğinde burada görünecek.</p>
        </div>
      </div>
    );
  }

  const activePalette = AVATAR_PALETTE[(studentIndex >= 0 ? studentIndex : 0) % AVATAR_PALETTE.length];

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

      {/* ─── Hero Banner ────────────────────────────────────── */}
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-600 via-indigo-600 to-indigo-700 p-6 text-white shadow-lg">
        <div className="pointer-events-none absolute -right-10 -top-10 h-48 w-48 rounded-full bg-white/[0.06]" />
        <div className="pointer-events-none absolute -bottom-8 right-20 h-32 w-32 rounded-full bg-white/[0.04]" />

        <div className="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-indigo-200">Veli Paneli</p>
            <h1 className="mt-1.5 text-2xl font-bold tracking-tight">Günlük Karne</h1>
            <p className="mt-1 text-sm text-indigo-100/70">Yemek, uyku, ilaç ve öğretmen notları</p>
          </div>
          <div className="flex shrink-0 items-center gap-2.5 rounded-2xl border border-white/15 bg-white/10 px-4 py-3 backdrop-blur-sm">
            <Sparkles className="size-4 text-indigo-200" />
            <div>
              <p className="text-[10px] font-semibold uppercase tracking-wide text-indigo-200/70">Toplam Karne</p>
              <p className="text-base font-bold">{studentCards.length} kayıt</p>
            </div>
          </div>
        </div>
      </div>

      {/* ─── Çocuk Sekmeleri ────────────────────────────────── */}
      {students.length > 1 && (
        <div className="flex gap-2 overflow-x-auto pb-1">
          {students.map((s, idx) => {
            const p = AVATAR_PALETTE[idx % AVATAR_PALETTE.length];
            const isActive = activeStudentId === s.id;
            return (
              <button
                key={s.id}
                type="button"
                onClick={() => handleStudentSwitch(s.id)}
                className={`flex shrink-0 items-center gap-2.5 rounded-xl px-4 py-2.5 text-sm font-semibold transition-all
                  ${isActive
                    ? `${p.accent} text-white shadow-sm`
                    : 'bg-white text-zinc-500 ring-1 ring-zinc-200 hover:bg-zinc-50'
                  }`}
              >
                <span className={`flex h-6 w-6 items-center justify-center rounded-full text-[11px] font-bold
                  ${isActive ? 'bg-white/20 text-white' : `${p.bg} ${p.text}`}`}>
                  {s.firstName[0]}
                </span>
                {s.firstName} {s.lastName}
              </button>
            );
          })}
        </div>
      )}

      {/* ─── Main Layout ────────────────────────────────────── */}
      <div className="grid gap-5 lg:grid-cols-[300px_1fr]">

        {/* Sol: Takvim + Son Karneler */}
        <div className="space-y-4">
          <MiniCalendar
            cardDates={cardDates}
            calendarDate={calendarDate}
            selectedDate={selectedDate}
            onSelectDate={handleSelectDate}
            onPrevMonth={() => setCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1))}
            onNextMonth={() => setCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1))}
          />

          {/* Son karneler listesi */}
          {studentCards.length > 0 && (
            <div className="rounded-2xl border border-zinc-200/80 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.05)]">
              <div className="border-b border-zinc-100 px-4 py-3">
                <p className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Son Karneler</p>
              </div>
              <div className="divide-y divide-zinc-50 p-2">
                {studentCards.slice(0, 8).map((card) => (
                  <div key={card.id} className="pb-1 last:pb-0 pt-1 first:pt-0">
                    <CardListItem
                      card={card}
                      paletteIndex={studentIndex >= 0 ? studentIndex : 0}
                      isSelected={activeCard?.id === card.id}
                      onClick={() => handleSelectCard(card)}
                    />
                  </div>
                ))}
              </div>
              {studentCards.length > 8 && (
                <div className="border-t border-zinc-100 px-4 py-3 text-center">
                  <p className="text-xs text-zinc-400">+{studentCards.length - 8} karne daha</p>
                </div>
              )}
            </div>
          )}
        </div>

        {/* Sağ: Karne Detayı */}
        <div>
          {activeCard ? (
            <ReportCardDetail
              card={activeCard}
              paletteIndex={studentIndex >= 0 ? studentIndex : 0}
              onBack={handleBack}
            />
          ) : (
            <div className={`flex h-full min-h-[320px] flex-col items-center justify-center rounded-2xl border-2 border-dashed px-8 py-16 text-center transition-colors
              ${selectedDate
                ? 'border-zinc-200 bg-zinc-50/50'
                : `${activePalette.border} ${activePalette.light}/30`
              }`}
            >
              {selectedDate ? (
                <>
                  <FileText className="size-10 text-zinc-300" strokeWidth={1.5} />
                  <p className="mt-4 font-semibold text-zinc-500">Bu güne ait karne bulunamadı</p>
                  <button
                    type="button"
                    onClick={() => setSelectedDate(null)}
                    className="mt-3 text-xs font-medium text-indigo-600 hover:underline"
                  >
                    Seçimi temizle
                  </button>
                </>
              ) : (
                <>
                  <div className={`mb-4 flex h-16 w-16 items-center justify-center rounded-2xl ${activePalette.bg}`}>
                    <Baby className={`size-8 ${activePalette.text}`} strokeWidth={1.5} />
                  </div>
                  <p className={`font-semibold ${activePalette.text}`}>Karne seçin</p>
                  <p className="mt-1 max-w-[220px] text-sm text-zinc-400">
                    Soldan bir karne seçin veya{' '}
                    <span className={`font-medium ${activePalette.text}`}>takvimde mavi</span>{' '}
                    günlere tıklayın
                  </p>
                </>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}