"use client";

import { useFormState, useFormStatus } from "react-dom";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { enviarBriefing, type EnvioBriefingState } from "./actions";

const initialState: EnvioBriefingState = { ok: false };

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <Button type="submit" disabled={pending}>
      {pending ? "Enviando..." : "Enviar briefing"}
    </Button>
  );
}

export function EnvioBriefingForm({
  briefingId,
  confirmacaoCliente,
  perguntasEmBranco
}: {
  briefingId: string;
  confirmacaoCliente: string;
  perguntasEmBranco: number;
}) {
  const enviarComId = enviarBriefing.bind(null, briefingId);
  const [state, action] = useFormState(enviarComId, initialState);

  return (
    <form action={action} className="space-y-4 rounded-lg border bg-card p-4">
      {state.message ? (
        <Alert variant="destructive">
          <AlertDescription>{state.message}</AlertDescription>
        </Alert>
      ) : null}

      {perguntasEmBranco > 0 ? (
        <Alert>
          <AlertDescription>
            Existem {perguntasEmBranco} pergunta(s) em branco. Voce pode enviar mesmo assim se estiver tudo certo.
          </AlertDescription>
        </Alert>
      ) : null}

      <p className="text-sm leading-6 text-muted-foreground">{confirmacaoCliente}</p>

      <label className="flex items-start gap-3 rounded-md border p-3 text-sm leading-6">
        <Checkbox name="confirmacaoCliente" required />
        <span>Confirmo a declaracao acima e desejo enviar o briefing para analise.</span>
      </label>

      {perguntasEmBranco > 0 ? (
        <label className="flex items-start gap-3 rounded-md border p-3 text-sm leading-6">
          <Checkbox name="confirmarBrancos" required />
          <span>Estou ciente de que ha perguntas em branco e quero enviar mesmo assim.</span>
        </label>
      ) : null}

      <SubmitButton />
    </form>
  );
}