'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { format } from 'date-fns';
import { tr } from 'date-fns/locale';
import {
  Baby,
  Receipt,
  Bell,
  BookOpen,
  ImageIcon,
  ChevronRight,
  TrendingUp,
  Calendar,
  AlertCircle,
  CheckCircle2,
  Clock,
  Loader2,
  ArrowRight,
  Heart,
} from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';

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

type Child = {
  id: string;
  firstName?: string;
  lastName?: string;
  classroom?: { name?: string };
  birthDate?: string;
};

type Invoice = {
  id: string;
  amount: number;
  status: 'PENDING' | 'PAID' | 'OVERDUE' | 'CANCELLED';
  dueDate?: string;
  description?: string;
};

type Notification = {
  id: string;
  title: string;
  body?: string;
  isRead: boolean;
  createdAt: string;
};

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

function greeting() {
  const h = new Date().getHours();
  if (h < 12) return 'Günaydın';
  if (h < 18) return 'İyi günler';
  return 'İyi akşamlar';
}

function formatCurrency(amount: number) {
  return new Intl.NumberFormat('tr-TR', { style: 'currency', currency: 'TRY' }).format(amount);
}

function getChildInitials(child: Child) {
  const f = child.firstName?.[0] ?? '';
  const l = child.lastName?.[0] ?? '';
  return (f + l).toUpperCase() || '?';
}

const AVATAR_PALETTE = [
  'bg-violet-100 text-violet-700',
  'bg-sky-100 text-sky-700',
  'bg-teal-100 text-teal-700',
  'bg-amber-100 text-amber-700',
  'bg-rose-100 text-rose-700',
  'bg-indigo-100 text-indigo-700',
];

function ChildAvatar({ child, index, size = 'md' }: { child: Child; index: number; size?: 'sm' | 'md' | 'lg' }) {
  const color = AVATAR_PALETTE[index % AVATAR_PALETTE.length];
  const sizeClass = size === 'lg' ? 'h-14 w-14 text-base' : size === 'sm' ? 'h-8 w-8 text-[11px]' : 'h-11 w-11 text-sm';
  return (
    <span className={`inline-flex shrink-0 items-center justify-center rounded-2xl font-bold ${sizeClass} ${color}`}>
      {getChildInitials(child)}
    </span>
  );
}

// ─── Nav Items ────────────────────────────────────────────────

const NAV_ITEMS = [
  {
    href: '/parent/children',
    label: 'Çocuklarım',
    desc: 'Profil ve bilgiler',
    icon: Baby,
    accent: 'text-indigo-600',
    bg: 'bg-indigo-50',
    border: 'hover:border-indigo-200',
  },
  {
    href: '/parent/report-cards',
    label: 'Günlük Karne',
    desc: 'Yemek, uyku, notlar',
    icon: BookOpen,
    accent: 'text-violet-600',
    bg: 'bg-violet-50',
    border: 'hover:border-violet-200',
  },
  {
    href: '/parent/invoices',
    label: 'Faturalar',
    desc: 'Ödeme ve borç takibi',
    icon: Receipt,
    accent: 'text-amber-600',
    bg: 'bg-amber-50',
    border: 'hover:border-amber-200',
  },
  {
    href: '/parent/notifications',
    label: 'Bildirimler',
    desc: 'Okul duyuruları',
    icon: Bell,
    accent: 'text-sky-600',
    bg: 'bg-sky-50',
    border: 'hover:border-sky-200',
  },
  {
    href: '/parent/gallery',
    label: 'Galeri',
    desc: 'Fotoğraf ve etkinlikler',
    icon: ImageIcon,
    accent: 'text-rose-600',
    bg: 'bg-rose-50',
    border: 'hover:border-rose-200',
  },
] as const;

// ─── Invoice Status ───────────────────────────────────────────

