import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Phone, Mail, MapPin, MessageCircle, Clock, Send } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import { z } from 'zod';

// =====================================================================
// DEFINIÇÃO DAS VARIÁVEIS DE AMBIENTE: ESSENCIAIS PARA WHATSAPP E CRM
// =====================================================================
const WHATSAPP_BASE_URL = import.meta.env.VITE_PUBLIC_WHATSAPP_LINK || "https://wa.me/5511949474214";

const CRM_API_URL = "https://api.paineldocorretor.net/api/crm/negocios";
// Usando a API Key fornecida por você
const CRM_API_KEY = 'ydM0nihESN9IuIEHEoNGG3iQzE10UwgpkD8H3M0LZGU0'; 

// --- ATENÇÃO: SUBSTITUA PELO GUID REAL DA ETAPA "Novos Leads" DO SEU CRM ---
// Exemplo: '7e2f14e4-842d-45f9-a79e-38d0d7fa50ac'
const GUID_ETAPA_NOVOS_LEADS = ''; // <--- DEIXADO EM BRANCO CONFORME INSTRUÍDO PELO SUPORTE
// --- ID DO PRODUTO PARA O LEAD (HARDCODED OU VIA ENV, SE MUDAR) ---
const PRODUTO_ID_CRM = 'fbb0a6e2-50c4-4078-95ff-f72805474367';
// --- FIM DA ATENÇÃO ---

// Zod Schema atualizado para incluir a 'cidade'
const contactSchema = z.object({
  name: z.string().trim().min(2, { message: "Nome deve ter pelo menos 2 caracteres" }).max(100),
  email: z.string().trim().email({ message: "Email inválido" }).max(255),
  phone: z.string().trim().min(10, { message: "Telefone inválido" }).max(20),
  city: z.string().trim().min(2, { message: "Cidade deve ter pelo menos 2 caracteres" }).max(100), // Adicionado campo de cidade
  message: z.string().trim().min(10, { message: "Mensagem deve ter pelo menos 10 caracteres" }).max(1000),
});

