"use client";

import { useFormState, useFormStatus } from "react-dom";
import { useState } from "react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cadastrarCliente, type CadastroState } from "./actions";

const initialState: CadastroState = { ok: false };

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

  return (
    <Button type="submit" className="w-full" disabled={pending}>
      {pending ? "Criando cadastro..." : "Criar cadastro"}
    </Button>
  );
}

export function CadastroForm() {
  const [state, action] = useFormState(cadastrarCliente, initialState);
  const [tipo, setTipo] = useState<"PF" | "PJ">("PF");

  return (
    <form action={action} className="space-y-5">
      {state.message ? (
        <Alert variant="destructive">
          <AlertDescription>{state.message}</AlertDescription>
        </Alert>
      ) : null}

      <input type="hidden" name="tipo" value={tipo} />

      <div className="grid gap-4 sm:grid-cols-2">
        <div className="space-y-2 sm:col-span-2">
          <Label htmlFor="nomeCompleto">Nome completo</Label>
          <Input id="nomeCompleto" name="nomeCompleto" autoComplete="name" required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="cpf">CPF</Label>
          <Input id="cpf" name="cpf" inputMode="numeric" autoComplete="off" required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="whatsapp">WhatsApp</Label>
          <Input id="whatsapp" name="whatsapp" inputMode="tel" autoComplete="tel" required />
        </div>
        <div className="space-y-2 sm:col-span-2">
          <Label htmlFor="email">E-mail</Label>
          <Input id="email" name="email" type="email" autoComplete="email" required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="senha">Senha</Label>
          <Input id="senha" name="senha" type="password" autoComplete="new-password" required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="confirmarSenha">Confirmar senha</Label>
          <Input id="confirmarSenha" name="confirmarSenha" type="password" autoComplete="new-password" required />
        </div>
      </div>

      <fieldset className="space-y-3 rounded-lg border p-4">
        <legend className="px-1 text-sm font-medium">Este site e para uma empresa?</legend>
        <div className="grid gap-3 sm:grid-cols-2">
          <Button type="button" variant={tipo === "PF" ? "default" : "outline"} onClick={() => setTipo("PF")}>
            Nao
          </Button>
          <Button type="button" variant={tipo === "PJ" ? "default" : "outline"} onClick={() => setTipo("PJ")}>
            Sim
          </Button>
        </div>
      </fieldset>

      {tipo === "PJ" ? (
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="space-y-2 sm:col-span-2">
            <Label htmlFor="razaoSocial">Razao social</Label>
            <Input id="razaoSocial" name="razaoSocial" required />
          </div>
          <div className="space-y-2">
            <Label htmlFor="cnpj">CNPJ</Label>
            <Input id="cnpj" name="cnpj" inputMode="numeric" required />
          </div>
          <div className="space-y-2">
            <Label htmlFor="cep">CEP</Label>
            <Input id="cep" name="cep" inputMode="numeric" autoComplete="postal-code" />
          </div>
          <div className="space-y-2 sm:col-span-2">
            <Label htmlFor="logradouro">Logradouro</Label>
            <Input id="logradouro" name="logradouro" autoComplete="address-line1" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="numero">Numero</Label>
            <Input id="numero" name="numero" autoComplete="address-line2" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="complemento">Complemento</Label>
            <Input id="complemento" name="complemento" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="bairro">Bairro</Label>
            <Input id="bairro" name="bairro" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="cidade">Cidade</Label>
            <Input id="cidade" name="cidade" autoComplete="address-level2" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="uf">UF</Label>
            <Input id="uf" name="uf" maxLength={2} autoComplete="address-level1" />
          </div>
        </div>
      ) : null}

      <label className="flex items-start gap-3 rounded-lg border p-4 text-sm leading-6">
        <Checkbox name="lgpdAceite" required />
        <span>
          Li e aceito a Politica de Privacidade e autorizo o tratamento dos dados para criacao e acompanhamento do briefing.
        </span>
      </label>

      <SubmitButton />
    </form>
  );
}