"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { PersianDatePicker } from "@/components/ui/PersianDatePicker";
import { SubjectAvatar } from "@/components/ui/SubjectAvatar";
import { SessionQuickModal, type TodayScheduleItem } from "@/components/teacher/SessionQuickModal";
import { TeacherEmptyState } from "@/components/teacher/ui/TeacherEmptyState";
import { TeacherPanel } from "@/components/teacher/ui/TeacherPanel";
import { ApiError, apiGet } from "@/lib/api";

interface TodayScheduleResponse {
  date: string;
  day_name: string;
  items: TodayScheduleItem[];
  total: number;
}

type SlotStatus = "past" | "current" | "future" | "neutral";

function todayIso() {
  return new Date().toISOString().slice(0, 10);
}

function getSlotStatus(item: TodayScheduleItem, selectedDate: string): SlotStatus {
  if (selectedDate !== todayIso()) return "neutral";
  const now = new Date();
  const [sh, sm] = item.starts_at.split(":").map(Number);
  const [eh, em] = item.ends_at.split(":").map(Number);
  const start = new Date(now);
  start.setHours(sh, sm ?? 0, 0, 0);
  const end = new Date(now);
  end.setHours(eh, em ?? 0, 0, 0);
  if (now > end) return "past";
  if (now >= start && now <= end) return "current";
  return "future";
}

function rowClass(status: SlotStatus) {
  if (status === "past") return "opacity-60 bg-slate-50/80";
  if (status === "current") return "bg-teal-50 ring-2 ring-teal-300 ring-inset";
  return "";
}

function cardClass(status: SlotStatus) {
  if (status === "past") return "opacity-60";
  if (status === "current") return "border-teal-400 ring-2 ring-teal-200";
  return "";
}

