'use client';

import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { useState } from 'react';

interface ModalNovoEnderecoProps {
  open: boolean;
  setOpen: (open: boolean) => void;
}

export function ModalNovoEndereco({ open, setOpen }: ModalNovoEnderecoProps) {
  const [form, setForm] = useState({
    tipo_endereco: '',
    cep: '',
    logradouro: '',
    numero: '',
    complemento: '',
    bairro: '',
    cidade: '',
    estado: '',
    pais: 'Brasil',
    referencia: '',
  });

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }

  function handleSubmit() {
    // Aqui você faria o POST para o backend ou supabase
    console.log(form);
    setOpen(false);
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Novo Endereço</DialogTitle>
        </DialogHeader>

        <div className="grid gap-4">
          <Input placeholder="Tipo (obra, faturamento)" name="tipo_endereco" onChange={handleChange} />
          <Input placeholder="CEP" name="cep" onChange={handleChange} />
          <Input placeholder="Logradouro" name="logradouro" onChange={handleChange} />
          <Input placeholder="Número" name="numero" onChange={handleChange} />
          <Input placeholder="Complemento" name="complemento" onChange={handleChange} />
          <Input placeholder="Bairro" name="bairro" onChange={handleChange} />
          <Input placeholder="Cidade" name="cidade" onChange={handleChange} />
          <Input placeholder="Estado" name="estado" onChange={handleChange} />
          <Input placeholder="País" name="pais" value={form.pais} disabled />
          <Input placeholder="Referência" name="referencia" onChange={handleChange} />
        </div>

        <Button className="w-full mt-4" onClick={handleSubmit}>
          Salvar Endereço
        </Button>
      </DialogContent>
    </Dialog>
  );
}
