"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePageContent } from "@/hooks/usePageContent";
import { useLocale } from "@/contexts/LocaleContext";

type PortfolioProject = {
  id: string;
  title: string;
  category: string;
  coverImage: string | null;
  galleryImages: string[];
  status: string;
  createdAt?: string;
};

type FallbackProject = {
  id: string;
  title: string;
  category: string;
  image: string;
};

const FALLBACK_PROJECTS: FallbackProject[] = [
  {
    id: 'fallback-1',
    title: 'Projeto de Adequação - Coca-Cola',
    category: 'Engenharia Veicular',
    image: 'https://images.unsplash.com/photo-1616401784845-180882ba9ba8?q=80&w=2070&auto=format&fit=crop',
  },
  {
    id: 'fallback-2',
    title: 'Laudo de Guindaste Articulado',
    category: 'Inspeção Técnica',
    image: 'https://images.unsplash.com/photo-1581092335397-9583eb92d232?q=80&w=2070&auto=format&fit=crop',
  },
  {
    id: 'fallback-3',
    title: 'Dispositivo de Içamento Especial',
    category: 'Projeto Mecânico',
    image: 'https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2070&auto=format&fit=crop',
  },
];

export default function Home() {
  const { locale, t } = useLocale();
  const [latestProjects, setLatestProjects] = useState<PortfolioProject[]>([]);
  
  // Busca conteúdo JÁ TRADUZIDO do banco (sem tradução em tempo real!)
  const { content, loading } = usePageContent('home', locale);

  // Usar conteúdo do banco ou fallback
  const hero = content?.hero || {
    title: 'Engenharia de Excelência para Seus Projetos',
    subtitle: 'Soluções completas em engenharia veicular, mecânica e segurança do trabalho com mais de 15 anos de experiência.',
    buttonText: 'Conheça Nossos Serviços'
  };

  const features = content?.features || {
    pretitle: 'Por que nos escolher',
    title: 'Nossos Diferenciais',
    items: [
      { icon: 'ri-shield-star-line', title: 'Qualidade Garantida', description: 'Processos certificados e equipe altamente qualificada.' },
      { icon: 'ri-settings-4-line', title: 'Soluções Personalizadas', description: 'Atendimento sob medida para suas necessidades.' },
      { icon: 'ri-truck-line', title: 'Especialização Veicular', description: 'Expertise em engenharia automotiva.' }
    ] as Array<{ icon: string; title: string; description: string }>
  };

  const services = content?.services || {
    pretitle: 'Nossos Serviços',
    title: 'O Que Fazemos',
    items: [
      { icon: 'ri-draft-line', title: 'Projetos Técnicos', description: 'Desenvolvimento de projetos de engenharia.' },
      { icon: 'ri-file-paper-2-line', title: 'Laudos e Perícias', description: 'Emissão de laudos técnicos.' },
      { icon: 'ri-alert-line', title: 'Segurança do Trabalho', description: 'Implementação de normas de segurança.' },
      { icon: 'ri-truck-fill', title: 'Engenharia Veicular', description: 'Modificações e adaptações de veículos.' }
    ] as Array<{ icon: string; title: string; description: string }>
  };

  const about = content?.about || {
    pretitle: 'Conheça a OCCTO',
    title: 'Sobre Nós',
    description: 'Com mais de 15 anos de experiência, a OCCTO Engenharia se consolidou como referência em soluções de engenharia.',
    highlights: [
      'Mais de 500 clientes atendidos',
      'Equipe técnica qualificada',
      'Parceiro oficial de grandes empresas'
    ] as string[]
  };

  const testimonials = content?.testimonials || {
    pretitle: 'Depoimentos',
    title: 'O Que Dizem Nossos Clientes',
    items: [
      { name: 'Ricardo Mendes', role: 'Gerente de Frota', text: 'Excelente trabalho!' },
      { name: 'Fernanda Costa', role: 'Diretora de Operações', text: 'Parceria de confiança.' },
      { name: 'Paulo Oliveira', role: 'Engenheiro Chefe', text: 'Conhecimento técnico incomparável.' }
    ] as Array<{ name: string; role: string; text: string }>
  };

  const cta = content?.cta || {
    title: 'Pronto para tirar seu projeto do papel?',
    text: 'Entre em contato com nossa equipe de especialistas.',
    button: 'Fale Conosco'
  };

  // Prefix para links baseado no locale
  const prefix = locale === 'pt' ? '' : `/${locale}`;

  useEffect(() => {
    let isMounted = true;
    const controller = new AbortController();

    const fetchProjects = async () => {
      try {
        const response = await fetch('/api/projects', {
          method: 'GET',
          cache: 'no-store',
          credentials: 'same-origin',
          signal: controller.signal,
        });

        if (!response.ok) {
          throw new Error(`Falha ao buscar projetos mais recentes (status ${response.status})`);
        }

        const data = await response.json();

        if (isMounted && Array.isArray(data)) {
          const publishedProjects = data
            .filter((project: PortfolioProject) => project.status !== 'Rascunho')
            .sort((a, b) => {
              const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
              const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
              return dateB - dateA;
            })
            .slice(0, 3);

          setLatestProjects(publishedProjects);
        }
      } catch (err) {
        if ((err as Error).name !== 'AbortError') {
          console.error('Erro ao buscar projetos recentes:', err);
        }
      }
    };

    fetchProjects();

    return () => {
      isMounted = false;
      controller.abort();
    };
  }, []);

  return (
    <main className="bg-white dark:bg-secondary transition-colors duration-300">
      {/* Hero Section */}
      <section className="relative h-[600px] flex items-center bg-secondary text-white overflow-hidden">
        <div className="absolute inset-0 bg-black/60 z-10"></div>
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581094288338-2314dddb7ece?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-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-5 py-2 mb-8 hover:bg-white/20 transition-colors cursor-default">
              <i className="ri-verified-badge-fill text-primary text-xl"></i>
              <span className="text-sm font-bold tracking-wider uppercase text-white">{t('home.officialProvider')} <span className="text-primary">Coca-Cola</span></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 mb-8 max-w-2xl">
              {hero.subtitle}
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Link href={`${prefix}/contato`} className="px-8 py-4 bg-primary text-white rounded-lg font-bold hover-primary transition-colors text-center">
                {hero.buttonText}
              </Link>
              <Link href={`${prefix}/projetos`} className="px-8 py-4 border-2 border-white text-white rounded-lg font-bold hover:bg-white hover:text-secondary transition-colors text-center">
                {t('home.viewSolutions')}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-white dark:bg-secondary">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-primary font-bold tracking-wider uppercase mb-2">{features.pretitle}</h2>
            <h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{features.title}</h3>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {features.items.map((feature: { icon: string; title: string; description: string }, index: number) => (
              <div key={index} className="p-8 bg-gray-50 dark:bg-white/5 rounded-xl hover:shadow-lg transition-shadow border border-gray-100 dark:border-white/10 group">
                <div className="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
                  <i className={`${feature.icon} text-3xl`}></i>
                </div>
                <h3 className="text-2xl font-bold font-headline mb-4 text-secondary dark:text-white">{feature.title}</h3>
                <p className="text-gray-600 dark:text-gray-400">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-20 bg-gray-50 dark:bg-[#121212]">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-primary font-bold tracking-wider uppercase mb-2">{services.pretitle}</h2>
            <h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{services.title}</h3>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {services.items.map((service: { icon: string; title: string; description: string }, index: number) => (
              <div key={index} className="bg-white dark:bg-secondary p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow border-b-4 border-transparent hover:border-primary">
                <i className={`${service.icon} text-4xl text-primary mb-4 block`}></i>
                <h4 className="text-xl font-bold font-headline mb-2 text-secondary dark:text-white">{service.title}</h4>
                <p className="text-gray-600 dark:text-gray-400 text-sm">{service.description}</p>
              </div>
            ))}
          </div>
          <div className="text-center mt-12">
            <Link href={`${prefix}/servicos`} className="text-primary font-bold hover:text-secondary dark:hover:text-white transition-colors inline-flex items-center gap-2">
              {t('home.viewAllServices')} <i className="ri-arrow-right-line"></i>
            </Link>
          </div>
        </div>
      </section>

      {/* About Preview */}
      <section className="py-20 bg-secondary text-white">
        <div className="container mx-auto px-4 flex flex-col md:flex-row items-center gap-12">
          <div className="w-full md:w-1/2 hidden md:block">
            <div className="relative h-[400px] w-full rounded-xl overflow-hidden">
               <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center"></div>
            </div>
          </div>
          <div className="w-full md:w-1/2">
            <h2 className="text-primary font-bold tracking-wider uppercase mb-2">{about.pretitle}</h2>
            <h3 className="text-4xl font-bold font-headline mb-6">{about.title}</h3>
            <p className="text-gray-400 mb-6 text-lg">{about.description}</p>
            <ul className="space-y-4 mb-8">
              {about.highlights.map((highlight: string, index: number) => (
                <li key={index} className="flex items-center gap-3">
                  <i className="ri-check-double-line text-primary text-xl"></i>
                  <span>{highlight}</span>
                </li>
              ))}
            </ul>
            <Link href={`${prefix}/sobre`} className="text-primary font-bold hover:text-white transition-colors flex items-center gap-2">
              {t('home.knowExpertise')} <i className="ri-arrow-right-line"></i>
            </Link>
          </div>
        </div>
      </section>

      {/* Latest Projects Section */}
      <section className="py-20 bg-white dark:bg-secondary">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4">
            <div>
              <h2 className="text-primary font-bold tracking-wider uppercase mb-2">{t('home.portfolio')}</h2>
              <h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{t('home.recentProjects')}</h3>
            </div>
            <Link href={`${prefix}/projetos`} className="px-6 py-3 border border-secondary dark:border-white text-secondary dark:text-white rounded-lg font-bold hover:bg-secondary hover:text-white dark:hover:bg-white dark:hover:text-secondary transition-colors">
              {t('home.viewAllProjects')}
            </Link>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {(latestProjects.length > 0
              ? latestProjects.map((project) => ({
                  id: project.id,
                  title: project.title,
                  category: project.category,
                  image: project.coverImage || project.galleryImages?.[0] || FALLBACK_PROJECTS[0].image,
                }))
              : FALLBACK_PROJECTS
            ).map((project) => (
              <Link key={project.id} href={`${prefix}/projetos/${project.id}`} className="group relative overflow-hidden rounded-xl h-[400px] cursor-pointer block">
                <div className="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style={{ backgroundImage: `url('${project.image}')` }}></div>
                <div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div>
                <div className="absolute bottom-0 left-0 p-8 w-full transform translate-y-4 group-hover:translate-y-0 transition-transform">
                  <span className="text-primary font-bold text-sm uppercase tracking-wider mb-2 block">{project.category}</span>
                  <h3 className="text-2xl font-bold font-headline text-white mb-2">{project.title}</h3>
                  <div className="h-0 group-hover:h-auto overflow-hidden transition-all">
                    <span className="text-white/80 text-sm flex items-center gap-2 mt-4">
                      {t('home.viewDetails')} <i className="ri-arrow-right-line"></i>
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-20 bg-gray-50 dark:bg-[#121212]">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-primary font-bold tracking-wider uppercase mb-2">{testimonials.pretitle}</h2>
            <h3 className="text-4xl font-bold font-headline text-secondary dark:text-white">{testimonials.title}</h3>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.items.map((testimonial: { name: string; role: string; text: string }, index: number) => (
              <div key={index} className="bg-white dark:bg-secondary p-8 rounded-xl shadow-sm border border-gray-100 dark:border-white/10 relative">
                <i className="ri-double-quotes-l text-4xl text-primary/20 absolute top-6 left-6"></i>
                <p className="text-gray-600 dark:text-gray-300 mb-6 relative z-10 pt-6 italic">"{testimonial.text}"</p>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-gray-200 dark:bg-white/10 rounded-full flex items-center justify-center text-gray-400">
                    <i className="ri-user-line text-xl"></i>
                  </div>
                  <div>
                    <h4 className="font-bold font-headline text-secondary dark:text-white">{testimonial.name}</h4>
                    <p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">{testimonial.role}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 bg-primary">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl font-bold font-headline text-white mb-6">{cta.title}</h2>
          <p className="text-white/90 text-xl mb-8 max-w-2xl mx-auto">{cta.text}</p>
          <Link href={`${prefix}/contato`} className="inline-block px-10 py-4 bg-white text-primary rounded-lg font-bold hover:bg-gray-100 transition-colors shadow-lg">
            {cta.button}
          </Link>
        </div>
      </section>
    </main>
  );
}