const Contato = () => {
  const { toast } = useToast();
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    city: '', // Adicionado campo de cidade
    message: '',
  });
  const [loading, setLoading] = useState(false);
  const [formSubmittedSuccessfully, setFormSubmittedSuccessfully] = useState(false); 

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setFormSubmittedSuccessfully(false); 

    try {
      // Validação dos dados do formulário
      const validated = contactSchema.parse(formData);
      
      let crmSent = false; 

      // Verifica se a chave da API do CRM está configurada
      if (!CRM_API_KEY) {
        console.error('⚠️ CRM_API_KEY não configurada. Não foi possível enviar para o CRM.');
        toast({
          variant: "destructive",
          title: "Erro de Configuração",
          description: "A chave da API do CRM não está definida. Contate o administrador."
        });
        setLoading(false);
        return; 
      }
      
      // AJUSTE REALIZADO AQUI:
      // Agora, apenas um console.error ou console.warn será emitido,
      // sem exibir um toast de erro para o usuário final,
      // pois o suporte confirmou que deixar o GUID em branco é aceitável.
      if (GUID_ETAPA_NOVOS_LEADS === 'SEU_GUID_DA_ETAPA_NOVOS_LEADS_AQUI') {
          console.error('⚠️ GUID da etapa "Novos Leads" ainda está com o valor de placeholder. O lead será criado na etapa inicial padrão do CRM, mas esta mensagem de erro deve ser resolvida.');
          // Remover o toast de erro aqui para o usuário final
      } else if (!GUID_ETAPA_NOVOS_LEADS) {
        console.warn('⚠️ GUID da etapa "Novos Leads" está em branco. O lead será criado na etapa inicial padrão do CRM, conforme instruído pelo suporte.');
      }


      // Preparação do payload para o CRM
      const leadTitle = `Lead - ${validated.name} (#${new Date().getTime().toString().slice(-6)})`; // Gera um ID único simples
      const crmPayload = {
        Nome: leadTitle, 
        produtoId: PRODUTO_ID_CRM, // Adicionado produtoId
        // Se GUID_ETAPA_NOVOS_LEADS for '', ele será undefined aqui,
        // o que faz com que o CRM use sua etapa padrão.
        Etapa: GUID_ETAPA_NOVOS_LEADS || undefined, 
        Cidade: validated.city, // Adicionada cidade
        Etiquetas: ["SITE"], // Mantenho suas etiquetas atuais, mas pode ser ajustado
        Observacao: `Mensagem do site:\n${validated.message}`, 
        Contato: {
          Nome: validated.name,
          Email: validated.email,
          Telefones: [validated.phone] 
        }
      };

      try {
        console.log('📦 Enviando dados para o CRM:', crmPayload); 
        const crmResponse = await fetch(CRM_API_URL, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'ApiKey': CRM_API_KEY, 
          },
          body: JSON.stringify(crmPayload),
        });

        if (crmResponse.ok) {
          crmSent = true;
          console.log('✅ Dados enviados para o CRM com sucesso!');
        } else {
          // Tentar obter mais detalhes do erro se o CRM retornar um JSON
          const errorDetail = await crmResponse.json().catch(() => crmResponse.text()); // Tenta JSON, se falhar, pega texto
          console.error(`⚠️ Erro ao enviar dados para o CRM: ${crmResponse.status} - ${JSON.stringify(errorDetail)}`);
          toast({
            variant: "destructive",
            title: "Falha no CRM",
            description: `Não foi possível registrar no CRM. Status: ${crmResponse.status}. Detalhes: ${typeof errorDetail === 'string' ? errorDetail : JSON.stringify(errorDetail)}`
          });
        }
      } catch (crmError) {
        console.error('⚠️ Falha na conexão com o CRM:', crmError);
        toast({
            variant: "destructive",
            title: "Erro de Rede",
            description: "Não foi possível conectar ao servidor do CRM. Verifique sua conexão ou tente novamente."
        });
      }
      
      if (crmSent) {
        setFormSubmittedSuccessfully(true); 
        setFormData({ name: '', email: '', phone: '', city: '', message: '' }); // Limpa o campo city também
      } else {
        toast({
          variant: "destructive",
          title: "Erro no Envio",
          description: "Não foi possível processar sua solicitação no CRM. Por favor, tente novamente mais tarde."
        });
      }
      
    } catch (error) {
      if (error instanceof z.ZodError) {
        toast({
          variant: "destructive",
          title: "Erro no formulário",
          description: error.errors[0].message,
        });
      } else {
         toast({
          variant: "destructive",
          title: "Erro inesperado",
          description: "Ocorreu um erro ao processar sua solicitação."
        });
        console.error("Erro inesperado durante submissão:", error);
      }
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  const contactInfo = [
    {
      icon: Phone,
      title: 'Telefone',
      details: ['(11) 2286-4848', '(11) 94947-4214'],
      gradient: 'from-primary to-primary-soft'
    },
    {
      icon: MessageCircle,
      title: 'WhatsApp',
      details: ['(11) 94947-4214'],
      link: WHATSAPP_BASE_URL,
      gradient: 'from-green-500 to-green-600'
    },
    {
      icon: Clock,
      title: 'Horário',
      details: ['Seg - Sex: 8h às 18h', 'Sáb: 9h às 13h'],
      gradient: 'from-secondary to-primary'
    },
    {
      icon: MapPin,
      title: 'Endereços',
      details: [
        'Rua Barros Cassal, 37 – Itaquera',
        'Av. Pres. Juscelino Kubitschek, 1830 – Itaim Bibi'
      ],
      gradient: 'from-primary to-secondary'
    },
  ];

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-br from-secondary via-secondary to-primary/10 text-secondary-foreground">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-5xl md:text-6xl font-bold mb-6">
              Fale com a <span className="text-gradient-gold">Rocha Sales</span>
            </h1>
            <p className="text-xl text-muted-foreground leading-relaxed">
              Estamos prontos para cuidar de você e da sua empresa. 
              Entre em contato e receba sua consultoria gratuita.
            </p>
          </div>
        </div>
      </section>

      {/* Contact Info Grid */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
            {contactInfo.map((info, index) => (
              <div 
                key={index}
                className="group p-6 rounded-xl bg-card hover-lift gold-border text-center"
              >
                <div className={`w-14 h-14 rounded-full bg-gradient-to-br ${info.gradient} flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300`}>
                  <info.icon className="h-7 w-7 text-white" />
                </div>
                <h3 className="text-lg font-bold mb-3 group-hover:text-primary transition-colors">
                  {info.title}
                </h3>
                {info.details.map((detail, idx) => (
                  <p key={idx} className="text-sm text-muted-foreground mb-1">
                    {detail}
                  </p>
                ))}
                {info.link && (
                  <Button 
                    asChild 
                    size="sm" 
                    className="mt-4 bg-green-500 hover:bg-green-600 text-white"
                  >
                    <a href={info.link} target="_blank" rel="noopener noreferrer">
                      <MessageCircle className="mr-2 h-5 w-5" />
                      Abrir WhatsApp
                    </a>
                  </Button>
                )}
              </div>
            ))}
          </div>

          {/* Contact Form OR Success Message */}
          <div className="max-w-4xl mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
              {formSubmittedSuccessfully ? (
                // Mensagem de Sucesso (já implementado)
                <div className="bg-card p-8 rounded-2xl gold-border text-center flex flex-col items-center justify-center min-h-[400px]">
                  <h2 className="text-3xl font-bold mb-4 text-primary">Obrigado por entrar em contato conosco!</h2>
                  <p className="text-lg text-muted-foreground mb-6">Em breve nossos profissionais entrarão em contato.</p>
                  <Button
                    onClick={() => setFormSubmittedSuccessfully(false)} 
                    className="mt-4 bg-primary hover:bg-primary-strong text-primary-foreground"
                    size="lg"
                  >
                    Enviar outra mensagem
                  </Button>
                </div>
              ) : (
                // Formulário de Contato Original
                <div className="bg-card p-8 rounded-2xl gold-border">
                  <h2 className="text-3xl font-bold mb-6">
                    Envie sua <span className="text-gradient-gold">mensagem</span>
                  </h2>
                  
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div>
                      <Label htmlFor="name">Nome Completo *</Label>
                      <Input
                        id="name"
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                        required
                        maxLength={100}
                        className="mt-2"
                        placeholder="Seu nome"
                      />
                    </div>

                    <div>
                      <Label htmlFor="email">E-mail *</Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        value={formData.email}
                        onChange={handleChange}
                        required
                        maxLength={255}
                        className="mt-2"
                        placeholder="seu@email.com"
                      />
                    </div>

                    <div>
                      <Label htmlFor="phone">Telefone *</Label>
                      <Input
                        id="phone"
                        name="phone"
                        type="tel"
                        value={formData.phone}
                        onChange={handleChange}
                        required
                        maxLength={20}
                        className="mt-2"
                        placeholder="(11) 99999-9999"
                      />
                    </div>

                    {/* NOVO CAMPO: Cidade */}
                    <div>
                      <Label htmlFor="city">Cidade *</Label>
                      <Input
                        id="city"
                        name="city"
                        value={formData.city}
                        onChange={handleChange}
                        required
                        maxLength={100}
                        className="mt-2"
                        placeholder="Ex: São Paulo-SP"
                      />
                    </div>
                    
                    <div>
                      <Label htmlFor="message">Mensagem *</Label>
                      <Textarea
                        id="message"
                        name="message"
                        value={formData.message}
                        onChange={handleChange}
                        required
                        maxLength={1000}
                        rows={4}
                        className="mt-2"
                        placeholder="Como podemos ajudar você?"
                      />
                    </div>

                    <Button 
                      type="submit" 
                      disabled={loading}
                      className="w-full bg-primary hover:bg-primary-strong text-primary-foreground"
                      size="lg"
                    >
                      {loading ? 'Enviando...' : 'Enviar Mensagem'}
                      <Send className="ml-2 h-4 w-4" />
                    </Button>
                  </form>
                </div>
              )}

              {/* Map & Quick CTA */}
              <div className="space-y-6">
                <div className="bg-card p-8 rounded-2xl gold-border">
                  <h3 className="text-2xl font-bold mb-4">Prefere WhatsApp?</h3>
                  <p className="text-muted-foreground mb-6">
                    Fale diretamente com um de nossos especialistas agora mesmo!
                  </p>
                  <Button 
                    asChild 
                    className="w-full bg-green-500 hover:bg-green-600 text-white"
                    size="lg"
                  >
                    <a href={WHATSAPP_BASE_URL} target="_blank" rel="noopener noreferrer">
                      <MessageCircle className="mr-2 h-5 w-5" />
                      Falar com Especialista
                    </a>
                  </Button>
                </div>

                {/* Google Maps Embed */}
                <div className="bg-card p-2 rounded-2xl gold-border overflow-hidden">
                  <div className="aspect-video rounded-lg overflow-hidden">
                    <iframe
                      title="Localização Rocha Sales"
                      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.4899784968437!2d-46.569824!3d-23.544289!2m3!1f0!2f0!0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjPCsDMyJzM5LjQiUyA0NsKwMzQnMTEuNCJX!5e0!3m2!1spt-BR!2sbr!4v1234567890"
                      width="100%"
                      height="100%"
                      style={{ border: 0 }}
                      allowFullScreen
                      loading="lazy"
                      referrerPolicy="no-referrer-when-downgrade"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Contato;