export function TodaySchedulePage() {
  const [date, setDate] = useState(() => todayIso());
  const [data, setData] = useState<TodayScheduleResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selected, setSelected] = useState<TodayScheduleItem | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const payload = await apiGet<TodayScheduleResponse>(`/teacher/today-schedule?date=${date}`);
      const items = Array.isArray(payload.items)
        ? payload.items
        : Object.values(payload.items ?? {});
      setData({ ...payload, items });
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری برنامه");
      setData(null);
    } finally {
      setLoading(false);
    }
  }, [date]);

  useEffect(() => {
    void load();
  }, [load]);

  const nextClass = useMemo(() => {
    if (!data?.items.length || date !== todayIso()) return null;
    return data.items.find((item) => getSlotStatus(item, date) === "future") ?? null;
  }, [data, date]);

  const isToday = date === todayIso();

  return (
    <div className="space-y-4">
      <section
        className="sticky top-14 z-30 -mx-4 border-b border-white/10 px-4 pb-4 pt-2 shadow-sm sm:-mx-6 sm:px-6 lg:top-[3.25rem]"
        style={{ background: "var(--header-gradient)" }}
      >
        <div className="relative overflow-visible rounded-2xl p-4 text-white lg:p-5">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            <div>
              <h2 className="text-2xl font-bold tracking-tight lg:text-3xl">
                {isToday ? "برنامه امروز" : "برنامه روز"}
              </h2>
              <p className="mt-1.5 text-sm text-white/90">
                {data?.day_name ?? "—"} · {data?.total ?? 0} کلاس
              </p>
            </div>
            <div className="relative z-[60] w-full max-w-[220px] rounded-xl bg-white p-1 shadow-sm sm:w-auto">
              <PersianDatePicker value={date} onChange={setDate} />
            </div>
          </div>
          {nextClass ? (
            <div className="mt-3 rounded-xl bg-white/15 px-3 py-2 text-sm backdrop-blur-sm">
              کلاس بعدی: {nextClass.subject_name} ({nextClass.starts_at})
              <Button
                className="mr-2 mt-2 h-8 px-3 text-xs sm:mt-0 sm:inline-flex"
                onClick={() => setSelected(nextClass)}
              >
                ورود سریع
              </Button>
            </div>
          ) : null}
        </div>
      </section>

      {error ? <Alert tone="error">{error}</Alert> : null}

      {loading ? (
        <PageContentSkeleton rows={4} />
      ) : !data?.items.length ? (
        <TeacherEmptyState title="کلاسی در برنامه نیست" description="برای این روز جلسه‌ای ثبت نشده است." />
      ) : (
        <>
          <div className="grid gap-3 sm:hidden">
            {data.items.map((item) => {
              const status = getSlotStatus(item, date);
              return (
                <div
                  key={item.schedule_id}
                  className={`rounded-2xl border border-slate-200 bg-white p-4 shadow-sm ${cardClass(status)}`}
                >
                  <div className="flex items-start gap-3">
                    <SubjectAvatar
                      name={item.subject_name ?? "درس"}
                      imageUrl={item.subject_image_url}
                      size="lg"
                    />
                    <div className="min-w-0 flex-1">
                      <div className="flex items-start justify-between gap-2">
                        <div className="font-bold text-slate-900">{item.subject_name}</div>
                    {status === "current" ? (
                      <span className="shrink-0 rounded-full bg-teal-600 px-2 py-0.5 text-[10px] font-bold text-white">
                        الان
                      </span>
                    ) : null}
                      </div>
                      <div className="mt-1 text-xs font-medium text-slate-500">
                        {item.class_code} · {item.grade_label || "—"}
                      </div>
                      <div className="mt-2 flex items-center justify-between text-sm text-slate-700">
                        <span className="tabular-nums">
                          {item.starts_at} – {item.ends_at}
                        </span>
                        <span className="text-slate-500">{item.students_count} نفر</span>
                      </div>
                      <Button className="mt-3 w-full" onClick={() => setSelected(item)}>
                        مشاهده
                      </Button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          <TeacherPanel className="hidden sm:block" padded={false}>
            <div className="overflow-x-auto">
              <table className="min-w-full text-sm">
                <thead className="bg-slate-50 text-slate-500">
                  <tr>
                    <th className="px-4 py-3 text-right font-semibold">کلاس</th>
                    <th className="px-4 py-3 text-right font-semibold">پایه</th>
                    <th className="px-4 py-3 text-right font-semibold">دانش‌آموزان</th>
                    <th className="px-4 py-3 text-right font-semibold">زنگ</th>
                    <th className="px-4 py-3 text-right font-semibold">عملیات</th>
                  </tr>
                </thead>
                <tbody>
                  {data.items.map((item) => {
                    const status = getSlotStatus(item, date);
                    return (
                      <tr
                        key={item.schedule_id}
                        className={`border-t border-slate-100 hover:bg-slate-50/70 ${rowClass(status)}`}
                      >
                        <td className="px-4 py-3">
                          <div className="flex items-center gap-2">
                            <SubjectAvatar
                              name={item.subject_name ?? "درس"}
                              imageUrl={item.subject_image_url}
                              size="sm"
                            />
                            <div>
                              <div className="font-bold text-slate-900">{item.subject_name}</div>
                              <div className="text-xs font-medium text-slate-500">{item.class_code}</div>
                            </div>
                            {status === "current" ? (
                              <span className="rounded-full bg-teal-600 px-2 py-0.5 text-[10px] font-bold text-white">
                                الان
                              </span>
                            ) : null}
                          </div>
                        </td>
                        <td className="px-4 py-3 text-slate-700">{item.grade_label || "—"}</td>
                        <td className="px-4 py-3 tabular-nums text-slate-700">{item.students_count}</td>
                        <td className="px-4 py-3 tabular-nums text-slate-700">
                          {item.starts_at} – {item.ends_at}
                        </td>
                        <td className="px-4 py-3">
                          <Button className="px-3 py-1.5 text-xs" onClick={() => setSelected(item)}>
                            مشاهده
                          </Button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </TeacherPanel>
        </>
      )}

      <div className="flex justify-end">
        <Link href="/teacher/profile" className="text-sm text-teal-700 hover:underline">
          پرونده معلم و برنامه هفتگی
        </Link>
      </div>

      <SessionQuickModal item={selected} onClose={() => setSelected(null)} />
    </div>
  );
}