import type { Metadata } from "next";
import { notFound } from "next/navigation";
import Link from "next/link";
import { PageHero } from "@/components/site/page-hero";
import { Reveal } from "@/components/site/motion";
import { Icon } from "@/components/site/icon";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { db } from "@/lib/db";
import { CheckCircle2, ArrowRight, Phone, ArrowLeft, Sparkles } from "lucide-react";
import { getSettings } from "@/lib/queries";

export const revalidate = 60;

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const s = await db.service.findUnique({ where: { slug } });
  if (!s) return { title: "Service Not Found" };
  return {
    title: s.metaTitle || s.title,
    description: s.metaDescription || s.shortDescription,
    alternates: { canonical: `/services/${s.slug}` },
    openGraph: { title: s.title, description: s.shortDescription },
  };
}

export default async function ServiceDetailPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const service = await db.service.findUnique({ where: { slug } });
  if (!service || !service.isEnabled) notFound();

  const settings = await getSettings();
  const features = JSON.parse(service.features || "[]") as string[];
  const related = await db.service.findMany({
    where: { isEnabled: true, slug: { not: service.slug } },
    take: 3,
    orderBy: { order: "asc" },
  });

  return (
    <>
      <PageHero
        eyebrow={service.shortDescription.slice(0, 60)}
        title={service.title}
        subtitle={service.shortDescription}
        breadcrumbs={[{ label: "Services", href: "/services" }, { label: service.title }]}
      />

      <section className="py-16 lg:py-24">
        <div className="container-mx grid lg:grid-cols-3 gap-10">
          <div className="lg:col-span-2">
            <Reveal>
              <div className="flex items-center gap-4 mb-8">
                <div className="grid place-items-center size-14 rounded-2xl brand-gradient text-white">
                  <Icon name={service.icon} className="size-7" />
                </div>
                <h2 className="text-2xl font-extrabold">Overview</h2>
              </div>
              <div className="prose prose-lg max-w-none text-muted-foreground leading-relaxed [&_p]:text-muted-foreground [&_h3]:text-foreground">
                {service.description.split("\n").map((p, i) => (
                  <p key={i} className="mb-4">{p}</p>
                ))}
              </div>
            </Reveal>

            {features.length > 0 && (
              <Reveal delay={0.1}>
                <h3 className="mt-12 mb-5 text-xl font-bold flex items-center gap-2">
                  <Sparkles className="size-5 text-[var(--brand-royal)]" /> What's Included
                </h3>
                <div className="grid sm:grid-cols-2 gap-3">
                  {features.map((f) => (
                    <div key={f} className="flex items-start gap-3 p-4 rounded-xl bg-muted/40 border border-border/60">
                      <CheckCircle2 className="size-5 text-[var(--brand-royal)] shrink-0 mt-0.5" />
                      <span className="text-sm font-medium text-foreground/85">{f}</span>
                    </div>
                  ))}
                </div>
              </Reveal>
            )}

            {service.image && (
              <Reveal delay={0.15}>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={service.image} alt={service.title} className="mt-10 w-full rounded-2xl border border-border" />
              </Reveal>
            )}
          </div>

          {/* Sidebar */}
          <div className="lg:col-span-1">
            <div className="sticky top-28 space-y-5">
              <Card className="p-6 rounded-2xl">
                <h3 className="font-bold text-lg">Need this service?</h3>
                <p className="mt-1.5 text-sm text-muted-foreground">Get a free site survey and detailed quotation from our engineering team.</p>
                <Button asChild className="mt-4 w-full brand-gradient text-white">
                  <Link href="/contact">Request a Quote <ArrowRight className="size-4" /></Link>
                </Button>
                <a href={`tel:${settings?.phone ?? "0301-2435144"}`} className="mt-3 flex items-center justify-center gap-2 w-full px-4 py-3 rounded-lg border border-border text-sm font-medium hover:bg-accent transition-colors">
                  <Phone className="size-4" /> Call {settings?.phone ?? "0301-2435144"}
                </a>
              </Card>

              <Card className="p-6 rounded-2xl">
                <h3 className="font-bold mb-3">Other Services</h3>
                <div className="space-y-2">
                  {related.map((r) => (
                    <Link key={r.id} href={`/services/${r.slug}`} className="flex items-center justify-between gap-2 p-3 rounded-lg hover:bg-accent transition-colors group">
                      <div className="flex items-center gap-3">
                        <div className="grid place-items-center size-9 rounded-lg bg-[var(--brand-royal)]/10 text-[var(--brand-royal)]">
                          <Icon name={r.icon} className="size-4" />
                        </div>
                        <span className="text-sm font-medium text-foreground/80 group-hover:text-[var(--brand-royal)]">{r.title}</span>
                      </div>
                      <ArrowRight className="size-4 text-muted-foreground group-hover:text-[var(--brand-royal)]" />
                    </Link>
                  ))}
                </div>
                <Link href="/services" className="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--brand-royal)]">
                  <ArrowLeft className="size-3.5" /> All Services
                </Link>
              </Card>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}