'use client';

import { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import {
  Users,
  UserCheck,
  UserX,
  FileText,
  AlertCircle,
  BookOpen,
  MapPin,
  GraduationCap,
  UserPlus,
  Receipt,
  Bell,
  TrendingUp,
  ChevronRight,
  Calendar,
  Activity,
} from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';
import { PageHeader } from '@/components/school/page-header';
import {
  OrderStatusCard,
  PastelStatCard,
  PastelStatGrid,
  TopSparklinesCard,
  type OrderStatusSlice,
  type SparkRow,
} from '@/components/dashboard/dashboard-overview-widgets';

type Overview = {
  activeStudents: number;
  attendanceToday: { present: number; absent: number; date: string };
  invoices: { pending: number; overdue: number };
  structure: { classrooms: number; branches: number; teachers: number };
};

type ActiveAcademic = {
  yearName: string | null;
  termName: string | null;
};

const QUICK_ACTIONS = [
  {
    href: '/school/students/new',
    title: 'Öğrenci Kaydı',
    desc: 'Yeni çocuk kaydı ve sınıf ataması',
    icon: UserPlus,
    color: 'bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300',
    border: 'hover:border-brand-200 dark:hover:border-brand-800',
  },
  {
    href: '/school/finance/invoices/new',
    title: 'Fatura Kes',
    desc: 'Tekil ödeme kalemi oluştur',
    icon: Receipt,
    color: 'bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
    border: 'hover:border-amber-200 dark:hover:border-amber-800',
  },
  {
    href: '/school/notifications',
    title: 'Veli Duyurusu',
    desc: 'Sınıf veya tüm velilere bildirim gönder',
    icon: Bell,
    color: 'bg-violet-50 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300',
    border: 'hover:border-violet-200 dark:hover:border-violet-800',
  },
  {
    href: '/school/attendance',
    title: 'Yoklama Al',
    desc: 'Günlük yoklama kaydını güncelle',
    icon: Activity,
    color: 'bg-sky-50 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300',
    border: 'hover:border-sky-200 dark:hover:border-sky-800',
  },
] as const;

function formatTurkishDate(dateStr?: string): string {
  try {
    const d = dateStr ? new Date(dateStr) : new Date();
    return d.toLocaleDateString('tr-TR', {
      weekday: 'long',
      day: 'numeric',
      month: 'long',
      year: 'numeric',
    });
  } catch {
    return '';
  }
}

export default function SchoolDashboardPage() {
  const [data, setData] = useState<Overview | null>(null);
  const [academic, setAcademic] = useState<ActiveAcademic>({ yearName: null, termName: null });
  const [error, setError] = useState('');

  useEffect(() => {
    (async () => {
      const [overviewRes, yearRes] = await Promise.all([
        apiFetchJson<Overview>('/v1/admin/school/overview'),
        apiFetchJson<Array<{ id: string; name: string; isActive: boolean; terms: Array<{ name: string; isActive: boolean }> }>>('/v1/admin/academic-years'),
      ]);
      if (overviewRes.error) setError(overviewRes.error);
      else setData(overviewRes.data as Overview);

      if (!yearRes.error && yearRes.data) {
        const activeYear = yearRes.data.find((y) => y.isActive);
        const activeTerm = activeYear?.terms.find((t) => t.isActive);
        setAcademic({
          yearName: activeYear?.name ?? null,
          termName: activeTerm?.name ?? null,
        });
      }
    })();
  }, []);

  const attendanceRate = useMemo(() => {
    if (!data) return null;
    const total = data.attendanceToday.present + data.attendanceToday.absent;
    if (total === 0) return null;
    return Math.round((data.attendanceToday.present / total) * 100);
  }, [data]);

  const orderPie: OrderStatusSlice[] = useMemo(() => {
    if (!data) return [];
    const p = data.attendanceToday.present;
    const a = data.attendanceToday.absent;
    const rest = Math.max(data.activeStudents - p - a, 0);
    return [
      { name: 'Bugün geldi', value: p, color: '#0d9388' },
      { name: 'Bugün gelmedi', value: a, color: '#f04438' },
      { name: 'Diğer kayıtlar', value: rest, color: '#a78bfa' },
    ];
  }, [data]);

  const sparkRows: SparkRow[] = useMemo(() => {
    const cls = data?.structure.classrooms;
    const br = data?.structure.branches;
    const tch = data?.structure.teachers;
    const st = data?.activeStudents;
    return [
      {
        id: 'c',
        flag: <span>🏫</span>,
        name: 'Sınıf kapasitesi',
        value: cls != null ? `${cls} sınıf` : '—',
        spark: [2, 3, 4, 4, 5, 6, 7],
        positive: true,
      },
      {
        id: 'b',
        flag: <span>📍</span>,
        name: 'Şubeler',
        value: br != null ? `${br} şube` : '—',
        spark: [5, 4, 5, 3, 4, 3, 2],
        positive: false,
      },
      {
        id: 't',
        flag: <span>👩‍🏫</span>,
        name: 'Öğretmenler',
        value: tch != null ? `${tch} kişi` : '—',
        spark: [3, 3, 4, 5, 5, 6, 6],
        positive: true,
      },
      {
        id: 's',
        flag: <span>👶</span>,
        name: 'Aktif öğrenci',
        value: st != null ? `${st}` : '—',
        spark: [4, 5, 4, 6, 7, 8, 9],
        positive: true,
      },
    ];
  }, [data]);

  const stats = useMemo(() => {
    const d = data;
    return [
      {
        label: 'Aktif öğrenci',
        value: d?.activeStudents ?? '—',
        href: '/school/students',
        trendPct: '+0.1%',
        trendUp: true,
        bgIndex: 0,
        icon: <Users size={18} strokeWidth={2} />,
      },
      {
        label: 'Bugün gelen',
        value: d ? d.attendanceToday.present : '—',
        href: '/school/attendance',
        trendPct: '+0.1%',
        trendUp: true,
        bgIndex: 1,
        icon: <UserCheck size={18} strokeWidth={2} />,
      },
      {
        label: 'Bugün gelmeyen',
        value: d ? d.attendanceToday.absent : '—',
        href: '/school/attendance',
        trendPct: '-0.1%',
        trendUp: false,
        bgIndex: 2,
        icon: <UserX size={18} strokeWidth={2} />,
      },
      {
        label: 'Bekleyen fatura',
        value: d?.invoices.pending ?? '—',
        href: '/school/finance',
        trendPct: '+0.1%',
        trendUp: true,
        bgIndex: 3,
        icon: <FileText size={18} strokeWidth={2} />,
      },
      {
        label: 'Vadesi geçmiş',
        value: d?.invoices.overdue ?? '—',
        href: '/school/finance',
        trendPct: '-0.1%',
        trendUp: false,
        bgIndex: 4,
        icon: <AlertCircle size={18} strokeWidth={2} />,
      },
      {
        label: 'Sınıf sayısı',
        value: d ? `${d.structure.classrooms}` : '—',
        href: '/school/classrooms',
        trendPct: '+0.1%',
        trendUp: true,
        bgIndex: 5,
        icon: <BookOpen size={18} strokeWidth={2} />,
      },
      {
        label: 'Şube sayısı',
        value: d ? `${d.structure.branches}` : '—',
        href: '/school/branches',
        trendPct: '+0.1%',
        trendUp: true,
        bgIndex: 6,
        icon: <MapPin size={18} strokeWidth={2} />,
      },
      {
        label: 'Öğretmen',
        value: d ? `${d.structure.teachers}` : '—',
        href: '/school/teachers',
        trendPct: '+0.1%',
        trendUp: true,
        bgIndex: 7,
        icon: <GraduationCap size={18} strokeWidth={2} />,
      },
    ];
  }, [data]);

  return (
    <div className="space-y-6 pb-8">
      <PageHeader
        eyebrow="School Panel"
        title="Okul Yönetim Paneli"
        description="Öğrenciler, operasyon ve finans metriklerinizi tek ekrandan takip edin."
      />

      {/* Welcome banner */}
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary-darker via-primary-dark to-brand-600 p-6 text-white shadow-md">
        {/* Decorative elements */}
        <div className="pointer-events-none absolute -right-12 -top-12 h-48 w-48 rounded-full bg-white/[0.06]" aria-hidden />
        <div className="pointer-events-none absolute -bottom-8 right-16 h-32 w-32 rounded-full bg-white/[0.04]" aria-hidden />

        <div className="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <div className="flex flex-wrap items-center gap-3 mb-1">
              <div className="flex items-center gap-2 text-white/60 text-sm">
                <Calendar size={14} strokeWidth={2} />
                <span>{formatTurkishDate(data?.attendanceToday.date)}</span>
              </div>
              {(academic.yearName || academic.termName) && (
                <div className="flex items-center gap-1.5 rounded-full bg-white/10 border border-white/15 px-2.5 py-0.5 text-xs font-medium text-white/80">
                  <GraduationCap size={11} strokeWidth={2.5} />
                  <span>
                    {academic.yearName ?? ''}
                    {academic.yearName && academic.termName ? ' · ' : ''}
                    {academic.termName ?? ''}
                  </span>
                </div>
              )}
            </div>
            <h2 className="font-urbanist text-xl font-bold text-white sm:text-2xl">
              Günaydın! Bugün her şey yolunda görünüyor.
            </h2>
            <p className="mt-1 text-sm text-white/65">
              Tüm metrikleri aşağıdan takip edebilir, hızlı işlemlerle zamanınızı verimli kullanabilirsiniz.
            </p>
          </div>

          {/* Attendance rate badge */}
          {attendanceRate !== null ? (
            <div className="shrink-0 flex flex-col items-center justify-center rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-sm border border-white/10 min-w-[100px]">
              <div className="flex items-center gap-1.5">
                <TrendingUp size={14} className="text-emerald-300" strokeWidth={2.5} />
                <span className="text-xs font-medium text-white/70">katılım oranı</span>
              </div>
              <span className="font-urbanist text-3xl font-bold text-white mt-1">{attendanceRate}%</span>
            </div>
          ) : (
            <div className="shrink-0 flex flex-col items-center justify-center rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-sm border border-white/10 min-w-[100px]">
              <span className="text-xs font-medium text-white/70">katılım oranı</span>
              <span className="font-urbanist text-3xl font-bold text-white mt-1">—</span>
            </div>
          )}
        </div>
      </div>

      {error ? (
        <p className="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-400">
          {error}
        </p>
      ) : null}

      {/* Stat cards */}
      <PastelStatGrid>
        {stats.map((s) => (
          <PastelStatCard
            key={s.label}
            label={s.label}
            value={s.value}
            href={s.href}
            trendPct={s.trendPct}
            trendUp={s.trendUp}
            bgIndex={s.bgIndex}
            icon={s.icon}
          />
        ))}
      </PastelStatGrid>

      {/* Charts row */}
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-5 lg:gap-5">
        <div className="lg:col-span-3">
          <OrderStatusCard
            title="Yoklama Özeti"
            subtitle={data ? `${formatTurkishDate(data.attendanceToday.date)}` : 'Bugünkü dağılım'}
            data={orderPie}
            totalLabel="öğrenci"
          />
        </div>
        <div className="lg:col-span-2">
          <TopSparklinesCard
            title="Yapı Özeti"
            subtitle={
              data
                ? `${data.activeStudents} kayıtlı öğrenci · ${data.structure.branches} şube`
                : 'Yükleniyor…'
            }
            rows={sparkRows}
          />
        </div>
      </div>

      {/* Quick actions */}
      <div>
        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-slate-400 dark:text-zinc-500">
          Hızlı İşlemler
        </h2>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          {QUICK_ACTIONS.map((x) => {
            const Icon = x.icon;
            return (
              <Link
                key={x.href}
                href={x.href}
                className="group flex items-start gap-4 rounded-2xl bg-white p-5 shadow-sm ring-1 ring-black/[0.04] transition-all duration-200 hover:shadow-md hover:ring-black/[0.08] dark:bg-zinc-900 dark:ring-white/10 dark:hover:ring-white/15"
              >
                <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${x.color}`}>
                  <Icon size={18} strokeWidth={2} />
                </div>
                <div className="min-w-0 flex-1">
                  <p className="font-semibold text-slate-900 dark:text-white text-sm">{x.title}</p>
                  <p className="mt-0.5 text-xs leading-snug text-slate-500 dark:text-zinc-400">{x.desc}</p>
                </div>
                <ChevronRight
                  size={16}
                  strokeWidth={2}
                  className="mt-0.5 shrink-0 text-slate-300 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-slate-500 dark:text-zinc-600 dark:group-hover:text-zinc-400"
                />
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
}