"use client";

import { useCallback, useEffect, useState } from "react";
import { Field } from "@/components/ui/Field";
import { PersianDatePicker } from "@/components/ui/PersianDatePicker";
import { ApiError, apiGet } from "@/lib/api";

export interface HistoryDay {
  date: string;
  present: number;
  late: number;
  absent: number;
  temporary_exit?: number;
  unchecked: number;
  marked_count: number;
  students_count: number;
}

interface HistoryPayload {
  from: string;
  to: string;
  days: HistoryDay[];
}

function formatFaDate(iso: string) {
  try {
    return new Date(iso + "T12:00:00").toLocaleDateString("fa-IR", {
      weekday: "short",
      month: "short",
      day: "numeric",
    });
  } catch {
    return iso;
  }
}

function monthRange(ym: string) {
  const [y, m] = ym.split("-").map(Number);
  const from = `${y}-${String(m).padStart(2, "0")}-01`;
  const last = new Date(y, m, 0).getDate();
  const to = `${y}-${String(m).padStart(2, "0")}-${String(last).padStart(2, "0")}`;
  return { from, to };
}

function SummaryChip({
  label,
  count,
  className,
  onClick,
}: {
  label: string;
  count: number;
  className: string;
  onClick?: () => void;
}) {
  if (!count) {
    return (
      <span className={`rounded-full px-1.5 py-0.5 font-medium opacity-50 ${className}`}>
        {label} {count}
      </span>
    );
  }
  return (
    <button
      type="button"
      title={`مشاهده لیست ${label}`}
      onClick={(e) => {
        e.stopPropagation();
        onClick?.();
      }}
      className={`rounded-full px-1.5 py-0.5 font-medium hover:brightness-95 ${className}`}
    >
      {label} {count}
    </button>
  );
}

export function ClassAttendanceHistory({
  classRoomId,
  scheduleId,
  subjectId,
  selectedDate,
  onSelectDate,
  onSelectSummary,
}: {
  classRoomId: number;
  scheduleId?: number | null;
  subjectId?: number | null;
  selectedDate: string;
  onSelectDate: (date: string) => void;
  onSelectSummary?: (date: string, status: "present" | "late" | "absent" | "temporary_exit") => void;
}) {
  const [month, setMonth] = useState(() => selectedDate.slice(0, 7));
  const [days, setDays] = useState<HistoryDay[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const { from, to } = monthRange(month);
      const params = new URLSearchParams({
        class_room_id: String(classRoomId),
        from,
        to,
      });
      if (scheduleId) params.set("schedule_id", String(scheduleId));
      if (subjectId) params.set("subject_id", String(subjectId));
      const payload = await apiGet<HistoryPayload>(`/class-attendances/history?${params}`);
      setDays(payload.days ?? []);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری سابقه");
    } finally {
      setLoading(false);
    }
  }, [classRoomId, month, scheduleId, subjectId]);

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

  const markedDays = days.filter((d) => d.marked_count > 0);

  return (
    <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
      <h3 className="mb-3 text-sm font-bold text-slate-800">گزارش ماهانه</h3>

      <Field label="ماه">
        <PersianDatePicker
          onlyMonthPicker
          value={month}
          placeholder="انتخاب ماه"
          onChange={(ym) => {
            if (ym) setMonth(ym.length === 7 ? ym : ym.slice(0, 7));
          }}
        />
      </Field>

      {error ? <p className="mt-2 text-xs text-orange-600">{error}</p> : null}
      {loading ? (
        <p className="text-xs text-slate-400">در حال بارگذاری…</p>
      ) : markedDays.length === 0 ? (
        <p className="text-xs text-slate-400">هنوز سابقه‌ای ثبت نشده است.</p>
      ) : (
        <ul className="max-h-56 space-y-1.5 overflow-y-auto">
          {markedDays.map((day) => {
            const active = day.date === selectedDate;
            return (
              <li key={day.date}>
                <div
                  className={`flex w-full items-center justify-between gap-2 rounded-xl px-3 py-2 text-right text-xs transition ${
                    active ? "bg-teal-50 ring-1 ring-teal-200" : "hover:bg-slate-50"
                  }`}
                >
                  <button
                    type="button"
                    onClick={() => onSelectDate(day.date)}
                    className="min-w-0 flex-1 text-right font-semibold text-slate-800"
                  >
                    {formatFaDate(day.date)}
                  </button>
                  <span className="flex shrink-0 gap-1.5">
                    <SummaryChip
                      label="ح"
                      count={day.present}
                      className="bg-emerald-100 text-emerald-800"
                      onClick={() => onSelectSummary?.(day.date, "present")}
                    />
                    <SummaryChip
                      label="ت"
                      count={day.late}
                      className="bg-violet-100 text-violet-800"
                      onClick={() => onSelectSummary?.(day.date, "late")}
                    />
                    <SummaryChip
                      label="غ"
                      count={day.absent}
                      className="bg-orange-100 text-orange-800"
                      onClick={() => onSelectSummary?.(day.date, "absent")}
                    />
                    <SummaryChip
                      label="ج"
                      count={day.temporary_exit ?? 0}
                      className="bg-amber-100 text-amber-800"
                      onClick={() => onSelectSummary?.(day.date, "temporary_exit")}
                    />
                  </span>
                </div>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}