import prisma from "@/lib/db";
export const revalidate = 5;
import { stripHtml, getDirectDriveLink } from "@/lib/text";
import { notFound } from "next/navigation";
import Image from "next/image";
import { ArrowLeft, Zap } from "lucide-react";
import Link from "next/link";
import QuoteForm from "@/components/QuoteForm";
import { Metadata } from "next";

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
    const { id } = await params;
    const service = await (prisma as any).service.findUnique({ where: { id } });
    if (!service) return { title: "Service non trouvé" };
    const cleanDesc = stripHtml(service.description).slice(0, 160);
    return {
        title: `${service.title} | Sergio Hounkpessode`,
        description: cleanDesc,
        openGraph: {
            title: service.title,
            description: cleanDesc,
            images: service.images?.[0] ? [getDirectDriveLink(service.images[0])] : [],
        }
    };
}

export default async function ServiceDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const service = await (prisma as any).service.findUnique({
        where: { id }
    });

    if (!service) notFound();

    return (
        <div style={{ paddingTop: "8rem", paddingBottom: "6rem" }}>
            <div className="container">
                <Link href="/services" className="back-link" style={{ display: "inline-flex", alignItems: "center", gap: "0.75rem", color: "var(--primary)", fontWeight: 800, marginBottom: "3rem", textDecoration: "none", fontSize: "0.95rem" }}>
                    <ArrowLeft size={20} /> RETOUR AUX SERVICES
                </Link>

                <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: "5rem" }} className="detail-grid">
                    {/* Details Column */}
                    <div>
                        <div style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 1.25rem", borderRadius: "var(--radius-full)", background: "var(--primary-light)", color: "var(--primary)", fontWeight: 800, fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: "2rem", border: "1px solid var(--primary-border)" }}>
                            <Zap size={14} /> Expertise Technique
                        </div>
                        <h1 style={{ fontSize: "clamp(2.5rem, 5vw, 4rem)", fontWeight: 900, marginBottom: "2.5rem", letterSpacing: "-0.03em", lineHeight: 1.1 }}>{service.title}</h1>
                        <div
                            className="service-desc rich-content"
                            style={{ color: "var(--muted-foreground)", fontSize: "1.1rem", lineHeight: 1.8, marginBottom: "3rem", wordBreak: "break-word", overflowWrap: "anywhere" }}
                            dangerouslySetInnerHTML={{ __html: service.description }}
                        />

                        {/* Gallery */}
                        {service.images && service.images.length > 0 && (
                            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "1rem", marginBottom: "3rem" }}>
                                {service.images.map((img: string, idx: number) => (
                                    <div key={idx} style={{ position: "relative", aspectRatio: "4/3", borderRadius: "1.25rem", overflow: "hidden", border: "1px solid var(--border)" }}>
                                        <Image src={getDirectDriveLink(img)} alt={`${service.title} - ${idx + 1}`} fill style={{ objectFit: "cover" }} />
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>

                    {/* Form Column */}
                    <div>
                        <div style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: "2.5rem", padding: "3.5rem", position: "sticky", top: "8rem", boxShadow: "var(--card-shadow-hover)" }}>
                            <h2 style={{ fontSize: "1.8rem", fontWeight: 900, marginBottom: "0.75rem" }}>Demande de devis</h2>
                            <p style={{ color: "var(--muted-foreground)", fontSize: "1rem", lineHeight: 1.6, marginBottom: "2.5rem" }}>Remplissez ce formulaire pour recevoir une proposition adaptée à votre besoin industriel.</p>

                            <QuoteForm serviceId={service.id} />
                        </div>
                    </div>
                </div>
            </div>
            <style>{`@media(min-width:1000px){.detail-grid{grid-template-columns:1.5fr 1fr !important;}}`}</style>
        </div>
    );
}