'use client';

import { useEffect, useState } from 'react';
import { format, parseISO, isSameMonth } from 'date-fns';
import { tr } from 'date-fns/locale';
import { apiFetchJson } from '@/lib/auth';
import { useToast } from '@/components/school/toast-context';
import { CalendarDays, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';

type Classroom = {
  id: string;
  name: string;
  branch?: { name: string };
};

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

function getMonthRange(year: number, month: number) {
  // month: 0-indexed
  const from = `${year}-${String(month + 1).padStart(2, '0')}-01`;
  const lastDay = new Date(year, month + 1, 0).getDate();
  const to = `${year}-${String(month + 1).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
  return { from, to };
}

function formatDateRange(startsOn: string, endsOn: string) {
  const start = parseISO(startsOn);
  const end = parseISO(endsOn);
  if (startsOn === endsOn) {
    return format(start, 'd MMMM yyyy', { locale: tr });
  }
  if (isSameMonth(start, end)) {
    return `${format(start, 'd', { locale: tr })} – ${format(end, 'd MMMM yyyy', { locale: tr })}`;
  }
  return `${format(start, 'd MMM', { locale: tr })} – ${format(end, 'd MMM yyyy', { locale: tr })}`;
}

export default function TeacherActivitiesPage() {
  const { toast } = useToast();

  const now = new Date();
  const [year, setYear] = useState(now.getFullYear());
  const [month, setMonth] = useState(now.getMonth()); // 0-indexed

  const [classrooms, setClassrooms] = useState<Classroom[]>([]);
  const [selectedClassroomId, setSelectedClassroomId] = useState('');
  const [activities, setActivities] = useState<Activity[]>([]);
  const [loading, setLoading] = useState(false);

  // Öğretmenin sınıflarını yükle
  useEffect(() => {
    (async () => {
      const res = await apiFetchJson<Classroom[]>('/v1/teacher/attendance/my-classrooms');
      if (res.error) {
        toast({ title: 'Hata', description: res.error, variant: 'destructive' });
        return;
      }
      const data = res.data ?? [];
      setClassrooms(data);
      if (data[0]) setSelectedClassroomId(data[0].id);
    })();
  }, []);

  // Seçili sınıf veya ay değişince etkinlikleri yükle
  useEffect(() => {
    if (!selectedClassroomId) return;
    const { from, to } = getMonthRange(year, month);

    (async () => {
      setLoading(true);
      const params = new URLSearchParams({ classroomId: selectedClassroomId, from, to });
      const res = await apiFetchJson<Activity[]>(
        `/v1/teacher/attendance/classroom-activities?${params.toString()}`,
      );
      setLoading(false);
      if (res.error) {
        toast({ title: 'Hata', description: res.error, variant: 'destructive' });
        return;
      }
      setActivities(res.data ?? []);
    })();
  }, [selectedClassroomId, year, month]);

  const prevMonth = () => {
    if (month === 0) { setMonth(11); setYear((y) => y - 1); }
    else setMonth((m) => m - 1);
  };
  const nextMonth = () => {
    if (month === 11) { setMonth(0); setYear((y) => y + 1); }
    else setMonth((m) => m + 1);
  };

  const currentMonthLabel = format(new Date(year, month, 1), 'MMMM yyyy', { locale: tr });
  const selectedClassroom = classrooms.find((c) => c.id === selectedClassroomId);

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

      {/* ── Header ─────────────────────────────────────────── */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-widest text-primary dark:text-teal-400">
            Öğretmen Paneli
          </p>
          <h1 className="mt-0.5 text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
            Sınıf Etkinlikleri
          </h1>
        </div>
      </div>

      {/* ── Filtre Çubuğu ──────────────────────────────────── */}
      <div className="rounded-xl border border-zinc-200/90 bg-white shadow-theme-sm dark:border-zinc-800/90 dark:bg-zinc-900/40">
        <div className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:gap-4">

          {/* Sınıf seçimi */}
          {classrooms.length > 1 && (
            <>
              <div className="flex items-center gap-2.5">
                <label htmlFor="act-classroom" className="shrink-0 text-xs font-semibold text-zinc-500 dark:text-zinc-400">
                  Sınıf
                </label>
                <select
                  id="act-classroom"
                  value={selectedClassroomId}
                  onChange={(e) => setSelectedClassroomId(e.target.value)}
                  className="h-8 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 pr-8 text-sm text-zinc-900 focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
                >
                  {classrooms.map((c) => (
                    <option key={c.id} value={c.id}>
                      {c.name}
                    </option>
                  ))}
                </select>
              </div>
              <div className="hidden h-4 w-px bg-zinc-200 dark:bg-zinc-700 sm:block" />
            </>
          )}

          {/* Ay navigasyonu */}
          <div className="flex items-center gap-1">
            <button
              type="button"
              onClick={prevMonth}
              className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-zinc-500 transition hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700"
              aria-label="Önceki ay"
            >
              <ChevronLeft className="h-4 w-4" />
            </button>
            <span className="min-w-[130px] text-center text-sm font-semibold capitalize text-zinc-800 dark:text-zinc-100">
              {currentMonthLabel}
            </span>
            <button
              type="button"
              onClick={nextMonth}
              className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-zinc-500 transition hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700"
              aria-label="Sonraki ay"
            >
              <ChevronRight className="h-4 w-4" />
            </button>
          </div>
        </div>
      </div>

      {/* ── İçerik: Etkinlik Listesi ───────────────────────── */}
      {loading ? (
        <div className="flex items-center justify-center gap-2 py-20 text-sm text-zinc-400">
          <Loader2 className="h-4 w-4 animate-spin" />
          Yükleniyor…
        </div>
      ) : classrooms.length === 0 ? (
        <div className="rounded-xl border border-dashed border-zinc-200 py-20 text-center dark:border-zinc-700">
          <CalendarDays className="mx-auto mb-3 h-8 w-8 text-zinc-300 dark:text-zinc-600" />
          <p className="text-sm font-medium text-zinc-400 dark:text-zinc-500">Atandığınız bir sınıf bulunamadı.</p>
          <p className="mt-1 text-xs text-zinc-300 dark:text-zinc-600">Yöneticinizle iletişime geçin.</p>
        </div>
      ) : activities.length === 0 ? (
        <div className="rounded-xl border border-dashed border-zinc-200 py-20 text-center dark:border-zinc-700">
          <CalendarDays className="mx-auto mb-3 h-8 w-8 text-zinc-300 dark:text-zinc-600" />
          <p className="text-sm font-medium text-zinc-400 dark:text-zinc-500">
            {currentMonthLabel} için etkinlik bulunamadı.
          </p>
          {selectedClassroom && (
            <p className="mt-1 text-xs text-zinc-300 dark:text-zinc-600">
              {selectedClassroom.name} sınıfı
            </p>
          )}
        </div>
      ) : (
        <div className="overflow-hidden rounded-xl border border-zinc-200/90 bg-white shadow-theme-sm dark:border-zinc-800/90 dark:bg-zinc-900/40">
          {/* Liste başlığı */}
          <div className="flex items-center justify-between border-b border-zinc-100 px-5 py-3.5 dark:border-zinc-800">
            <div className="flex items-center gap-2">
              <CalendarDays className="h-4 w-4 text-zinc-400" />
              <span className="text-sm font-semibold text-zinc-800 dark:text-zinc-100 capitalize">
                {currentMonthLabel}
              </span>
              {selectedClassroom && (
                <span className="ml-1 rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] font-semibold text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
                  {selectedClassroom.name}
                </span>
              )}
            </div>
            <span className="text-xs text-zinc-400 dark:text-zinc-500">
              {activities.length} etkinlik
            </span>
          </div>

          {/* Etkinlik satırları */}
          <div className="divide-y divide-zinc-100 dark:divide-zinc-800/60">
            {activities.map((activity) => (
              <div key={activity.id} className="flex items-start gap-4 px-5 py-4">
                {/* Tarih rozeti */}
                <div className="shrink-0 text-center">
                  <div className="min-w-[48px] rounded-lg border border-zinc-200 bg-zinc-50 px-2 py-1.5 dark:border-zinc-700 dark:bg-zinc-800">
                    <p className="text-[10px] font-semibold uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
                      {format(parseISO(activity.startsOn), 'MMM', { locale: tr })}
                    </p>
                    <p className="text-lg font-bold leading-none text-zinc-800 dark:text-zinc-100">
                      {format(parseISO(activity.startsOn), 'd')}
                    </p>
                  </div>
                </div>

                {/* Açıklama */}
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-semibold text-zinc-800 dark:text-zinc-100">
                    {activity.title}
                  </p>
                  <p className="mt-0.5 text-xs text-zinc-400 dark:text-zinc-500">
                    {formatDateRange(activity.startsOn, activity.endsOn)}
                  </p>
                  {activity.description && (
                    <p className="mt-1.5 text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
                      {activity.description}
                    </p>
                  )}
                </div>

                {/* Çoklu sınıf varsa sınıf etiketi */}
                {classrooms.length > 1 && (
                  <span className="shrink-0 rounded-full bg-indigo-50 px-2.5 py-0.5 text-[11px] font-semibold text-indigo-600 dark:bg-indigo-950/40 dark:text-indigo-400">
                    {activity.classroom.name}
                  </span>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}