function InvoiceStatusBadge({ status }: { status: Invoice['status'] }) {
  const map = {
    PENDING: { label: 'Bekliyor', cls: 'bg-amber-100 text-amber-700' },
    PAID: { label: 'Ödendi', cls: 'bg-emerald-100 text-emerald-700' },
    OVERDUE: { label: 'Gecikmiş', cls: 'bg-red-100 text-red-700' },
    CANCELLED: { label: 'İptal', cls: 'bg-zinc-100 text-zinc-500' },
  };
  const { label, cls } = map[status] ?? map.PENDING;
  return (
    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold ${cls}`}>
      {label}
    </span>
  );
}

// ─── Skeleton ────────────────────────────────────────────────

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

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

export default function ParentDashboardPage() {
  const [children, setChildren] = useState<Child[]>([]);
  const [invoices, setInvoices] = useState<Invoice[]>([]);
  const [notifications, setNotifications] = useState<Notification[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      setLoading(true);
      const [childrenRes, invoicesRes, notificationsRes] = await Promise.all([
        apiFetchJson<{ items?: Child[] } | Child[]>('/v1/parent/children'),
        apiFetchJson<{ items?: Invoice[] } | Invoice[]>('/v1/parent/invoices'),
        apiFetchJson<{ items?: Notification[] } | Notification[]>('/v1/parent/notifications'),
      ]);

      const childData = childrenRes.data;
      setChildren(Array.isArray(childData) ? childData : (childData as { items?: Child[] })?.items ?? []);

      const invData = invoicesRes.data;
      setInvoices(Array.isArray(invData) ? invData : (invData as { items?: Invoice[] })?.items ?? []);

      const notifData = notificationsRes.data;
      setNotifications(Array.isArray(notifData) ? notifData : (notifData as { items?: Notification[] })?.items ?? []);

      setLoading(false);
    })();
  }, []);

  const todayLabel = format(new Date(), 'd MMMM yyyy, EEEE', { locale: tr });

  const pendingInvoices = invoices.filter((i) => i.status === 'PENDING');
  const overdueInvoices = invoices.filter((i) => i.status === 'OVERDUE');
  const unreadNotifications = notifications.filter((n) => !n.isRead);
  const totalOwed = pendingInvoices.reduce((s, i) => s + (i.amount ?? 0), 0);

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

      {/* ─── Hero 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">
        {/* Decorative circles */}
        <div className="pointer-events-none absolute -right-10 -top-10 h-52 w-52 rounded-full bg-white/[0.06]" aria-hidden />
        <div className="pointer-events-none absolute -bottom-10 right-20 h-36 w-36 rounded-full bg-white/[0.04]" aria-hidden />
        <div className="pointer-events-none absolute right-48 -top-6 h-20 w-20 rounded-full bg-white/[0.05]" aria-hidden />

        <div className="relative flex flex-col gap-5 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">
              {greeting()}! 👋
            </h1>
            <div className="mt-1 flex items-center gap-2 text-sm text-indigo-100/80">
              <Calendar className="size-3.5 shrink-0" />
              <span className="capitalize">{todayLabel}</span>
            </div>
            {children.length > 0 && (
              <div className="mt-4 flex items-center gap-2">
                <Heart className="size-3.5 text-rose-300 fill-rose-300" />
                <span className="text-sm font-medium text-indigo-100">
                  {children.length === 1
                    ? `${children[0].firstName ?? 'Çocuğunuz'} büyüyor`
                    : `${children.length} çocuğunuz kayıtlı`}
                </span>
              </div>
            )}
          </div>

          {/* Stat badges */}
          <div className="flex shrink-0 flex-wrap gap-3 sm:flex-col sm:items-end">
            {overdueInvoices.length > 0 ? (
              <div className="flex items-center gap-2.5 rounded-2xl border border-red-400/30 bg-red-500/20 px-4 py-3 backdrop-blur-sm">
                <AlertCircle className="size-4 text-red-300" />
                <div>
                  <p className="text-[10px] font-semibold uppercase tracking-wide text-red-300">Gecikmiş Fatura</p>
                  <p className="text-base font-bold text-white">{overdueInvoices.length} adet</p>
                </div>
              </div>
            ) : unreadNotifications.length > 0 ? (
              <div className="flex items-center gap-2.5 rounded-2xl border border-white/15 bg-white/10 px-4 py-3 backdrop-blur-sm">
                <Bell className="size-4 text-indigo-200" />
                <div>
                  <p className="text-[10px] font-semibold uppercase tracking-wide text-indigo-200/70">Bildirim</p>
                  <p className="text-base font-bold text-white">{unreadNotifications.length} okunmadı</p>
                </div>
              </div>
            ) : (
              <div className="flex items-center gap-2.5 rounded-2xl border border-white/15 bg-white/10 px-4 py-3 backdrop-blur-sm">
                <CheckCircle2 className="size-4 text-emerald-300" />
                <div>
                  <p className="text-[10px] font-semibold uppercase tracking-wide text-indigo-200/70">Durum</p>
                  <p className="text-sm font-bold text-white">Her şey yolunda</p>
                </div>
              </div>
            )}
            {totalOwed > 0 && (
              <div className="flex items-center gap-2.5 rounded-2xl border border-amber-400/30 bg-amber-400/15 px-4 py-3 backdrop-blur-sm">
                <TrendingUp className="size-4 text-amber-300" />
                <div>
                  <p className="text-[10px] font-semibold uppercase tracking-wide text-amber-300/70">Bekleyen Ödeme</p>
                  <p className="text-base font-bold text-white">{formatCurrency(totalOwed)}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* ─── Children Cards ───────────────────────────────────── */}
      {loading ? (
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {[1, 2].map((i) => <Skeleton key={i} className="h-[88px]" />)}
        </div>
      ) : children.length > 0 ? (
        <div>
          <h2 className="mb-3 text-xs font-semibold uppercase tracking-[0.1em] text-zinc-400">
            Çocuklarım
          </h2>
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {children.map((child, idx) => (
              <Link
                key={child.id}
                href={`/parent/children`}
                className="group flex items-center gap-4 rounded-2xl border border-zinc-200/80 bg-white p-4 shadow-[0_1px_2px_rgba(15,23,42,0.05)] transition-all hover:border-indigo-200 hover:shadow-md"
              >
                <ChildAvatar child={child} index={idx} size="md" />
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm font-semibold text-zinc-900">
                    {[child.firstName, child.lastName].filter(Boolean).join(' ') || 'Çocuk'}
                  </p>
                  {child.classroom?.name && (
                    <p className="mt-0.5 truncate text-xs text-zinc-400">{child.classroom.name}</p>
                  )}
                </div>
                <ChevronRight className="size-4 shrink-0 text-zinc-300 transition-transform group-hover:translate-x-0.5 group-hover:text-zinc-500" />
              </Link>
            ))}
          </div>
        </div>
      ) : null}

      {/* ─── Quick Stats Row ──────────────────────────────────── */}
      <div className="grid gap-3 sm:grid-cols-3">
        {/* Çocuk sayısı */}
        <div className="flex items-start gap-4 rounded-2xl border border-zinc-200/80 bg-white p-5 shadow-[0_1px_2px_rgba(15,23,42,0.05)]">
          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-indigo-50">
            <Baby className="size-5 text-indigo-600" strokeWidth={1.8} />
          </div>
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.08em] text-zinc-400">Kayıtlı Çocuk</p>
            {loading ? (
              <Skeleton className="mt-2 h-7 w-12" />
            ) : (
              <p className="mt-1.5 text-2xl font-bold tabular-nums text-zinc-900">{children.length}</p>
            )}
            <p className="mt-0.5 text-xs text-zinc-400">aktif kayıt</p>
          </div>
        </div>

        {/* Bekleyen fatura */}
        <Link
          href="/parent/invoices"
          className="group flex items-start gap-4 rounded-2xl border border-zinc-200/80 bg-white p-5 shadow-[0_1px_2px_rgba(15,23,42,0.05)] transition-all hover:border-amber-200 hover:shadow-md"
        >
          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-amber-50">
            <Receipt className="size-5 text-amber-600" strokeWidth={1.8} />
          </div>
          <div className="min-w-0 flex-1">
            <p className="text-xs font-semibold uppercase tracking-[0.08em] text-zinc-400">Bekleyen Fatura</p>
            {loading ? (
              <Skeleton className="mt-2 h-7 w-12" />
            ) : (
              <p className="mt-1.5 text-2xl font-bold tabular-nums text-zinc-900">{pendingInvoices.length}</p>
            )}
            {overdueInvoices.length > 0 ? (
              <p className="mt-0.5 flex items-center gap-1 text-xs text-red-600">
                <span className="inline-block h-1.5 w-1.5 rounded-full bg-red-500" />
                {overdueInvoices.length} gecikmiş
              </p>
            ) : (
              <p className="mt-0.5 text-xs text-zinc-400">adet ödeme</p>
            )}
          </div>
          <ChevronRight className="size-4 mt-1 shrink-0 text-zinc-300 transition-transform group-hover:translate-x-0.5 group-hover:text-zinc-500" />
        </Link>

        {/* Bildirimler */}
        <Link
          href="/parent/notifications"
          className="group flex items-start gap-4 rounded-2xl border border-zinc-200/80 bg-white p-5 shadow-[0_1px_2px_rgba(15,23,42,0.05)] transition-all hover:border-sky-200 hover:shadow-md"
        >
          <div className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-sky-50">
            <Bell className="size-5 text-sky-600" strokeWidth={1.8} />
            {unreadNotifications.length > 0 && (
              <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-sky-600 text-[9px] font-bold text-white">
                {unreadNotifications.length > 9 ? '9+' : unreadNotifications.length}
              </span>
            )}
          </div>
          <div className="min-w-0 flex-1">
            <p className="text-xs font-semibold uppercase tracking-[0.08em] text-zinc-400">Bildirimler</p>
            {loading ? (
              <Skeleton className="mt-2 h-7 w-12" />
            ) : (
              <p className="mt-1.5 text-2xl font-bold tabular-nums text-zinc-900">{unreadNotifications.length}</p>
            )}
            <p className="mt-0.5 text-xs text-zinc-400">okunmamış</p>
          </div>
          <ChevronRight className="size-4 mt-1 shrink-0 text-zinc-300 transition-transform group-hover:translate-x-0.5 group-hover:text-zinc-500" />
        </Link>
      </div>

      {/* ─── Ana Menü ─────────────────────────────────────────── */}
      <div>
        <h2 className="mb-3 text-xs font-semibold uppercase tracking-[0.1em] text-zinc-400">
          Hızlı Erişim
        </h2>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {NAV_ITEMS.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`group flex items-center gap-4 rounded-2xl border border-zinc-200/80 bg-white p-5 shadow-[0_1px_2px_rgba(15,23,42,0.05)] transition-all hover:shadow-md ${item.border}`}
            >
              <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ${item.bg}`}>
                <item.icon className={`size-5 ${item.accent}`} strokeWidth={1.8} />
              </div>
              <div className="min-w-0 flex-1">
                <p className="text-sm font-semibold text-zinc-900">{item.label}</p>
                <p className="text-xs text-zinc-400">{item.desc}</p>
              </div>
              <ChevronRight className="size-4 shrink-0 text-zinc-300 transition-transform group-hover:translate-x-0.5" />
            </Link>
          ))}
        </div>
      </div>

      {/* ─── Alt Panel: Faturalar + Bildirimler ───────────────── */}
      <div className="grid gap-4 lg:grid-cols-2">

        {/* Son Faturalar */}
        <div className="rounded-2xl border border-zinc-200/80 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.05)]">
          <div className="flex items-center justify-between border-b border-zinc-100 px-5 py-3.5">
            <div className="flex items-center gap-2">
              <Receipt className="size-4 text-amber-500" />
              <h3 className="text-sm font-semibold text-zinc-800">Son Faturalar</h3>
            </div>
            <Link
              href="/parent/invoices"
              className="flex items-center gap-1 text-xs font-medium text-amber-600 hover:underline"
            >
              Tümü <ChevronRight className="size-3.5" />
            </Link>
          </div>

          {loading ? (
            <div className="flex items-center justify-center gap-2 py-12 text-sm text-zinc-400">
              <Loader2 className="size-4 animate-spin" /> Yükleniyor…
            </div>
          ) : invoices.length === 0 ? (
            <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
              <CheckCircle2 className="size-8 text-zinc-200" />
              <p className="text-sm text-zinc-400">Fatura bulunamadı.</p>
            </div>
          ) : (
            <ul className="divide-y divide-zinc-100">
              {invoices.slice(0, 4).map((inv) => (
                <li key={inv.id} className="flex items-center gap-3 px-5 py-3.5">
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-medium text-zinc-800">
                      {inv.description || 'Fatura'}
                    </p>
                    {inv.dueDate && (
                      <p className="mt-0.5 text-xs text-zinc-400">
                        <Clock className="inline size-3 mr-0.5 -mt-0.5" />
                        {format(new Date(inv.dueDate), 'd MMM yyyy', { locale: tr })}
                      </p>
                    )}
                  </div>
                  <div className="flex shrink-0 flex-col items-end gap-1.5">
                    <span className="text-sm font-bold tabular-nums text-zinc-900">
                      {formatCurrency(inv.amount)}
                    </span>
                    <InvoiceStatusBadge status={inv.status} />
                  </div>
                </li>
              ))}
            </ul>
          )}
          {invoices.length > 4 && (
            <div className="border-t border-zinc-100 px-5 py-3">
              <Link
                href="/parent/invoices"
                className="flex items-center justify-center gap-1.5 text-xs font-medium text-amber-600 hover:underline"
              >
                +{invoices.length - 4} fatura daha <ArrowRight className="size-3" />
              </Link>
            </div>
          )}
        </div>

        {/* Son Bildirimler */}
        <div className="rounded-2xl border border-zinc-200/80 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.05)]">
          <div className="flex items-center justify-between border-b border-zinc-100 px-5 py-3.5">
            <div className="flex items-center gap-2">
              <Bell className="size-4 text-sky-500" />
              <h3 className="text-sm font-semibold text-zinc-800">Son Bildirimler</h3>
              {unreadNotifications.length > 0 && (
                <span className="rounded-full bg-sky-100 px-2 py-0.5 text-[11px] font-bold text-sky-700">
                  {unreadNotifications.length}
                </span>
              )}
            </div>
            <Link
              href="/parent/notifications"
              className="flex items-center gap-1 text-xs font-medium text-sky-600 hover:underline"
            >
              Tümü <ChevronRight className="size-3.5" />
            </Link>
          </div>

          {loading ? (
            <div className="flex items-center justify-center gap-2 py-12 text-sm text-zinc-400">
              <Loader2 className="size-4 animate-spin" /> Yükleniyor…
            </div>
          ) : notifications.length === 0 ? (
            <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
              <Bell className="size-8 text-zinc-200" />
              <p className="text-sm text-zinc-400">Bildirim bulunamadı.</p>
            </div>
          ) : (
            <ul className="divide-y divide-zinc-100">
              {notifications.slice(0, 4).map((notif) => (
                <li key={notif.id} className={`flex items-start gap-3 px-5 py-3.5 ${!notif.isRead ? 'bg-sky-50/40' : ''}`}>
                  <div className={`mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full ${notif.isRead ? 'bg-zinc-100' : 'bg-sky-100'}`}>
                    <Bell className={`size-3.5 ${notif.isRead ? 'text-zinc-400' : 'text-sky-600'}`} />
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className={`truncate text-sm font-medium ${notif.isRead ? 'text-zinc-700' : 'text-zinc-900'}`}>
                      {notif.title}
                    </p>
                    {notif.body && (
                      <p className="mt-0.5 line-clamp-1 text-xs text-zinc-400">{notif.body}</p>
                    )}
                    <p className="mt-1 text-[10px] text-zinc-300">
                      {format(new Date(notif.createdAt), 'd MMM, HH:mm', { locale: tr })}
                    </p>
                  </div>
                  {!notif.isRead && (
                    <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-sky-500" />
                  )}
                </li>
              ))}
            </ul>
          )}
          {notifications.length > 4 && (
            <div className="border-t border-zinc-100 px-5 py-3">
              <Link
                href="/parent/notifications"
                className="flex items-center justify-center gap-1.5 text-xs font-medium text-sky-600 hover:underline"
              >
                +{notifications.length - 4} bildirim daha <ArrowRight className="size-3" />
              </Link>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}