import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter } from '@/components/ui/alert-dialog';
import { PencilIcon, Trash2Icon, MapPinIcon, PhoneIcon } from 'lucide-react';

export default function VisualizacaoCliente() {
  const [openDialog, setOpenDialog] = useState(false);

  const cliente = {
    nome_razao_social: 'Construtora Exemplo LTDA',
    nome_fantasia: 'Construtora Exemplo',
    cpf_cnpj: '12.345.678/0001-90',
    tipo_pessoa: 'CNPJ',
    email_principal: 'contato@exemplo.com',
    telefone_principal: '(11) 98765-4321',
    observacoes: 'Cliente VIP com contrato de fidelidade.',
  };

  const enderecos = [
    {
      tipo_endereco: 'Obra',
      logradouro: 'Rua das Flores',
      numero: '123',
      bairro: 'Centro',
      cidade: 'São Paulo',
      estado: 'SP',
      cep: '01000-000',
      complemento: 'Próximo ao metrô',
    },
  ];

  const contatos = [
    {
      tipo_contato: 'Obra',
      nome: 'João da Silva',
      cargo: 'Engenheiro',
      telefone: '(11) 99876-5432',
      email: 'joao.silva@exemplo.com',
    },
  ];

  return (
    <div className="p-8">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">Visualização de Cliente</h1>
        <div className="flex gap-2">
          <Button variant="outline">
            <PencilIcon className="mr-2 h-4 w-4" /> Editar
          </Button>
          <AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
            <AlertDialogTrigger asChild>
              <Button variant="destructive">
                <Trash2Icon className="mr-2 h-4 w-4" /> Excluir
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <h2 className="text-lg font-semibold">Confirmar Exclusão</h2>
                <p>Tem certeza que deseja excluir este cliente? Esta ação não poderá ser desfeita.</p>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <Button variant="outline" onClick={() => setOpenDialog(false)}>Cancelar</Button>
                <Button variant="destructive" onClick={() => {/* função de exclusão */}}>Confirmar</Button>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      </div>

      <Card className="mb-6">
        <CardContent className="p-6">
          <h2 className="text-2xl font-bold mb-4">{cliente.nome_razao_social}</h2>
          <p><strong>Nome Fantasia:</strong> {cliente.nome_fantasia}</p>
          <p><strong>CPF/CNPJ:</strong> {cliente.cpf_cnpj}</p>
          <p><strong>Tipo Pessoa:</strong> {cliente.tipo_pessoa}</p>
          <p><strong>Email:</strong> {cliente.email_principal}</p>
          <p><strong>Telefone:</strong> {cliente.telefone_principal}</p>
          <p><strong>Observações:</strong> {cliente.observacoes}</p>
        </CardContent>
      </Card>

      <h2 className="text-2xl font-bold mb-4 flex items-center"><MapPinIcon className="mr-2" /> Endereços</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
        {enderecos.map((endereco, idx) => (
          <Card key={idx}>
            <CardContent className="p-6">
              <p><strong>Tipo:</strong> {endereco.tipo_endereco}</p>
              <p><strong>Endereço:</strong> {endereco.logradouro}, {endereco.numero} - {endereco.bairro}</p>
              <p><strong>Complemento:</strong> {endereco.complemento}</p>
              <p><strong>Cidade/Estado:</strong> {endereco.cidade}/{endereco.estado}</p>
              <p><strong>CEP:</strong> {endereco.cep}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <h2 className="text-2xl font-bold mb-4 flex items-center"><PhoneIcon className="mr-2" /> Contatos</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {contatos.map((contato, idx) => (
          <Card key={idx}>
            <CardContent className="p-6">
              <p><strong>Tipo:</strong> {contato.tipo_contato}</p>
              <p><strong>Nome:</strong> {contato.nome}</p>
              <p><strong>Cargo:</strong> {contato.cargo}</p>
              <p><strong>Email:</strong> {contato.email}</p>
              <p><strong>Telefone:</strong> {contato.telefone}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
