/**
 * Trouve-KA — formulaire de jeton d'administration
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 */

"use client";

import Link from "next/link";
import { useState, type FormEvent } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Wordmark } from "@/components/wordmark";

interface TokenFormProps {
  onSubmit: (token: string) => void;
  expired?: boolean;
}

export function TokenForm({ onSubmit, expired = false }: TokenFormProps) {
  const [value, setValue] = useState("");

  function handleSubmit(event: FormEvent) {
    event.preventDefault();
    const token = value.trim();
    if (token) onSubmit(token);
  }

  return (
    <main
      id="contenu"
      className="flex flex-1 items-center justify-center px-4 py-16"
    >
      <Card className="w-full max-w-sm">
        <CardContent className="p-6">
          <Link href="/" className="group inline-block rounded-sm">
            <Wordmark className="text-[19px]" />
          </Link>
          <h1 className="mt-4 text-base font-bold text-ink">Administration</h1>
          <p className="mt-1 text-sm text-ink-2">
            Entrez le jeton d'administration pour accéder au dashboard du
            robot.
          </p>
          {expired ? (
            <p role="alert" className="mt-3 text-sm font-medium text-danger">
              Jeton invalide ou expiré. Entrez-le de nouveau.
            </p>
          ) : null}
          <form onSubmit={handleSubmit} className="mt-4 space-y-3">
            <label htmlFor="jeton-admin" className="sr-only">
              Jeton d'administration
            </label>
            <Input
              id="jeton-admin"
              type="password"
              autoComplete="off"
              placeholder="Jeton d'administration"
              value={value}
              onChange={(event) => setValue(event.target.value)}
              required
            />
            <Button type="submit" className="w-full">
              Accéder
            </Button>
          </form>
          <p className="mt-4 text-xs text-ink-3">
            Le jeton est conservé uniquement pour la durée de la session du
            navigateur.
          </p>
        </CardContent>
      </Card>
    </main>
  );
}