"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import Header from "@/components/Header";

export default function AbsenceForm() {
  const router = useRouter();
  const [date, setDate] = useState("");
  const [reason, setReason] = useState("");
  const [saving, setSaving] = useState(false);
  const [done, setDone] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!date) return;
    setSaving(true);
    const res = await fetch("/api/absences", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ date, reason }),
    });
    setSaving(false);
    if (res.ok) {
      setDone(true);
      setTimeout(() => {
        router.push("/member/muay-thai");
        router.refresh();
      }, 1500);
    }
  }

  return (
    <main className="min-h-screen">
      <Header />
      <div className="mx-auto max-w-3xl px-4 py-8">
        <Link href="/member/muay-thai" className="mb-4 block text-sm text-primary-300">
          ← Retour à mon espace
        </Link>
        <h1 className="mb-4 text-2xl font-bold">📅 Signaler une absence</h1>

        {done ? (
          <div className="card border-emerald-500/30 text-center">
            <p className="text-2xl">👍</p>
            <p className="mt-2 font-semibold text-emerald-300">
              Absence signalée, merci !
            </p>
            <p className="mt-1 text-sm text-white/50">Meilleure forme, à bientôt.</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="card space-y-4">
            <div>
              <label className="label">Date du cours manqué</label>
              <input
                type="date"
                value={date}
                onChange={(e) => setDate(e.target.value)}
                className="input"
                required
              />
            </div>
            <div>
              <label className="label">Raison (optionnelle)</label>
              <textarea
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                className="input min-h-[100px]"
                placeholder="Ex: blessure, travail, vacances..."
              />
            </div>
            <button type="submit" className="btn-primary w-full" disabled={saving}>
              {saving ? "Envoi..." : "✅ Confirmer mon absence"}
            </button>
          </form>
        )}
      </div>
    </main>
  );
}