Geradores/geradoresfe/src/components/Validator.tsx

import { useState, type FormEvent } from "react";
import { Link } from "react-router";
import { SearchCheckIcon } from "lucide-react";
import { api, type DetectMatch } from "../lib/api";
import { Button } from "./ui/Button";
import { Input } from "./ui/Input";
import { ValidationResultView } from "./ValidationResultView";

/**
 * Validador livre: o utilizador cola um valor qualquer e a API identifica o tipo
 * (NIF, IBAN, CC, …) e se é válido, incluindo "quase" correspondências com o dígito errado.
 */
export function Validator({ autoFocus = false }: { autoFocus?: boolean }) {
    const [value, setValue] = useState("");
    const [matches, setMatches] = useState<DetectMatch[] | null>(null);
    const [error, setError] = useState<string | null>(null);
    const [loading, setLoading] = useState(false);

    const submit = async (e: FormEvent) => {
        e.preventDefault();
        if (!value.trim()) return;
        setLoading(true);
        setError(null);
        try {
            setMatches(await api.detect(value));
        } catch (err) {
            setError((err as Error).message);
            setMatches(null);
        } finally {
            setLoading(false);
        }
    };

    const valid = matches?.filter((m) => m.result.isValid) ?? [];
    const nearMisses = matches?.filter((m) => !m.result.isValid) ?? [];

    return (
        <div className="flex flex-col gap-4">
            <form onSubmit={submit} className="flex flex-col gap-2 sm:flex-row">
                <Input
                    value={value}
                    onChange={(e) => {
                        setValue(e.target.value);
                        setMatches(null);
                    }}
                    placeholder="Cole um NIF, NISS, CC, IBAN, cartão, matrícula, EAN…"
                    aria-label="Valor a validar"
                    autoFocus={autoFocus}
                    className="py-3 font-mono text-base"
                />
                <Button type="submit" loading={loading} icon={<SearchCheckIcon className="h-4 w-4" />} className="py-3 sm:w-40">
                    Validar
                </Button>
            </form>

            {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}

            {matches && matches.length === 0 && (
                <ValidationResultView
                    result={{ isValid: false, formatMatch: false, message: "Não foi reconhecido como nenhum dos tipos suportados." }}
                />
            )}

            {valid.map((m) => (
                <ValidationResultView key={m.generatorId} title={m.generatorName} result={m.result} />
            ))}

            {valid.length === 0 && nearMisses.map((m) => (
                <ValidationResultView key={m.generatorId} title={`Parece um ${m.generatorName}, mas…`} result={m.result} />
            ))}

            {valid.length > 0 && nearMisses.length > 0 && (
                <p className="text-xs text-gray-500 dark:text-gray-400">
                    Também tem o formato de: {nearMisses.map((m) => (
                        <Link key={m.generatorId} to={`/gerador/${m.generatorId}`} className="mr-2 underline">
                            {m.generatorName}
                        </Link>
                    ))}
                    (mas não é válido como tal).
                </p>
            )}
        </div>
    );
}