"use client";

import { useState } from "react";
import { Save, Loader2 } from "lucide-react";
import { useFormStatus } from "react-dom";
import { ActionForm } from "@/components/ui-client";
import { saveAttendanceList } from "@/lib/actions";

const STATUS = [
  ["present", "حاضر", "bg-emerald-600", "ring-emerald-600/30"],
  ["absent", "غایب", "bg-red-500", "ring-red-500/30"],
  ["leave", "مرخصی", "bg-amber-500", "ring-amber-500/30"],
  ["late", "دیرکرد", "bg-slate-400", "ring-slate-400/30"],
] as const;

function SaveBtn() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-l from-emerald-700 to-emerald-900 px-5 py-2.5 text-sm font-extrabold text-white shadow-md disabled:opacity-60">
      {pending ? <Loader2 size={15} className="animate-spin" /> : <Save size={15} />}
      ثبت حضور و غیاب این روز
    </button>
  );
}

export function AttendanceRoster({ classId, jdate, students, existing }: {
  classId: number; jdate: string;
  students: { id: number; name: string }[];
  existing: Record<number, string>;
}) {
  const [st, setSt] = useState<Record<number, string>>({ ...existing });
  return (
    <ActionForm action={saveAttendanceList}>
      <input type="hidden" name="classId" value={classId} />
      <input type="hidden" name="jdate" value={jdate} />
      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
        {students.map((s) => {
          const cur = st[s.id] ?? "present";
          return (
            <div key={s.id} className="flex items-center justify-between gap-2 rounded-xl border border-emerald-900/10 bg-white p-2.5 shadow-sm">
              <span className="min-w-0 flex-1 truncate text-xs font-extrabold text-emerald-950">{s.name}</span>
              <input type="hidden" name={`st-${s.id}`} value={cur} />
              <div className="flex shrink-0 gap-1">
                {STATUS.map(([k, l, color, ring]) => (
                  <button key={k} type="button" onClick={() => setSt((o) => ({ ...o, [s.id]: k }))}
                    className={`rounded-lg px-2 py-1 text-[10px] font-bold transition ${cur === k ? `${color} text-white shadow` : `text-emerald-900/40 ring-1 ring-inset ${ring} hover:text-emerald-900`}`}>
                    {l}
                  </button>
                ))}
              </div>
            </div>
          );
        })}
      </div>
      <div className="mt-4"><SaveBtn /></div>
    </ActionForm>
  );
}