"use client";

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

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

export default function ServicosPage() {
  const { t, locale } = useLocale();
  const prefix = locale === 'pt' ? '' : `/${locale}`;
  const [services, setServices] = useState<Service[]>([]);
  const [loading, setLoading] = useState(true);

  // Fallback services usando traduções
  const fallbackServices = [
    {
      icon: "ri-draft-line",
      title: t('services.technical.title'),
      shortDescription: t('services.technical.description'),
    },
    {
      icon: "ri-truck-line",
      title: t('services.vehicular.title'),
      shortDescription: t('services.vehicular.description'),
    },
    {
      icon: "ri-file-paper-2-line",
      title: t('services.reports.title'),
      shortDescription: t('services.reports.description'),
    },
    {
      icon: "ri-tools-fill",
      title: t('services.consulting.title'),
      shortDescription: t('services.consulting.description'),
    }
  ];

  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 : fallbackServices;

  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('services.hero.title')}</h1>
          <p className="text-xl text-gray-300 max-w-2xl">
            {t('services.hero.subtitle')}
          </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">
                      {service.title}
                    </h3>
                    <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
                      {service.shortDescription || ''}
                    </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('services.cta.title')}</h2>
          <Link href={`${prefix}/contato`} className="inline-block px-8 py-3 bg-white text-primary rounded-lg font-bold hover:bg-gray-100 transition-colors">
            {t('services.cta.button')}
          </Link>
        </div>
      </section>
    </main>
  );
}