'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { format, parseISO, isToday, isTomorrow } from 'date-fns';
import { tr } from 'date-fns/locale';
import { apiFetchJson } from '@/lib/auth';
import {
  ClipboardList,
  BookOpen,
  CalendarDays,
  MessageSquare,
  Calendar,
  ChevronRight,
  UserCheck,
  UserX,
  Users,
  Clock,
  Loader2,
  CheckCircle2,
  AlertCircle,
  ImageIcon,
  ArrowRight,
} from 'lucide-react';

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

type Classroom = {
  id: string;
  name: string;
  branchName?: string;
  _count?: { students: number };
};

type AttendanceData = {
  studentId: string;
  status: 'PRESENT' | 'ABSENT' | 'LATE' | 'EXCUSED' | null;
};

type Activity = {
  id: string;
  title: string;
  startsOn: string;
  endsOn: string;
  description: string | null;
  classroom: { name: string };
};

type LeaveRequest = {
  id: string;
  status: 'PENDING' | 'APPROVED' | 'REJECTED';
};

type DashboardData = {
  classrooms: Classroom[];
  todayAttendance: AttendanceData[];
  upcomingActivities: Activity[];
  leaveRequests: LeaveRequest[];
};

// ─── 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 activityDateLabel(startsOn: string) {
  try {
    const d = parseISO(startsOn);
    if (isToday(d)) return { label: 'Bugün', color: 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/30' };
    if (isTomorrow(d)) return { label: 'Yarın', color: 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30' };
    return { label: format(d, 'd MMM', { locale: tr }), color: 'text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800' };
  } catch {
    return { label: startsOn, color: 'text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800' };
  }
}

function Avatar({ name }: { name: string }) {
  const parts = name.trim().split(' ');
  const initials = `${parts[0]?.[0] ?? ''}${parts[parts.length - 1]?.[0] ?? ''}`.toUpperCase();
  const palette = [
    'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300',
    'bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300',
    'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300',
    'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
    'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
    'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
  ];
  const ci = (parts[0]?.charCodeAt(0) ?? 0) % palette.length;
  return (
    <span className={`inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold ${palette[ci]}`}>
      {initials}
    </span>
  );
}

// ─── Nav Cards ────────────────────────────────────────────────

const NAV_ITEMS = [
  {
    href: '/teacher/attendance',
    label: 'Yoklama',
    desc: 'Günlük devam kaydı',
    icon: ClipboardList,
    accent: 'text-teal-600 dark:text-teal-400',
    bg: 'bg-teal-50 dark:bg-teal-950/30',
    border: 'hover:border-teal-200 dark:hover:border-teal-800',
  },
  {
    href: '/teacher/report-cards',
    label: 'Günlük Karne',
    desc: 'Yemek, uyku, not girişleri',
    icon: BookOpen,
    accent: 'text-violet-600 dark:text-violet-400',
    bg: 'bg-violet-50 dark:bg-violet-950/30',
    border: 'hover:border-violet-200 dark:hover:border-violet-800',
  },
  {
    href: '/teacher/activities',
    label: 'Etkinlikler',
    desc: 'Sınıf takvimi',
    icon: CalendarDays,
    accent: 'text-sky-600 dark:text-sky-400',
    bg: 'bg-sky-50 dark:bg-sky-950/30',
    border: 'hover:border-sky-200 dark:hover:border-sky-800',
  },
  {
    href: '/teacher/messages',
    label: 'Mesajlar',
    desc: 'Veli ve ekip iletişimi',
    icon: MessageSquare,
    accent: 'text-amber-600 dark:text-amber-400',
    bg: 'bg-amber-50 dark:bg-amber-950/30',
    border: 'hover:border-amber-200 dark:hover:border-amber-800',
  },
  {
    href: '/teacher/leave-requests',
    label: 'İzin Talepleri',
    desc: 'Talep oluştur ve takip et',
    icon: Calendar,
    accent: 'text-rose-600 dark:text-rose-400',
    bg: 'bg-rose-50 dark:bg-rose-950/30',
    border: 'hover:border-rose-200 dark:hover:border-rose-800',
  },
  {
    href: '/teacher/gallery',
    label: 'Galeri',
    desc: 'Fotoğraf ve medya',
    icon: ImageIcon,
    accent: 'text-indigo-600 dark:text-indigo-400',
    bg: 'bg-indigo-50 dark:bg-indigo-950/30',
    border: 'hover:border-indigo-200 dark:hover:border-indigo-800',
  },
];

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

export default function TeacherDashboardPage() {
  const [dashboard, setDashboard] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);
  const today = format(new Date(), 'yyyy-MM-dd');

  useEffect(() => {
    (async () => {
      setLoading(true);

      const [classroomsRes, leaveRes] = await Promise.all([
        apiFetchJson<Classroom[]>('/v1/teacher/attendance/my-classrooms'),
        apiFetchJson<LeaveRequest[]>('/v1/teacher/leave-requests'),
      ]);

      const classrooms: Classroom[] = Array.isArray(classroomsRes.data) ? classroomsRes.data : [];

      // İlk sınıfın bugünkü yoklamasını yükle
      let todayAttendance: AttendanceData[] = [];
      if (classrooms[0]) {
        const attRes = await apiFetchJson<AttendanceData[]>(
          `/v1/teacher/attendance?date=${today}&classroomId=${classrooms[0].id}`,
        );
        todayAttendance = Array.isArray(attRes.data) ? attRes.data : [];
      }

      // Bu ay ve önümüzdeki 2 haftanın etkinlikleri
      let upcomingActivities: Activity[] = [];
      if (classrooms[0]) {
        const from = today;
        const toDate = new Date();
        toDate.setDate(toDate.getDate() + 14);
        const to = format(toDate, 'yyyy-MM-dd');
        const actRes = await apiFetchJson<Activity[]>(
          `/v1/teacher/attendance/classroom-activities?classroomId=${classrooms[0].id}&from=${from}&to=${to}`,
        );
        upcomingActivities = Array.isArray(actRes.data) ? actRes.data.slice(0, 5) : [];
      }

      setDashboard({
        classrooms,
        todayAttendance,
        upcomingActivities,
        leaveRequests: Array.isArray(leaveRes.data) ? leaveRes.data : [],
      });
      setLoading(false);
    })();
  }, []);

  const firstClassroom = dashboard?.classrooms[0];
  const presentCount = dashboard?.todayAttendance.filter((a) => a.status === 'PRESENT').length ?? 0;
  const absentCount = dashboard?.todayAttendance.filter((a) => a.status === 'ABSENT').length ?? 0;
  const totalCount = dashboard?.todayAttendance.length ?? 0;
  const attendanceRate = totalCount > 0 ? Math.round((presentCount / totalCount) * 100) : null;
  const pendingLeave = dashboard?.leaveRequests.filter((r) => r.status === 'PENDING').length ?? 0;

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

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

      {/* ─── Hero / Greeting ─────────────────────────────────── */}
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-teal-600 to-teal-800 p-6 text-white shadow-lg dark:from-teal-700 dark:to-teal-900">
        {/* Decorative circles */}
        <div className="pointer-events-none absolute -right-8 -top-8 h-40 w-40 rounded-full bg-white/5" />
        <div className="pointer-events-none absolute -bottom-10 right-16 h-28 w-28 rounded-full bg-white/5" />

        <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-teal-200">
          Öğretmen Paneli
        </p>
        <h1 className="mt-1.5 text-2xl font-bold tracking-tight">
          {greeting()}, Öğretmenim 👋
        </h1>
        <p className="mt-1 text-sm capitalize text-teal-100/80">{todayLabel}</p>

        {firstClassroom && (
          <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-white/10 px-3.5 py-1.5 text-xs font-semibold text-white backdrop-blur-sm">
            <Users className="size-3.5" />
            {firstClassroom.name}
            {firstClassroom._count?.students !== undefined && (
              <span className="text-teal-200">· {firstClassroom._count.students} öğrenci</span>
            )}
          </div>
        )}
      </div>

      {/* ─── Hızlı İstatistikler ─────────────────────────────── */}
      {loading ? (
        <div className="grid gap-3 sm:grid-cols-3">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="h-24 animate-pulse rounded-2xl bg-zinc-100 dark:bg-zinc-800/60" />
          ))}
        </div>
      ) : (
        <div className="grid gap-3 sm:grid-cols-3">
          {/* Bugün Yoklama */}
          <Link
            href="/teacher/attendance"
            className="group 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-teal-200 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/60 dark:hover:border-teal-800"
          >
            <div className="flex items-start justify-between">
              <p className="text-xs font-semibold uppercase tracking-[0.08em] text-zinc-400 dark:text-zinc-500">
                Bugün Yoklama
              </p>
              <div className="rounded-xl bg-teal-50 p-2 dark:bg-teal-950/30">
                <ClipboardList className="size-4 text-teal-600 dark:text-teal-400" />
              </div>
            </div>
            {totalCount === 0 ? (
              <p className="mt-3 text-sm text-zinc-400 dark:text-zinc-500">Henüz kaydedilmedi</p>
            ) : (
              <>
                <div className="mt-3 flex items-end gap-2">
                  <span className="text-2xl font-bold tabular-nums text-teal-600 dark:text-teal-400">
                    {presentCount}
                  </span>
                  <span className="mb-0.5 text-sm text-zinc-400 dark:text-zinc-500">
                    / {totalCount} mevcut
                  </span>
                </div>
                {attendanceRate !== null && (
                  <div className="mt-2.5">
                    <div className="h-1.5 w-full overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
                      <div
                        className="h-full rounded-full bg-teal-500 transition-all duration-700"
                        style={{ width: `${attendanceRate}%` }}
                      />
                    </div>
                    <p className="mt-1 text-[11px] text-zinc-400 dark:text-zinc-500">%{attendanceRate} katılım</p>
                  </div>
                )}
              </>
            )}
          </Link>

          {/* Sınıf Durumu */}
          <div className="rounded-2xl border border-zinc-200/80 bg-white p-5 shadow-[0_1px_2px_rgba(15,23,42,0.05)] dark:border-zinc-800 dark:bg-zinc-900/60">
            <div className="flex items-start justify-between">
              <p className="text-xs font-semibold uppercase tracking-[0.08em] text-zinc-400 dark:text-zinc-500">
                Sınıf Durumu
              </p>
              <div className="rounded-xl bg-zinc-100 p-2 dark:bg-zinc-800">
                <Users className="size-4 text-zinc-500 dark:text-zinc-400" />
              </div>
            </div>
            <p className="mt-3 text-2xl font-bold tabular-nums text-zinc-900 dark:text-white">
              {dashboard?.classrooms.length ?? 0}
            </p>
            <p className="mt-0.5 text-sm text-zinc-400 dark:text-zinc-500">
              {dashboard?.classrooms.length === 1 ? 'atanmış sınıf' : 'atanmış sınıf'}
            </p>
            {totalCount > 0 && (
              <div className="mt-3 flex items-center gap-3 text-xs">
                <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
                  <UserCheck className="size-3.5" />
                  {presentCount} mevcut
                </span>
                {absentCount > 0 && (
                  <span className="flex items-center gap-1 text-red-500 dark:text-red-400">
                    <UserX className="size-3.5" />
                    {absentCount} yok
                  </span>
                )}
              </div>
            )}
          </div>

          {/* İzin Talepleri */}
          <Link
            href="/teacher/leave-requests"
            className="group 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-rose-200 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/60 dark:hover:border-rose-800"
          >
            <div className="flex items-start justify-between">
              <p className="text-xs font-semibold uppercase tracking-[0.08em] text-zinc-400 dark:text-zinc-500">
                İzin Taleplerim
              </p>
              <div className="rounded-xl bg-rose-50 p-2 dark:bg-rose-950/30">
                <Calendar className="size-4 text-rose-600 dark:text-rose-400" />
              </div>
            </div>
            <p className="mt-3 text-2xl font-bold tabular-nums text-zinc-900 dark:text-white">
              {dashboard?.leaveRequests.length ?? 0}
            </p>
            <p className="mt-0.5 flex items-center gap-1.5 text-sm text-zinc-400 dark:text-zinc-500">
              {pendingLeave > 0 ? (
                <>
                  <span className="inline-flex h-1.5 w-1.5 rounded-full bg-amber-400" />
                  {pendingLeave} beklemede
                </>
              ) : (
                <>
                  <CheckCircle2 className="size-3.5 text-emerald-500" />
                  Bekleyen yok
                </>
              )}
            </p>
          </Link>
        </div>
      )}

      {/* ─── Ana Menü Kartları ───────────────────────────────── */}
      <div>
        <h2 className="mb-3 text-xs font-semibold uppercase tracking-[0.1em] text-zinc-400 dark:text-zinc-500">
          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 dark:border-zinc-800 dark:bg-zinc-900/60 ${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 dark:text-white">{item.label}</p>
                <p className="text-xs text-zinc-400 dark:text-zinc-500">{item.desc}</p>
              </div>
              <ChevronRight className="size-4 shrink-0 text-zinc-300 transition-transform group-hover:translate-x-0.5 dark:text-zinc-600" />
            </Link>
          ))}
        </div>
      </div>

      {/* ─── Alt Panel: Yaklaşan Etkinlikler + Yoklama Özeti ─── */}
      <div className="grid gap-4 lg:grid-cols-2">

        {/* Yaklaşan Etkinlikler */}
        <div className="rounded-2xl border border-zinc-200/80 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.05)] dark:border-zinc-800 dark:bg-zinc-900/60">
          <div className="flex items-center justify-between border-b border-zinc-100 px-5 py-3.5 dark:border-zinc-800/80">
            <div className="flex items-center gap-2">
              <CalendarDays className="size-4 text-sky-500" />
              <h3 className="text-sm font-semibold text-zinc-800 dark:text-zinc-100">Yaklaşan Etkinlikler</h3>
            </div>
            <Link
              href="/teacher/activities"
              className="flex items-center gap-1 text-xs font-medium text-sky-600 hover:underline dark:text-sky-400"
            >
              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>
          ) : dashboard?.upcomingActivities.length === 0 ? (
            <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
              <CalendarDays className="size-8 text-zinc-200 dark:text-zinc-700" />
              <p className="text-sm text-zinc-400 dark:text-zinc-500">Önümüzdeki 14 günde etkinlik yok.</p>
            </div>
          ) : (
            <ul className="divide-y divide-zinc-100 dark:divide-zinc-800/60">
              {dashboard?.upcomingActivities.map((a) => {
                const { label, color } = activityDateLabel(a.startsOn);
                return (
                  <li key={a.id} className="flex items-start gap-3.5 px-5 py-3.5">
                    <div className="mt-0.5 min-w-[52px] text-center">
                      <span className={`inline-flex items-center rounded-lg px-2 py-1 text-[11px] font-bold ${color}`}>
                        {label}
                      </span>
                    </div>
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-sm font-medium text-zinc-800 dark:text-zinc-100">{a.title}</p>
                      {a.description && (
                        <p className="mt-0.5 truncate text-xs text-zinc-400 dark:text-zinc-500">{a.description}</p>
                      )}
                    </div>
                  </li>
                );
              })}
            </ul>
          )}
        </div>

        {/* Bugün Yoklama Detayı */}
        <div className="rounded-2xl border border-zinc-200/80 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.05)] dark:border-zinc-800 dark:bg-zinc-900/60">
          <div className="flex items-center justify-between border-b border-zinc-100 px-5 py-3.5 dark:border-zinc-800/80">
            <div className="flex items-center gap-2">
              <UserCheck className="size-4 text-teal-500" />
              <h3 className="text-sm font-semibold text-zinc-800 dark:text-zinc-100">
                Bugün Yoklama
                {firstClassroom && (
                  <span className="ml-1.5 rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] font-semibold text-zinc-400 dark:bg-zinc-800 dark:text-zinc-500">
                    {firstClassroom.name}
                  </span>
                )}
              </h3>
            </div>
            <Link
              href="/teacher/attendance"
              className="flex items-center gap-1 text-xs font-medium text-teal-600 hover:underline dark:text-teal-400"
            >
              Yoklamaya git <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>
          ) : dashboard?.classrooms.length === 0 ? (
            <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
              <AlertCircle className="size-8 text-zinc-200 dark:text-zinc-700" />
              <p className="text-sm text-zinc-400 dark:text-zinc-500">Atanmış sınıf bulunamadı.</p>
              <p className="text-xs text-zinc-300 dark:text-zinc-600">Yöneticinizle iletişime geçin.</p>
            </div>
          ) : totalCount === 0 ? (
            <div className="flex flex-col items-center justify-center gap-3 py-12 text-center">
              <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-teal-50 dark:bg-teal-950/30">
                <Clock className="size-6 text-teal-500" />
              </div>
              <div>
                <p className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Yoklama henüz alınmadı</p>
                <p className="mt-0.5 text-xs text-zinc-400 dark:text-zinc-500">
                  Bugünkü yoklamayı başlatmak için aşağıya tıklayın.
                </p>
              </div>
              <Link
                href="/teacher/attendance"
                className="inline-flex items-center gap-1.5 rounded-full bg-teal-600 px-4 py-2 text-xs font-semibold text-white transition hover:bg-teal-700 dark:bg-teal-600 dark:hover:bg-teal-500"
              >
                Yoklamayı Başlat <ArrowRight className="size-3.5" />
              </Link>
            </div>
          ) : (
            <>
              {/* Özet çubuğu */}
              <div className="flex items-center gap-6 border-b border-zinc-100 px-5 py-3 dark:border-zinc-800/60">
                <div className="flex items-center gap-1.5 text-sm">
                  <span className="h-2 w-2 rounded-full bg-emerald-500" />
                  <span className="font-semibold text-emerald-600 dark:text-emerald-400">{presentCount}</span>
                  <span className="text-zinc-400 dark:text-zinc-500">mevcut</span>
                </div>
                <div className="flex items-center gap-1.5 text-sm">
                  <span className="h-2 w-2 rounded-full bg-red-500" />
                  <span className="font-semibold text-red-500 dark:text-red-400">{absentCount}</span>
                  <span className="text-zinc-400 dark:text-zinc-500">yok</span>
                </div>
                {attendanceRate !== null && (
                  <span className="ml-auto text-xs font-semibold tabular-nums text-zinc-500 dark:text-zinc-400">
                    %{attendanceRate}
                  </span>
                )}
              </div>
              {/* İlk 6 öğrenci */}
              <ul className="divide-y divide-zinc-100 dark:divide-zinc-800/60">
                {dashboard?.todayAttendance.slice(0, 6).map((a) => {
                  const name = `Öğrenci`;
                  const isPresent = a.status === 'PRESENT';
                  return (
                    <li key={a.studentId} className="flex items-center gap-3 px-5 py-2.5">
                      <Avatar name={a.studentId.slice(0, 2)} />
                      <div className="flex-1 text-sm text-zinc-700 dark:text-zinc-300">
                        {name}
                      </div>
                      <span
                        className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-semibold ${
                          isPresent
                            ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400'
                            : 'bg-red-100 text-red-600 dark:bg-red-950/40 dark:text-red-400'
                        }`}
                      >
                        <span className={`h-1.5 w-1.5 rounded-full ${isPresent ? 'bg-emerald-500' : 'bg-red-500'}`} />
                        {isPresent ? 'Mevcut' : 'Gelmedi'}
                      </span>
                    </li>
                  );
                })}
              </ul>
              {totalCount > 6 && (
                <div className="border-t border-zinc-100 px-5 py-3 dark:border-zinc-800">
                  <Link
                    href="/teacher/attendance"
                    className="flex items-center justify-center gap-1.5 text-xs font-medium text-teal-600 hover:underline dark:text-teal-400"
                  >
                    +{totalCount - 6} öğrenci daha · Tümünü gör <ArrowRight className="size-3" />
                  </Link>
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
}