import { createFileRoute, useRouter } from "@tanstack/react-router";
import { useServerFn } from "@tanstack/react-start";
import { useState } from "react";
import { Moon } from "lucide-react";
import { unlockSite } from "@/lib/gate.functions";

export const Route = createFileRoute("/unlock")({
  head: () => ({
    meta: [
      { title: "Accès protégé — Gains de Songe" },
      {
        name: "description",
        content:
          "Entrez le mot de passe pour accéder au suivi des gains de ressources Songe.",
      },
      { property: "og:title", content: "Accès protégé — Gains de Songe" },
      {
        property: "og:description",
        content: "Espace privé de suivi des gains de ressources Songe.",
      },
    ],
  }),
  component: Unlock,
});

function Unlock() {
  const router = useRouter();
  const unlock = useServerFn(unlockSite);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const password = String(new FormData(e.currentTarget).get("password") ?? "");
    setLoading(true);
    setError(false);
    try {
      const { ok } = await unlock({ data: { password } });
      if (ok) await router.navigate({ to: "/" });
      else setError(true);
    } finally {
      setLoading(false);
    }
  }

  return (
    <main className="flex min-h-screen items-center justify-center px-4">
      <div className="card-songe w-full max-w-sm p-8">
        <div className="flex flex-col items-center text-center">
          <Moon className="size-8 text-primary" aria-hidden />
          <h1 className="mt-4 text-2xl font-semibold tracking-tight">
            Grimoire des Songes
          </h1>
          <p className="mt-2 text-sm text-muted-foreground">
            Espace privé. Entrez le mot de passe pour continuer.
          </p>
        </div>
        <form onSubmit={onSubmit} className="mt-6 space-y-3">
          <input
            name="password"
            type="password"
            autoComplete="current-password"
            placeholder="Mot de passe"
            className="input-songe"
            required
          />
          {error && (
            <p className="text-sm text-destructive">Mot de passe incorrect.</p>
          )}
          <button type="submit" className="btn-songe w-full" disabled={loading}>
            {loading ? "Vérification…" : "Entrer"}
          </button>
        </form>
      </div>
    </main>
  );
}