"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { Clock3, Loader2, Save, ShieldCheck, WalletCards } from "lucide-react";

type Limits = {
  depositLimitDaily: string | null;
  lossLimitDaily: string | null;
  sessionLimitMinutes: number | null;
};

type LoadState = "loading" | "ready" | "guest" | "error";

export function ResponsibleGamingSettings() {
  const [state, setState] = useState<LoadState>("loading");
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState("");
  const [depositLimitDaily, setDepositLimitDaily] = useState("");
  const [lossLimitDaily, setLossLimitDaily] = useState("");
  const [sessionLimitMinutes, setSessionLimitMinutes] = useState("");

  useEffect(() => {
    let mounted = true;

    fetch("/api/responsible-gaming/limits", { cache: "no-store" })
      .then(async (response) => {
        const payload = await response.json();

        if (!mounted) return;

        if (response.status === 401) {
          setState("guest");
          return;
        }

        if (!response.ok || !payload.ok) {
          setState("error");
          setMessage(payload.error?.message ?? "Limites indisponibles");
          return;
        }

        const limits = payload.data as Limits;
        setDepositLimitDaily(limits.depositLimitDaily ?? "");
        setLossLimitDaily(limits.lossLimitDaily ?? "");
        setSessionLimitMinutes(limits.sessionLimitMinutes ? String(limits.sessionLimitMinutes) : "");
        setState("ready");
      })
      .catch(() => {
        if (mounted) {
          setState("error");
          setMessage("Impossible de charger vos limites pour le moment.");
        }
      });

    return () => {
      mounted = false;
    };
  }, []);

  async function save() {
    setSaving(true);
    setMessage("");

    const response = await fetch("/api/responsible-gaming/limits", {
      method: "PATCH",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        depositLimitDaily: numberOrNull(depositLimitDaily),
        lossLimitDaily: numberOrNull(lossLimitDaily),
        sessionLimitMinutes: numberOrNull(sessionLimitMinutes)
      })
    });
    const payload = await response.json();
    setSaving(false);

    if (!response.ok || !payload.ok) {
      setMessage(payload.error?.message ?? "Enregistrement impossible");
      return;
    }

    const limits = payload.data as Limits;
    setDepositLimitDaily(limits.depositLimitDaily ?? "");
    setLossLimitDaily(limits.lossLimitDaily ?? "");
    setSessionLimitMinutes(limits.sessionLimitMinutes ? String(limits.sessionLimitMinutes) : "");
    setMessage("Vos limites ont été enregistrées.");
  }

  if (state === "loading") {
    return (
      <section className="surface grid min-h-48 place-items-center rounded-lg">
        <Loader2 className="h-6 w-6 animate-spin text-felt" />
      </section>
    );
  }

  if (state === "guest") {
    return (
      <section className="surface rounded-lg p-5">
        <ShieldCheck className="mb-4 h-6 w-6 text-felt" />
        <h2 className="text-xl font-black text-white">Définir mes limites</h2>
        <p className="mt-2 text-sm leading-6 text-slate-400">Connectez-vous pour fixer ou modifier vos limites de jeu responsable.</p>
        <div className="mt-5 grid gap-2 sm:flex">
          <Link href="/login" className="grid h-11 place-items-center rounded-lg border border-white/10 px-4 text-sm font-black text-white">
            Connexion
          </Link>
          <Link href="/register" className="grid h-11 place-items-center rounded-lg bg-felt px-4 text-sm font-black text-ink-950">
            Inscription
          </Link>
        </div>
      </section>
    );
  }

  return (
    <section className="surface rounded-lg p-5">
      <div className="flex items-center gap-2">
        <ShieldCheck className="h-5 w-5 text-felt" />
        <h2 className="text-xl font-black text-white">Mes limites</h2>
      </div>
      <p className="mt-2 text-sm leading-6 text-slate-400">Vous pouvez définir des plafonds personnels pour garder le contrôle de votre activité.</p>

      <div className="mt-5 grid gap-3 md:grid-cols-3">
        <LimitField
          icon={WalletCards}
          label="Dépôt quotidien"
          suffix="EUR"
          value={depositLimitDaily}
          min={1}
          onChange={setDepositLimitDaily}
        />
        <LimitField icon={ShieldCheck} label="Pertes quotidiennes" suffix="EUR" value={lossLimitDaily} min={1} onChange={setLossLimitDaily} />
        <LimitField
          icon={Clock3}
          label="Temps de session"
          suffix="minutes"
          value={sessionLimitMinutes}
          min={15}
          max={1440}
          onChange={setSessionLimitMinutes}
        />
      </div>

      <button
        type="button"
        onClick={save}
        disabled={saving || state === "error"}
        className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-felt text-sm font-black text-ink-950 disabled:bg-slate-700 disabled:text-slate-400 sm:w-auto sm:px-5"
      >
        {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
        Enregistrer mes limites
      </button>
      {message ? <p className={message.includes("enregistrées") ? "mt-3 text-sm font-semibold text-felt" : "mt-3 text-sm font-semibold text-ember"}>{message}</p> : null}
    </section>
  );
}

function LimitField({
  icon: Icon,
  label,
  suffix,
  value,
  min,
  max,
  onChange
}: {
  icon: typeof ShieldCheck;
  label: string;
  suffix: string;
  value: string;
  min: number;
  max?: number;
  onChange: (value: string) => void;
}) {
  return (
    <label className="rounded-lg border border-white/10 bg-white/[0.04] p-4">
      <span className="flex items-center gap-2 text-sm font-black text-white">
        <Icon className="h-4 w-4 text-felt" />
        {label}
      </span>
      <span className="mt-3 flex h-11 items-center rounded-lg border border-white/10 bg-ink-900/80 px-3">
        <input
          value={value}
          onChange={(event) => onChange(event.target.value)}
          type="number"
          min={min}
          max={max}
          placeholder="Aucune limite"
          className="h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-sm font-bold text-white placeholder:text-slate-500 focus:ring-0"
        />
        <span className="text-xs font-bold text-slate-500">{suffix}</span>
      </span>
    </label>
  );
}

function numberOrNull(value: string) {
  const trimmed = value.trim();
  return trimmed ? Number(trimmed) : null;
}