"use client";

import { useToast } from "@/contexts/ToastContext";
import { useState, useEffect } from "react";
import { useTranslatedContent, T } from "@/components/TranslatedText";

interface ContactInfo {
  icon: string;
  title: string;
  description: string;
  link: string;
  linkText: string;
}

interface ContactContent {
  hero: {
    pretitle: string;
    title: string;
    subtitle: string;
  };
  info: {
    title: string;
    subtitle: string;
    description: string;
    items: ContactInfo[];
  };
}

interface SettingsData {
  address?: string | null;
  phone?: string | null;
  email?: string | null;
  whatsapp?: string | null;
}

export default function ContatoPage() {
  const { success, error: showError } = useToast();
  const [content, setContent] = useState<ContactContent | null>(null);
  const [settings, setSettings] = useState<SettingsData>({});
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    subject: '',
    message: ''
  });

  // Traduzir conteúdo do banco automaticamente
  const { translatedContent } = useTranslatedContent(content);

  useEffect(() => {
    fetchContent();
    fetchSettings();
  }, []);

  const fetchContent = async () => {
    try {
      const response = await fetch('/api/pages/contact');
      if (response.ok) {
        const data = await response.json();
        if (data.content) {
          setContent(data.content);
        }
      }
    } catch (error) {
      console.error('Erro ao carregar conteúdo:', error);
    } finally {
      setLoading(false);
    }
  };

  const fetchSettings = async () => {
    try {
      const response = await fetch('/api/settings');
      if (response.ok) {
        const data = await response.json();
        setSettings({
          address: data.address,
          phone: data.phone,
          email: data.email,
          whatsapp: data.whatsapp
        });
      }
    } catch (error) {
      console.error('Erro ao carregar configurações:', error);
    }
  };

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

    try {
      const response = await fetch('/api/messages', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });

      if (!response.ok) throw new Error('Erro ao enviar mensagem');

      // Limpar formulário
      setFormData({
        name: '',
        phone: '',
        email: '',
        subject: '',
        message: ''
      });

      success('Mensagem enviada com sucesso! Entraremos em contato em breve.');
    } catch (error) {
      showError('Erro ao enviar mensagem. Tente novamente.');
    } finally {
      setSubmitting(false);
    }
  };

  // Valores padrão caso não tenha conteúdo salvo
  const hero = translatedContent?.hero || {
    pretitle: 'Fale Conosco',
    title: 'Entre em Contato',
    subtitle: 'Estamos prontos para atender sua empresa com soluções de engenharia de alta qualidade'
  };

  const info = translatedContent?.info || {
    title: 'Informações',
    subtitle: 'Como nos encontrar',
    description: 'Estamos à disposição para atender sua empresa com a excelência técnica que seu projeto exige.',
    items: [] as ContactInfo[]
  };

  // Montar items dinamicamente baseado nas configurações
  const contactItems: ContactInfo[] = [];
  
  if (settings.whatsapp || settings.phone) {
    const phoneNumber = settings.whatsapp || settings.phone;
    contactItems.push({
      icon: 'ri-whatsapp-line',
      title: 'Telefone',
      description: 'Atendimento de segunda a sexta, das 8h às 18h',
      link: settings.whatsapp ? `https://wa.me/55${settings.whatsapp.replace(/\D/g, '')}` : `tel:${phoneNumber?.replace(/\D/g, '')}`,
      linkText: phoneNumber || ''
    });
  }
  
  if (settings.email) {
    contactItems.push({
      icon: 'ri-mail-send-line',
      title: 'E-mail',
      description: 'Responderemos em até 24 horas úteis',
      link: `mailto:${settings.email}`,
      linkText: settings.email
    });
  }
  
  if (settings.address) {
    contactItems.push({
      icon: 'ri-map-pin-line',
      title: 'Endereço',
      description: settings.address,
      link: `https://maps.google.com/maps?q=${encodeURIComponent(settings.address)}`,
      linkText: 'Ver no mapa'
    });
  }

  // Usar items do CMS se existir, senão usar os dinâmicos
  const displayItems = info.items?.length > 0 ? info.items : contactItems;

  return (
    <main className="bg-white dark:bg-secondary transition-colors duration-300">
      {/* Hero Section */}
      <section className="relative h-[400px] flex items-center bg-secondary text-white overflow-hidden">
        <div className="absolute inset-0 bg-linear-to-r from-black/80 to-black/40 z-10"></div>
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center"></div>
        <div className="container mx-auto px-4 relative z-20">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-2 bg-primary/20 backdrop-blur-sm border border-primary/30 rounded-full px-4 py-1 mb-6">
              <span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
              <span className="text-sm font-bold text-primary uppercase tracking-wider">{hero.pretitle}</span>
            </div>
            <h1 className="text-5xl md:text-6xl font-bold font-headline mb-6 leading-tight">{hero.title}</h1>
            <p className="text-xl text-gray-300 max-w-2xl leading-relaxed">
              {hero.subtitle}
            </p>
          </div>
        </div>
      </section>

      <section className="py-20 bg-white dark:bg-secondary relative">
        {/* Decorative Elements */}
        <div className="absolute top-0 right-0 w-1/3 h-full bg-gray-50 dark:bg-white/5 -z-10 hidden lg:block"></div>

        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20">
            {/* Informações de Contato */}
            <div className="lg:col-span-5 space-y-12">
              <div>
                <h2 className="text-primary font-bold tracking-wider uppercase mb-3">{info.title}</h2>
                <h3 className="text-3xl md:text-4xl font-bold font-headline text-secondary dark:text-white mb-6">{info.subtitle}</h3>
                <p className="text-gray-600 dark:text-gray-400 text-lg leading-relaxed">
                  {info.description}
                </p>
              </div>
              
              <div className="space-y-6">
                {displayItems.length > 0 ? (
                  displayItems.map((item, index) => (
                    <div key={index} className="group bg-gray-50 dark:bg-white/5 p-6 rounded-2xl border border-gray-100 dark:border-white/10 hover:border-primary/50 transition-colors">
                      <div className="flex items-start gap-5">
                        <div className="w-14 h-14 bg-white dark:bg-white/10 rounded-xl flex items-center justify-center text-primary shadow-sm group-hover:scale-110 transition-transform duration-300">
                          <i className={`${item.icon} text-3xl`}></i>
                        </div>
                        <div>
                          <h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-2">{item.title}</h4>
                          <p className="text-gray-600 dark:text-gray-400 mb-3 text-sm whitespace-pre-line">{item.description}</p>
                          <a href={item.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all cursor-pointer">
                            {item.linkText} <i className="ri-arrow-right-line"></i>
                          </a>
                        </div>
                      </div>
                    </div>
                  ))
                ) : (
                  <div className="text-center text-gray-500 dark:text-gray-400 py-8">
                    <i className="ri-information-line text-4xl mb-2 block"></i>
                    <p>Informações de contato não configuradas</p>
                  </div>
                )}
              </div>
            </div>

            {/* Formulário */}
            <div className="lg:col-span-7">
              <div className="bg-white dark:bg-secondary p-8 md:p-10 rounded-3xl shadow-xl border border-gray-100 dark:border-white/10 relative overflow-hidden">
                <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-bl-full -mr-10 -mt-10"></div>
                
                <h3 className="text-2xl font-bold font-headline text-secondary dark:text-white mb-8 relative z-10"><T>Envie uma Mensagem</T></h3>
                
                <form onSubmit={handleSubmit} className="flex flex-col gap-6 relative z-10">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="group">
                      <label htmlFor="nome" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors"><T>Nome</T></label>
                      <div className="relative">
                        <i className="ri-user-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-primary transition-colors"></i>
                        <input 
                          type="text" 
                          id="nome" 
                          required
                          value={formData.name}
                          onChange={(e) => setFormData({...formData, name: e.target.value})}
                          className="w-full pl-11 pr-4 py-3.5 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" 
                          placeholder="Seu nome completo" 
                        />
                      </div>
                    </div>
                    <div className="group">
                      <label htmlFor="telefone" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors"><T>Telefone</T></label>
                      <div className="relative">
                        <i className="ri-phone-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-primary transition-colors"></i>
                        <input 
                          type="tel" 
                          id="telefone" 
                          value={formData.phone}
                          onChange={(e) => setFormData({...formData, phone: e.target.value})}
                          className="w-full pl-11 pr-4 py-3.5 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" 
                          placeholder="(00) 00000-0000" 
                        />
                      </div>
                    </div>
                  </div>
                  
                  <div className="group">
                    <label htmlFor="email" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors"><T>E-mail</T></label>
                    <div className="relative">
                      <i className="ri-mail-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-primary transition-colors"></i>
                      <input 
                        type="email" 
                        id="email" 
                        required
                        value={formData.email}
                        onChange={(e) => setFormData({...formData, email: e.target.value})}
                        className="w-full pl-11 pr-4 py-3.5 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" 
                        placeholder="seu@email.com" 
                      />
                    </div>
                  </div>

                  <div className="group">
                    <label htmlFor="assunto" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors"><T>Assunto</T></label>
                    <div className="relative">
                      <i className="ri-file-list-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-primary transition-colors"></i>
                      <select 
                        id="assunto" 
                        value={formData.subject}
                        onChange={(e) => setFormData({...formData, subject: e.target.value})}
                        className="w-full pl-11 pr-10 py-3.5 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all appearance-none cursor-pointer"
                      >
                        <option value="">Selecione um assunto</option>
                        <option value="orcamento">Solicitar Orçamento</option>
                        <option value="duvida">Dúvida Técnica</option>
                        <option value="parceria">Proposta de Parceria</option>
                        <option value="trabalhe">Outro Assunto</option>
                      </select>
                      <i className="ri-arrow-down-s-line absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                    </div>
                  </div>

                  <div className="group">
                    <label htmlFor="mensagem" className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 group-focus-within:text-primary transition-colors"><T>Mensagem</T></label>
                    <div className="relative">
                      <i className="ri-message-2-line absolute left-4 top-6 text-gray-400 group-focus-within:text-primary transition-colors"></i>
                      <textarea 
                        id="mensagem" 
                        required
                        value={formData.message}
                        onChange={(e) => setFormData({...formData, message: e.target.value})}
                        className="w-full pl-11 pr-4 py-3.5 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl h-40 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all resize-none" 
                        placeholder="Descreva como podemos ajudá-lo..."
                      ></textarea>
                    </div>
                  </div>

                  <button 
                    type="submit" 
                    disabled={submitting}
                    className="mt-4 w-full bg-primary text-white py-4 rounded-xl font-bold hover-primary transition-all shadow-lg hover:shadow-primary/30 flex items-center justify-center gap-2 group disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {submitting ? (
                      <>
                        <i className="ri-loader-4-line animate-spin"></i>
                        <span><T>Enviando...</T></span>
                      </>
                    ) : (
                      <>
                        <span><T>Enviar Mensagem</T></span>
                        <i className="ri-send-plane-fill group-hover:translate-x-1 transition-transform"></i>
                      </>
                    )}
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Map Section */}
      <section className="h-[400px] w-full bg-gray-200 dark:bg-white/5 relative grayscale hover:grayscale-0 transition-all duration-700">
        <iframe 
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3741.447687667888!2d-40.29799692398269!3d-20.32313498115656!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xb817d0a5b5b5b5%3A0x5b5b5b5b5b5b5b5b!2sAv.%20Nossa%20Sra.%20da%20Penha%2C%20Vit%C3%B3ria%20-%20ES!5e0!3m2!1spt-BR!2sbr!4v1700000000000!5m2!1spt-BR!2sbr" 
          width="100%" 
          height="100%" 
          style={{ border: 0 }} 
          allowFullScreen 
          loading="lazy" 
          referrerPolicy="no-referrer-when-downgrade"
          className="absolute inset-0"
        ></iframe>
        <div className="absolute inset-0 bg-primary/10 pointer-events-none"></div>
      </section>
    </main>
  );
}