"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { ApiError, apiGet } from "@/lib/api";

interface AttendanceItem {
  id: number;
  attendance_date: string;
  status: string;
  late_minutes?: number | null;
  source?: string | null;
  class_room?: { id: number; name?: string | null; code?: string | null } | null;
  schedule?: { id: number; starts_at?: string | null; subject_name?: string | null } | null;
}

interface Payload {
  from: string;
  to: string;
  items: AttendanceItem[];
}

const STATUS_LABELS: Record<string, string> = {
  present: "حاضر",
  absent: "غایب",
  late: "تأخیر",
  temporary_exit: "خروج موقت",
};

function statusBadge(item: AttendanceItem) {
  if (item.status === "late" && item.late_minutes) {
    return `تأخیر ${item.late_minutes} دقیقه`;
  }
  return STATUS_LABELS[item.status] ?? item.status;
}

function badgeClass(status: string) {
  if (status === "present") return "bg-emerald-100 text-emerald-800";
  if (status === "absent") return "bg-orange-100 text-orange-800";
  if (status === "late") return "bg-violet-100 text-violet-800";
  return "bg-slate-100 text-slate-600";
}

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

export function StudentAttendanceHistory({
  studentProfileId,
  classRoomId,
  compact = false,
}: {
  studentProfileId: number;
  classRoomId?: number;
  compact?: boolean;
}) {
  const [items, setItems] = useState<AttendanceItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams();
      if (classRoomId) params.set("class_room_id", String(classRoomId));
      const qs = params.toString();
      const payload = await apiGet<Payload>(
        `/teacher/students/${studentProfileId}/attendances${qs ? `?${qs}` : ""}`,
      );
      setItems(payload.items ?? []);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [studentProfileId, classRoomId]);

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

  const visible = compact ? items.slice(0, 8) : items;

  return (
    <div className={compact ? "space-y-2" : "rounded-2xl border border-slate-200 bg-white p-4"}>
      <div className="mb-1 flex items-center justify-between">
        <h3 className="text-sm font-bold text-slate-800">سابقه حضور</h3>
        {!loading && items.length > 0 ? (
          <span className="text-[11px] text-slate-400">{items.length} مورد</span>
        ) : null}
      </div>

      {error ? <p className="text-xs text-orange-600">{error}</p> : null}
      {loading ? (
        <p className="text-xs text-slate-400">در حال بارگذاری…</p>
      ) : visible.length === 0 ? (
        <p className="text-xs text-slate-400">سابقه‌ای یافت نشد.</p>
      ) : (
        <ul className={`space-y-1.5 ${compact ? "max-h-48 overflow-y-auto" : ""}`}>
          {visible.map((item) => (
            <li
              key={item.id}
              className="flex items-center justify-between gap-2 rounded-xl border border-slate-100 px-3 py-2 text-xs"
            >
              <div className="min-w-0">
                <div className="font-semibold text-slate-800">{formatFaDate(item.attendance_date)}</div>
                {item.schedule?.subject_name || item.class_room ? (
                  <div className="truncate text-[11px] text-slate-400">
                    {item.schedule?.subject_name ?? item.class_room?.code ?? item.class_room?.name}
                  </div>
                ) : null}
              </div>
              <div className="flex shrink-0 items-center gap-2">
                <span className={`rounded-lg px-2 py-0.5 font-semibold ${badgeClass(item.status)}`}>
                  {statusBadge(item)}
                </span>
                {classRoomId || item.class_room?.id ? (
                  <Link
                    href={`/teacher/classes/${classRoomId ?? item.class_room!.id}?tab=attendance&date=${item.attendance_date}`}
                    className="text-teal-700 hover:underline"
                    title="مشاهده در کلاس"
                  >
                    کلاس
                  </Link>
                ) : null}
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}