import { notFound } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import type { Metadata } from "next";
import {
  ChevronRight,
  ChevronLeft,
  CheckCircle2,
  Download,
  MapPin,
  Calendar,
  User,
  Globe,
  ArrowLeft,
  HardHat,
  Anchor,
  Radar,
  Droplets,
  Ship,
  Fuel,
  Cylinder,
  type LucideProps,
} from "lucide-react";
import CallToAction from "@/components/CallToAction";
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import FadeIn from "@/components/animations/FadeIn";
import ServiceImageGallery from "@/components/ServiceImageGallery";
import {
  getProjectDetail,
  getProjectsPageProjects,
} from "@/services/pages/public/projects";

export const revalidate = 0;

type IconComponent = React.ComponentType<LucideProps>;

const ICON_MAP: Record<string, IconComponent> = {
  Anchor,
  Radar,
  Droplets,
  Ship,
  Fuel,
  HardHat,
  Cylinder,
};

function resolveIcon(name: string | null): IconComponent {
  return (name && ICON_MAP[name]) ? ICON_MAP[name] : HardHat;
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const project = await getProjectDetail(slug);

  if (!project) {
    return {
      title: "Project | Petro-Base Group",
      description: "Project case study by Petro-Base Group",
    };
  }

  return {
    title: `${project.title} | Projects | Petro-Base Group`,
    description: project.summary ?? `Project case study: ${project.title}`,
    openGraph: {
      title: project.title,
      description: project.summary ?? undefined,
      url: `https://petrobasegroup.com/projects/${project.slug}`,
      siteName: "Petro-Base Group",
      images: project.image_url
        ? [{ url: project.image_url, width: 1200, height: 630, alt: project.title }]
        : [],
      type: "article",
    },
  };
}

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

  const [project, { data: allProjects }] = await Promise.all([
    getProjectDetail(slug),
    getProjectsPageProjects(),
  ]);

  if (!project) notFound();

  const Icon = resolveIcon(project.icon);

  const currentIndex = allProjects.findIndex((p) => p.slug === slug);
  const prevProject = currentIndex > 0 ? allProjects[currentIndex - 1] : null;
  const nextProject =
    currentIndex !== -1 && currentIndex < allProjects.length - 1
      ? allProjects[currentIndex + 1]
      : null;

  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">
          {project.image_url ? (
            <Image
              src={project.image_url}
              alt={project.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">
                Project Case Study
              </span>
            </div>
            <h1 className="text-3xl md:text-5xl font-bold text-primary-foreground mb-4 tracking-tight max-w-3xl">
              {project.title}
            </h1>
            <div className="flex flex-wrap items-center gap-5 text-sm text-primary-foreground/70">
              {project.client && (
                <span className="flex items-center gap-1.5">
                  <User size={13} className="text-accent" />
                  {project.client}
                </span>
              )}
              {project.location && (
                <span className="flex items-center gap-1.5">
                  <MapPin size={13} className="text-accent" />
                  {project.location}
                </span>
              )}
              {project.year && (
                <span className="flex items-center gap-1.5">
                  <Calendar size={13} className="text-accent" />
                  {project.year}
                </span>
              )}
              {(project.regions ?? []).length > 0 && (
                <span className="flex items-center gap-1.5">
                  <Globe size={13} className="text-accent" />
                  {(project.regions ?? []).map((r) => r.name).join(", ")}
                </span>
              )}
            </div>
          </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="/projects" />}>
                  Projects
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>{project.title}</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">Project Overview</span>
              </div>
              {project.summary && (
                <p className="text-muted-foreground leading-relaxed text-lg mb-8">
                  {project.summary}
                </p>
              )}
              {/* Key metadata cards */}
              <div className="grid sm:grid-cols-2 gap-4">
                {project.client && (
                  <div className="p-4 bg-secondary rounded-sm border border-border">
                    <div className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1">
                      Client
                    </div>
                    <div className="font-semibold text-foreground">{project.client}</div>
                  </div>
                )}
                {project.location && (
                  <div className="p-4 bg-secondary rounded-sm border border-border">
                    <div className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1">
                      Location
                    </div>
                    <div className="font-semibold text-foreground">{project.location}</div>
                  </div>
                )}
                {project.year && (
                  <div className="p-4 bg-secondary rounded-sm border border-border">
                    <div className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1">
                      Year
                    </div>
                    <div className="font-semibold text-foreground">{project.year}</div>
                  </div>
                )}
                {(project.regions ?? []).length > 0 && (
                  <div className="p-4 bg-secondary rounded-sm border border-border">
                    <div className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1">
                      Region(s)
                    </div>
                    <div className="font-semibold text-foreground">
                      {(project.regions ?? []).map((r) => r.name).join(", ")}
                    </div>
                  </div>
                )}
              </div>
            </FadeIn>

            <FadeIn direction="right" x={20} className="lg:col-span-2 relative">
              {project.image_url ? (
                <>
                  <div className="overflow-hidden rounded-sm">
                    <Image
                      src={project.image_url}
                      alt={project.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" />
                </>
              ) : (
                <div className="w-full h-[300px] bg-secondary rounded-sm flex items-center justify-center">
                  <HardHat size={64} className="text-primary/20" />
                </div>
              )}
            </FadeIn>
          </div>

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

      {/* Scope of Work */}
      {project.scope.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">Scope of Work</span>
            </div>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
              {project.scope.map((item, i) => (
                <FadeIn
                  key={i}
                  delay={i * 0.05}
                  className="flex items-start gap-3 p-5 petro-card"
                >
                  <CheckCircle2 size={16} className="text-accent mt-0.5 shrink-0" />
                  <span className="text-sm text-foreground leading-relaxed">{item}</span>
                </FadeIn>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Technologies Applied */}
      {project.technologies.length > 0 && (
        <section className="petro-section bg-background">
          <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">Technologies Applied</span>
            </div>
            <div className="flex flex-wrap gap-3">
              {project.technologies.map((tech, i) => (
                <FadeIn key={i} delay={i * 0.04}>
                  <span className="px-5 py-2.5 bg-secondary border border-border text-sm font-semibold text-foreground rounded-sm">
                    {tech}
                  </span>
                </FadeIn>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Key Outcome */}
      {project.outcome && (
        <section className="petro-section bg-primary">
          <div className="petro-container">
            <FadeIn>
              <div className="flex items-center gap-4 mb-8">
                <div className="w-12 h-[2px] bg-accent" />
                <span className="petro-section-label-light">Key Outcome</span>
              </div>
              <blockquote className="relative pl-8 border-l-4 border-accent max-w-3xl">
                <p className="text-xl md:text-2xl text-primary-foreground/90 leading-relaxed font-light italic">
                  {project.outcome}
                </p>
              </blockquote>
            </FadeIn>
          </div>
        </section>
      )}

      {/* Document Download */}
      {project.document_url && (
        <section className="bg-card border-y border-border">
          <div className="petro-container py-10">
            <FadeIn>
              <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
                <div>
                  <h3 className="text-sm font-bold uppercase tracking-widest text-primary mb-1">
                    Project Documentation
                  </h3>
                  <p className="text-muted-foreground text-sm">
                    Download the full project report and technical documentation.
                  </p>
                </div>
                <a
                  href={project.document_url}
                  download
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-accent-foreground text-sm font-bold uppercase tracking-wider rounded-sm hover:bg-accent/90 transition-colors whitespace-nowrap shrink-0"
                >
                  <Download size={15} />
                  Download Report
                </a>
              </div>
            </FadeIn>
          </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 gap-4">
            {prevProject ? (
              <Link
                href={`/projects/${prevProject.slug}`}
                className="flex items-center gap-3 group"
              >
                <ChevronLeft
                  size={20}
                  className="text-muted-foreground group-hover:text-primary transition-colors shrink-0"
                />
                <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 line-clamp-1">
                    {prevProject.title}
                  </span>
                </div>
              </Link>
            ) : (
              <div />
            )}

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

            {nextProject ? (
              <Link
                href={`/projects/${nextProject.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 line-clamp-1">
                    {nextProject.title}
                  </span>
                </div>
                <ChevronRight
                  size={20}
                  className="text-muted-foreground group-hover:text-primary transition-colors shrink-0"
                />
              </Link>
            ) : (
              <div />
            )}
          </div>
        </div>
      </section>

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

export default ProjectDetailPage;