import { notFound } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import {
  ChevronRight,
  ChevronLeft,
  CheckCircle2,
  ExternalLink,
  ArrowLeft,
} from "lucide-react";
import CallToAction from "@/components/CallToAction";
import ServiceQuoteButton from "@/components/ServiceQuoteButton";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import FadeIn from "@/components/animations/FadeIn";
import { SECTOR_ICONS } from "@/lib/sectorIconMap";
import { Wrench } from "lucide-react";
import ServiceImageGallery from "@/components/ServiceImageGallery";
import {
  getServiceDetail,
  getServicesPageServices,
  type ServiceDetailRigSpec,
  type ServiceDetailTechLink,
} from "@/services/pages/public/services";

export const revalidate = 0;

const RigSpecsTable = ({ specs }: { specs: ServiceDetailRigSpec[] }) => (
  <div className="mt-10 p-6 bg-secondary border border-border rounded-sm">
    <h4 className="text-sm font-bold uppercase tracking-wider text-primary mb-4">
      Full Specifications
    </h4>
    <div className="border border-border rounded-sm overflow-hidden">
      <Table>
        <TableHeader>
          <TableRow className="bg-primary/5">
            <TableHead className="text-xs font-bold uppercase tracking-wider text-primary">
              Component
            </TableHead>
            <TableHead className="text-xs font-bold uppercase tracking-wider text-primary">
              Specification
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {specs.map((row) => (
            <TableRow key={row.id}>
              <TableCell className="font-semibold text-foreground text-sm">
                {row.component}
              </TableCell>
              <TableCell className="text-muted-foreground text-sm">
                {row.spec}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  </div>
);

const TechCrossLinks = ({ links }: { links: ServiceDetailTechLink[] }) => (
  <div className="mt-10 p-6 bg-secondary/50 border border-border rounded-sm">
    <h4 className="text-sm font-bold uppercase tracking-wider text-primary mb-4">
      Technologies Used
    </h4>
    <div className="grid sm:grid-cols-2 gap-3">
      {links.map((t) => (
        <Link
          key={t.id}
          href={`/technologies#${t.id}`}
          className="flex items-start gap-2 group p-3 rounded-sm hover:bg-background transition-colors"
        >
          <CheckCircle2
            size={14}
            className="text-accent mt-0.5 flex-shrink-0"
          />
          <div>
            <span className="text-sm font-semibold text-foreground group-hover:text-primary transition-colors">
              {t.name}
            </span>
            <span className="text-xs text-muted-foreground block">{t.desc}</span>
            <span className="text-[10px] font-bold uppercase tracking-widest text-accent flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
              Learn more <ExternalLink size={10} />
            </span>
          </div>
        </Link>
      ))}
    </div>
  </div>
);

const ServiceDetailPage = async ({
  params,
}: {
  params: Promise<{ slug: string }>;
}) => {
  const { slug } = await params;

  const [service, { data: allServices }] = await Promise.all([
    getServiceDetail(slug),
    getServicesPageServices(),
  ]);

  if (!service) notFound();

  const Icon =
    (service.icon ? SECTOR_ICONS[service.icon]?.component : null) ?? Wrench;

  const currentIndex = allServices.findIndex((s) => s.slug === slug);
  const prevService = currentIndex > 0 ? allServices[currentIndex - 1] : null;
  const nextService =
    currentIndex !== -1 && currentIndex < allServices.length - 1
      ? allServices[currentIndex + 1]
      : null;

  const shortTitle = service.title.split(",")[0].split("&")[0].trim();

  return (
    <div className="bg-background text-foreground">
      {/* Hero */}
      <section className="relative h-[50vh] min-h-[520px] flex items-end overflow-hidden">
        <div className="absolute inset-0">
          {service.image_url ? (
            <Image
              src={service.image_url}
              alt={service.title}
              width={1920}
              height={1080}
              className="w-full h-full object-cover"
              priority
            />
          ) : (
            <div className="w-full h-full bg-primary" />
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-primary via-primary/80 to-primary/30" />
        </div>
        <div className="relative z-10 petro-container pb-12 w-full">
          <FadeIn>
            <div className="inline-flex items-center gap-3 mb-4 p-3 bg-primary-foreground/10 backdrop-blur-sm rounded-sm">
              <Icon size={24} className="text-accent" />
              <span className="text-xs font-bold uppercase tracking-widest text-accent">
                {shortTitle}
              </span>
            </div>
            <h1 className="text-3xl md:text-5xl font-bold text-primary-foreground mb-4 tracking-tight max-w-3xl">
              {service.title}
            </h1>
            <p className="text-primary-foreground/70 max-w-2xl text-lg">
              {service.short_desc}
            </p>
          </FadeIn>
        </div>
      </section>

      {/* Breadcrumb */}
      <div className="bg-card border-b border-border">
        <div className="petro-container py-4">
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbLink render={<Link href="/services" />}>
                  Services
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>{shortTitle}</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      </div>

      {/* Overview */}
      <section className="petro-section bg-background">
        <div className="petro-container">
          <div className="grid lg:grid-cols-5 gap-12 items-start">
            <FadeIn direction="left" x={20} className="lg:col-span-3">
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-[2px] bg-accent" />
                <span className="petro-section-label">Overview</span>
              </div>
              <p className="text-muted-foreground leading-relaxed text-lg mb-8">
                {service.overview}
              </p>
              <ServiceQuoteButton />
            </FadeIn>
            <FadeIn direction="right" x={20} className="lg:col-span-2 relative">
              <div className="overflow-hidden rounded-sm">
                {service.image_url && (
                  <Image
                    src={service.image_url}
                    alt={service.title}
                    width={600}
                    height={400}
                    className="w-full h-[300px] object-cover"
                    loading="lazy"
                  />
                )}
              </div>
              <div className="absolute -bottom-4 -right-4 w-24 h-24 border-2 border-accent rounded-sm" />
            </FadeIn>
          </div>

          {/* Image gallery */}
          {service.images.length > 0 && (
            <div className="mt-14">
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-[2px] bg-accent" />
                <span className="petro-section-label">Services Gallery</span>
              </div>
              <ServiceImageGallery images={service.images} title={service.title} />
            </div>
          )}
        </div>
      </section>

      {/* Sub-services */}
      {service.sub_services.length > 0 && (
        <section className="petro-section bg-secondary">
          <div className="petro-container">
            <div className="flex items-center gap-4 mb-10">
              <div className="w-12 h-[2px] bg-accent" />
              <span className="petro-section-label">Service Capabilities</span>
            </div>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {service.sub_services.map((sub, si) => (
                <FadeIn key={sub.id} delay={si * 0.08} className="petro-card p-6">
                  <h4 className="text-sm font-bold uppercase tracking-wider text-primary mb-4 border-b border-border pb-3">
                    {sub.heading}
                  </h4>
                  <div className="space-y-2.5">
                    {sub.items.map((item, ii) => (
                      <div
                        key={ii}
                        className="flex items-start gap-2 text-sm text-muted-foreground"
                      >
                        <CheckCircle2
                          size={14}
                          className="text-accent mt-0.5 flex-shrink-0"
                        />
                        <span>{item}</span>
                      </div>
                    ))}
                  </div>
                </FadeIn>
              ))}
            </div>

            {service.has_rig_specs && service.rig_specs.length > 0 && (
              <RigSpecsTable specs={service.rig_specs} />
            )}
            {service.has_tech_links && service.tech_links.length > 0 && (
              <TechCrossLinks links={service.tech_links} />
            )}
          </div>
        </section>
      )}

      {/* Sibling Navigation */}
      <section className="bg-card border-t border-border">
        <div className="petro-container py-8">
          <div className="flex items-center justify-between">
            {prevService ? (
              <Link
                href={`/services/${prevService.slug}`}
                className="flex items-center gap-3 group"
              >
                <ChevronLeft
                  size={20}
                  className="text-muted-foreground group-hover:text-primary transition-colors"
                />
                <div>
                  <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground block">
                    Previous
                  </span>
                  <span className="text-sm font-semibold text-foreground group-hover:text-primary transition-colors">
                    {(prevService.title ?? prevService.slug)
                      .split(",")[0]
                      .split("&")[0]
                      .trim()}
                  </span>
                </div>
              </Link>
            ) : (
              <div />
            )}

            <Link
              href="/services"
              className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-muted-foreground hover:text-primary transition-colors"
            >
              <ArrowLeft size={14} />
              All Services
            </Link>

            {nextService ? (
              <Link
                href={`/services/${nextService.slug}`}
                className="flex items-center gap-3 group text-right"
              >
                <div>
                  <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground block">
                    Next
                  </span>
                  <span className="text-sm font-semibold text-foreground group-hover:text-primary transition-colors">
                    {(nextService.title ?? nextService.slug)
                      .split(",")[0]
                      .split("&")[0]
                      .trim()}
                  </span>
                </div>
                <ChevronRight
                  size={20}
                  className="text-muted-foreground group-hover:text-primary transition-colors"
                />
              </Link>
            ) : (
              <div />
            )}
          </div>
        </div>
      </section>

      <CallToAction />
    </div>
  );
};

export default ServiceDetailPage;