'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { format, differenceInYears, parseISO } from 'date-fns';
import { tr } from 'date-fns/locale';
import {
  Baby,
  BookOpen,
  MapPin,
  Calendar,
  Heart,
  ShieldCheck,
  Users,
  ChevronRight,
  Loader2,
  AlertCircle,
  Star,
} from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';

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

type Child = {
  id: string;
  firstName?: string;
  lastName?: string;
  birthDate?: string;
  gender?: 'MALE' | 'FEMALE';
  bloodType?: string;
  allergies?: string;
  medicalNotes?: string;
  photoUrl?: string | null;
  classroomName?: string;
  branchName?: string;
  isPrimary?: boolean;
  canPickup?: boolean;
  enrolledAt?: string;
};

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

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

function getInitials(child: Child) {
  return ((child.firstName?.[0] ?? '') + (child.lastName?.[0] ?? '')).toUpperCase() || '?';
}

function getAge(birthDate?: string) {
  if (!birthDate) return null;
  try {
    return differenceInYears(new Date(), parseISO(birthDate));
  } catch {
    return null;
  }
}

function GenderBadge({ gender }: { gender?: 'MALE' | 'FEMALE' }) {
  if (!gender) return null;
  return (
    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold
      ${gender === 'FEMALE'
        ? 'bg-pink-100 text-pink-700'
        : 'bg-blue-100 text-blue-700'
      }`}
    >
      {gender === 'FEMALE' ? 'Kız' : 'Erkek'}
    </span>
  );
}

function InfoRow({ icon: Icon, label, value, accent = 'text-zinc-400' }: {
  icon: React.ElementType;
  label: string;
  value: string;
  accent?: string;
}) {
  return (
    <div className="flex items-start gap-3">
      <div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-zinc-50">
        <Icon className={`size-3.5 ${accent}`} strokeWidth={2} />
      </div>
      <div className="min-w-0">
        <p className="text-[11px] font-medium uppercase tracking-wide text-zinc-400">{label}</p>
        <p className="mt-0.5 text-sm font-medium text-zinc-800">{value}</p>
      </div>
    </div>
  );
}

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

// ─── Child Card ───────────────────────────────────────────────

function ChildCard({ child, index }: { child: Child; index: number }) {
  const palette = AVATAR_PALETTE[index % AVATAR_PALETTE.length];
  const age = getAge(child.birthDate);
  const fullName = [child.firstName, child.lastName].filter(Boolean).join(' ') || 'İsimsiz';

  return (
    <div className="overflow-hidden rounded-2xl border border-zinc-200/80 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.07)] transition-shadow hover:shadow-md">

      {/* Card top bar */}
      <div className={`h-1.5 w-full ${palette.accent}`} />

      <div className="p-5">
        {/* Header */}
        <div className="flex items-start gap-4">
          {/* Avatar */}
          <div className={`relative flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl ring-4 ${palette.bg} ${palette.text} ${palette.ring}`}>
            <span className="text-xl font-bold">{getInitials(child)}</span>
            {child.isPrimary && (
              <span className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-amber-400 shadow-sm">
                <Star className="size-2.5 fill-white text-white" />
              </span>
            )}
          </div>

          {/* Name & badges */}
          <div className="min-w-0 flex-1">
            <h3 className="truncate text-base font-bold text-zinc-900">{fullName}</h3>
            <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
              <GenderBadge gender={child.gender} />
              {age !== null && (
                <span className="inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-[11px] font-semibold text-zinc-600">
                  {age} yaş
                </span>
              )}
              {child.isPrimary && (
                <span className="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-0.5 text-[11px] font-semibold text-amber-700">
                  <Heart className="size-2.5 fill-amber-500 text-amber-500" />
                  Ana veli
                </span>
              )}
            </div>
          </div>
        </div>

        {/* Divider */}
        <div className="my-4 h-px bg-zinc-100" />

        {/* Info grid */}
        <div className="grid grid-cols-2 gap-3">
          {child.classroomName && (
            <InfoRow
              icon={BookOpen}
              label="Sınıf"
              value={child.classroomName}
              accent="text-indigo-500"
            />
          )}
          {child.branchName && (
            <InfoRow
              icon={MapPin}
              label="Şube"
              value={child.branchName}
              accent="text-sky-500"
            />
          )}
          {child.birthDate && (
            <InfoRow
              icon={Calendar}
              label="Doğum Tarihi"
              value={format(parseISO(child.birthDate), 'd MMM yyyy', { locale: tr })}
              accent="text-violet-500"
            />
          )}
          {child.bloodType && (
            <InfoRow
              icon={Heart}
              label="Kan Grubu"
              value={child.bloodType}
              accent="text-rose-500"
            />
          )}
          {child.enrolledAt && (
            <InfoRow
              icon={Users}
              label="Kayıt Tarihi"
              value={format(parseISO(child.enrolledAt), 'd MMM yyyy', { locale: tr })}
              accent="text-teal-500"
            />
          )}
          {child.canPickup !== undefined && (
            <InfoRow
              icon={ShieldCheck}
              label="Teslim Alabilir"
              value={child.canPickup ? 'Evet' : 'Hayır'}
              accent={child.canPickup ? 'text-emerald-500' : 'text-red-500'}
            />
          )}
        </div>

        {/* Allergies / Medical */}
        {(child.allergies || child.medicalNotes) && (
          <div className="mt-4 rounded-xl border border-amber-100 bg-amber-50/60 p-3.5">
            <p className="mb-1 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-amber-700">
              <AlertCircle className="size-3" />
              Sağlık Notları
            </p>
            {child.allergies && (
              <p className="text-xs text-amber-800">
                <span className="font-semibold">Alerji:</span> {child.allergies}
              </p>
            )}
            {child.medicalNotes && (
              <p className="mt-0.5 text-xs text-amber-800">
                <span className="font-semibold">Not:</span> {child.medicalNotes}
              </p>
            )}
          </div>
        )}

        {/* Footer actions */}
        <div className="mt-4 flex gap-2">
          <Link
            href="/parent/report-cards"
            className="flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-indigo-50 px-3 py-2 text-xs font-semibold text-indigo-700 transition-colors hover:bg-indigo-100"
          >
            <BookOpen className="size-3.5" />
            Günlük Karne
          </Link>
          <Link
            href="/parent/invoices"
            className="flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-zinc-50 px-3 py-2 text-xs font-semibold text-zinc-600 transition-colors hover:bg-zinc-100"
          >
            <ChevronRight className="size-3.5" />
            Faturalar
          </Link>
        </div>
      </div>
    </div>
  );
}

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

export default function ParentChildrenPage() {
  const [children, setChildren] = useState<Child[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    (async () => {
      setLoading(true);
      const res = await apiFetchJson<{ items?: Child[] } | Child[]>('/v1/parent/children');
      if (res.error) {
        setError(res.error);
      } else {
        const data = res.data;
        setChildren(Array.isArray(data) ? data : (data as { items?: Child[] })?.items ?? []);
      }
      setLoading(false);
    })();
  }, []);

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

      {/* ─── Header Banner ──────────────────────────────────── */}
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-indigo-600 via-indigo-700 to-violet-800 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">
          <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">Çocuklarım</h1>
          <p className="mt-1 text-sm text-indigo-100/70">
            Kayıtlı çocuklarınızın bilgileri ve okul durumu
          </p>

          {!loading && children.length > 0 && (
            <div className="mt-4 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-3.5 py-1.5 text-xs font-semibold backdrop-blur-sm">
              <Baby className="size-3.5 text-indigo-200" />
              <span>{children.length} çocuk kayıtlı</span>
            </div>
          )}
        </div>
      </div>

      {/* ─── Error ──────────────────────────────────────────── */}
      {error && (
        <div className="flex items-center gap-3 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          <AlertCircle className="size-4 shrink-0" />
          {error}
        </div>
      )}

      {/* ─── Loading ────────────────────────────────────────── */}
      {loading ? (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {[1, 2, 3].map((i) => <Skeleton key={i} className="h-72" />)}
        </div>
      ) : children.length === 0 ? (
        /* ─── Empty ─────────────────────────────────────────── */
        <div className="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-zinc-200 py-20 text-center">
          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-indigo-50">
            <Baby className="size-8 text-indigo-400" strokeWidth={1.5} />
          </div>
          <p className="mt-4 font-semibold text-zinc-600">Kayıtlı çocuk bulunamadı</p>
          <p className="mt-1 text-sm text-zinc-400">
            Yöneticinizle iletişime geçerek kayıt yaptırabilirsiniz.
          </p>
          <Link
            href="/parent/dashboard"
            className="mt-5 inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-indigo-700"
          >
            Panele dön
          </Link>
        </div>
      ) : (
        /* ─── Grid ──────────────────────────────────────────── */
        <>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            {children.map((child, idx) => (
              <ChildCard key={child.id} child={child} index={idx} />
            ))}
          </div>

          {/* Quick Links */}
          <div className="rounded-2xl border border-zinc-200/80 bg-white p-5 shadow-[0_1px_2px_rgba(15,23,42,0.05)]">
            <h2 className="mb-3 text-xs font-semibold uppercase tracking-wider text-zinc-400">
              Hızlı Erişim
            </h2>
            <div className="grid gap-3 sm:grid-cols-3">
              {[
                { href: '/parent/report-cards', icon: BookOpen, label: 'Günlük Karne', desc: 'Yemek, uyku, notlar', color: 'bg-violet-50 text-violet-600', border: 'hover:border-violet-200' },
                { href: '/parent/invoices', icon: Baby, label: 'Faturalar', desc: 'Aidat ve ödemeler', color: 'bg-amber-50 text-amber-600', border: 'hover:border-amber-200' },
                { href: '/parent/notifications', icon: Users, label: 'Bildirimler', desc: 'Okul duyuruları', color: 'bg-sky-50 text-sky-600', border: 'hover:border-sky-200' },
              ].map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`group flex items-center gap-3 rounded-xl border border-zinc-200/80 p-3.5 transition-all hover:shadow-sm ${item.border}`}
                >
                  <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${item.color}`}>
                    <item.icon className="size-4" strokeWidth={1.8} />
                  </div>
                  <div className="min-w-0">
                    <p className="text-sm font-semibold text-zinc-800">{item.label}</p>
                    <p className="text-xs text-zinc-400">{item.desc}</p>
                  </div>
                  <ChevronRight className="ml-auto size-4 shrink-0 text-zinc-300 transition-transform group-hover:translate-x-0.5" />
                </Link>
              ))}
            </div>
          </div>
        </>
      )}

      {/* ─── Loading indicator overlay ──────────────────────── */}
      {loading && (
        <div className="flex items-center justify-center gap-2 py-4 text-sm text-zinc-400">
          <Loader2 className="size-4 animate-spin" />
          Yükleniyor…
        </div>
      )}
    </div>
  );
}