"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { T } from "@/components/TranslatedText";

type Service = {
  id: string;
  title: string;
  icon: string;
  shortDescription: string | null;
  fullDescription: string | null;
  active: boolean;
  order: number;
};

const FALLBACK_SERVICES = [
  {
    icon: "ri-draft-line",
    title: "Projetos Técnicos",
    shortDescription: "Desenvolvimento de projetos de engenharia mecânica, estrutural e veicular com alta precisão e conformidade normativa.",
  },
  {
    icon: "ri-truck-line",
    title: "Engenharia Veicular",
    shortDescription: "Expertise em modificações, adaptações e homologações veiculares com foco em segurança e conformidade.",
  },
  {
    icon: "ri-file-paper-2-line",
    title: "Laudos e Perícias",
    shortDescription: "Emissão de laudos técnicos e pareceres periciais para equipamentos, estruturas e veículos.",
  },
  {
    icon: "ri-tools-fill",
    title: "Consultoria Técnica",
    shortDescription: "Assessoria especializada para adequação de frotas, planos de Rigging e supervisão de manutenção de equipamentos de carga.",
  }
];

export default function ServicosPage() {
  const [services, setServices] = useState<Service[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchServices() {
      try {
        const res = await fetch('/api/services');
        if (res.ok) {
          const data = await res.json();
          // Filtrar apenas serviços ativos e ordenar
          const activeServices = data
            .filter((s: Service) => s.active)
            .sort((a: Service, b: Service) => a.order - b.order);
          setServices(activeServices);
        }
      } catch (error) {
        console.error('Erro ao carregar serviços:', error);
      } finally {
        setLoading(false);
      }
    }
    fetchServices();
  }, []);

  const displayServices = services.length > 0 ? services : FALLBACK_SERVICES;

  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-black/60 z-10"></div>
        <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 className="container mx-auto px-4 relative z-20">
          <h1 className="text-5xl font-bold font-headline mb-4"><T>Nossos Serviços</T></h1>
          <p className="text-xl text-gray-300 max-w-2xl">
            <T>Soluções completas em engenharia para atender às necessidades da sua empresa</T>
          </p>
        </div>
      </section>

      {/* Services List */}
      <section className="py-20 bg-gray-50 dark:bg-[#121212]">
        <div className="container mx-auto px-4">
          {loading ? (
            <div className="flex items-center justify-center py-20">
              <i className="ri-loader-4-line animate-spin text-4xl text-primary"></i>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {displayServices.map((service, index) => (
                <div key={'id' in service ? service.id : index} className="group bg-white dark:bg-secondary rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-white/10 flex flex-col relative">
                  <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                    <i className={`${service.icon} text-9xl text-primary`}></i>
                  </div>
                  
                  <div className="p-8 relative z-10">
                    <div className="flex justify-between items-start mb-6">
                      <div className="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors duration-300 shadow-sm">
                        <i className={`${service.icon} text-3xl`}></i>
                      </div>
                      <span className="text-5xl font-bold text-gray-100 dark:text-white/10 font-headline select-none">0{index + 1}</span>
                    </div>
                    
                    <h3 className="text-2xl font-bold font-headline text-secondary dark:text-white mb-4 group-hover:text-primary transition-colors">
                      <T>{service.title}</T>
                    </h3>
                    <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
                      <T>{service.shortDescription || ''}</T>
                    </p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 bg-primary text-white text-center">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold font-headline mb-6"><T>Precisa de um serviço especializado?</T></h2>
          <Link href="/contato" className="inline-block px-8 py-3 bg-white text-primary rounded-lg font-bold hover:bg-gray-100 transition-colors">
            <T>Solicite um Orçamento</T>
          </Link>
        </div>
      </section>
    </main>
  );
}