"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/Button";
import { Field, Input } from "@/components/ui/Field";
import { TeacherModal } from "@/components/teacher/ui/TeacherModal";

const DEFAULT_PRESETS = [5, 10, 15, 20, 30];

export function LateMinutesPicker({
  open,
  onClose,
  onConfirm,
  presets = DEFAULT_PRESETS,
  initialMinutes = 5,
  initialNote = "",
}: {
  open: boolean;
  onClose: () => void;
  onConfirm: (minutes: number, justified: boolean, note: string) => void;
  presets?: number[];
  initialMinutes?: number;
  initialNote?: string;
}) {
  const [custom, setCustom] = useState(String(initialMinutes));
  const [selected, setSelected] = useState<number | null>(initialMinutes);
  const [justified, setJustified] = useState(false);
  const [note, setNote] = useState("");

  useEffect(() => {
    if (open) {
      setCustom(String(initialMinutes));
      setSelected(initialMinutes);
      setJustified(false);
      setNote(initialNote ?? "");
    }
  }, [open, initialMinutes, initialNote]);

  const confirm = () => {
    const mins = selected ?? Number(custom);
    if (!mins || mins < 1) return;
    onConfirm(mins, justified, note.trim());
    onClose();
  };

  return (
    <TeacherModal
      open={open}
      onClose={onClose}
      title="مدت تأخیر"
      subtitle="دقیقه تأخیر را انتخاب یا وارد کنید"
      size="sm"
      footer={
        <div className="flex gap-2">
          <Button block onClick={confirm}>
            تأیید
          </Button>
          <Button variant="secondary" block onClick={onClose}>
            انصراف
          </Button>
        </div>
      }
    >
      <div className="flex flex-wrap gap-2">
        {presets.map((p) => (
          <button
            key={p}
            type="button"
            onClick={() => {
              setSelected(p);
              setCustom(String(p));
            }}
            className={`rounded-xl border px-4 py-2 text-sm font-medium transition ${
              selected === p
                ? "border-primary bg-primary/10 text-primary"
                : "border-[var(--border)] hover:bg-slate-50"
            }`}
          >
            {p} دقیقه
          </button>
        ))}
      </div>
      <div className="mt-4">
        <label className="mb-1 block text-xs text-[var(--muted)]">یا مقدار دلخواه</label>
        <Input
          type="number"
          min={1}
          value={custom}
          onChange={(e) => {
            setCustom(e.target.value);
            setSelected(null);
          }}
        />
      </div>
      <label className="mt-4 flex cursor-pointer items-start gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm">
        <input
          type="checkbox"
          className="mt-0.5 h-4 w-4 rounded border-slate-300"
          checked={justified}
          onChange={(e) => setJustified(e.target.checked)}
        />
        <span>
          <span className="font-semibold text-slate-800">تأخیر موجه</span>
          <span className="mt-0.5 block text-xs text-slate-500">
            در موارد انضباطی لحاظ نمی‌شود.
          </span>
        </span>
      </label>
      <div className="mt-4">
        <Field label="دلیل تأخیر (اختیاری)">
          <Input value={note} onChange={(e) => setNote(e.target.value)} placeholder="مثلاً ترافیک" />
        </Field>
      </div>
    </TeacherModal>
  );
}