"use client";

import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import { ArrowLeft, ArrowRight, CheckCircle2, ShieldCheck } from "lucide-react";
import InteriorShell from "../../components/InteriorShell";
import { findService, services, type Service } from "@/lib/catalog";

export default function ServiceDetailPage() {
  const params = useParams<{ slug: string }>(); const [catalog,setCatalog]=useState<Service[]>(services); const [service,setService]=useState<Service|undefined>(()=>findService(params.slug));
  useEffect(()=>{fetch("/api/admin/settings").then(r=>r.json()).then(data=>{if(Array.isArray(data.services)){const active=data.services.filter((s:Service)=>s.active!==false).sort((a:Service,b:Service)=>(a.sortOrder??0)-(b.sortOrder??0));setCatalog(active);setService(active.find((s:Service)=>s.slug===params.slug));}}).catch(()=>{});},[params.slug]);
  if (!service) return <InteriorShell>{(lang) => <section className="empty-state shell"><h1>{lang === "ar" ? "الخدمة غير موجودة" : "Service not found"}</h1><a href="/#services">{lang === "ar" ? "العودة للخدمات" : "Back to services"}</a></section>}</InteriorShell>;
  return <InteriorShell>{(lang) => { const ar = lang === "ar"; return <>
    <section className="service-detail-hero"><div className="shell"><span className="service-mark"><ShieldCheck/></span><span className="eyebrow light">POLAND EGYPT / {ar ? "خدماتنا" : "SERVICES"}</span><h1>{service.name[lang]}</h1><p>{service.summary[lang]}</p><a className="gold-button" href="/#request">{ar ? "اطلب الخدمة" : "Request service"}</a></div></section>
    <section className="section shell service-process"><div><span className="eyebrow">{ar ? "منهجية العمل" : "OUR PROCESS"}</span><h2>{ar ? "تنفيذ واضح من المعاينة إلى التسليم" : "A clear path from inspection to handover"}</h2><p>{ar ? "نعمل وفق خطوات قابلة للتوثيق لضمان وضوح نطاق الخدمة وسهولة المتابعة واتخاذ القرار." : "We follow a documented process so the service scope, follow-up and decisions remain clear."}</p></div><ol>{service.steps.map((step, i) => <li key={step.en}><span>0{i+1}</span><div><CheckCircle2/><h3>{step[lang]}</h3></div></li>)}</ol></section>
    <section className="related shell service-related"><span className="eyebrow">{ar ? "خدمات أخرى" : "OTHER SERVICES"}</span><div className="related-grid">{catalog.filter(s => s.slug !== service.slug).slice(0,3).map(item => <a href={`/services/${item.slug}`} key={item.slug}><h3>{item.name[lang]}</h3><p>{item.summary[lang]}</p><strong>{ar ? "عرض الخدمة" : "View service"} {ar ? <ArrowLeft/> : <ArrowRight/>}</strong></a>)}</div></section>
  </>}}</InteriorShell>;
}