"use client";

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

type Props = {
  cliente: {
    nomeCompleto: string;
    whatsapp: string;
    razaoSocial: string | null;
    cep: string | null;
    logradouro: string | null;
    numero: string | null;
    complemento: string | null;
    bairro: string | null;
    cidade: string | null;
    uf: string | null;
  };
};

const initialState: ContaState = { ok: false };

function SubmitButton() {
  const { pending } = useFormStatus();
  return <Button type="submit" disabled={pending}>{pending ? "Salvando..." : "Salvar dados"}</Button>;
}

export function ContaForm({ cliente }: Props) {
  const [state, action] = useFormState(atualizarConta, initialState);

  return (
    <form action={action} className="space-y-4">
      {state.message ? (
        <Alert variant={state.ok ? "default" : "destructive"}>
          <AlertDescription>{state.message}</AlertDescription>
        </Alert>
      ) : null}
      <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" defaultValue={cliente.nomeCompleto} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="whatsapp">WhatsApp</Label>
          <Input id="whatsapp" name="whatsapp" defaultValue={cliente.whatsapp} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="razaoSocial">Razao social</Label>
          <Input id="razaoSocial" name="razaoSocial" defaultValue={cliente.razaoSocial ?? ""} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="cep">CEP</Label>
          <Input id="cep" name="cep" defaultValue={cliente.cep ?? ""} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="logradouro">Logradouro</Label>
          <Input id="logradouro" name="logradouro" defaultValue={cliente.logradouro ?? ""} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="numero">Numero</Label>
          <Input id="numero" name="numero" defaultValue={cliente.numero ?? ""} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="complemento">Complemento</Label>
          <Input id="complemento" name="complemento" defaultValue={cliente.complemento ?? ""} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="bairro">Bairro</Label>
          <Input id="bairro" name="bairro" defaultValue={cliente.bairro ?? ""} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="cidade">Cidade</Label>
          <Input id="cidade" name="cidade" defaultValue={cliente.cidade ?? ""} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="uf">UF</Label>
          <Input id="uf" name="uf" defaultValue={cliente.uf ?? ""} maxLength={2} />
        </div>
      </div>
      <SubmitButton />
    </form>
  );
}