import { notFound } from 'next/navigation';
import { setRequestLocale } from 'next-intl/server';
import { routing } from '@/i18n/routing';
import ScrollReveal from '@/components/ui/ScrollReveal';
import Button from '@/components/ui/Button';
import CornerBracket from '@/components/icons/CornerBracket';
import Chip from '@/components/ui/Chip';

// ─── Types ────────────────────────────────────────────────────────────────────

interface Project {
  title: string;
  subtitle: string;
  description: string;
  challenge: string;
  approach: string;
  outcome: string;
  techStack: string[];
  tags: string[];
}

// ─── Data (will come from Payload CMS) ────────────────────────────────────────

const PROJECTS: Record<string, Project> = {
  'monaco-ocean': {
    title: 'Monaco Ocean Protection Challenge',
    subtitle: 'AI-Powered Judging & Analytics Platform',
    description:
      "A comprehensive judging and analytics system with advanced AI jury integration for one of the Mediterranean's most prestigious conservation events.",
    challenge:
      'The Monaco Ocean Protection Challenge needed a modern platform to manage submissions, coordinate judges across time zones, and provide AI-assisted evaluation of conservation proposals — all while maintaining the prestige and security expected of a Monaco institution.',
    approach:
      'We built a custom platform from the ground up using Next.js and a private PostgreSQL infrastructure. The AI jury module uses natural language processing to pre-screen submissions and generate summary reports, while human judges retain full control over final decisions.',
    outcome:
      "The platform processed over 200 submissions in its first season, reducing judge workload by 40% through AI-assisted pre-screening. The client praised the system's reliability and the elegance of its interface.",
    techStack: ['Next.js', 'PostgreSQL', 'OpenAI API', 'Docker', 'Private Cloud'],
    tags: ['AI Integration', 'Platform'],
  },
  'port-nimara': {
    title: 'Port Nimara',
    subtitle: 'Maritime Digital Hub',
    description: 'Scalable digital hub for maritime logistics.',
    challenge:
      'Port Nimara needed a modern digital presence that could serve as both a marketing website and an operational hub for berth inquiries, event management, and partner communications.',
    approach:
      'We designed and developed a performant Nuxt.js application with a headless CMS for content management, integrated with their existing maritime scheduling systems via custom API middleware.',
    outcome:
      'The new platform increased online berth inquiries by 3x and provided the port authority with real-time content management capabilities they previously lacked.',
    techStack: ['Nuxt.js', 'Directus CMS', 'Node.js', 'Docker'],
    tags: ['Website', 'Infrastructure'],
  },
  'port-amador': {
    title: 'Port Amador',
    subtitle: 'Premium Nautical Experience',
    description: 'Premium digital experience for elite nautical services.',
    challenge:
      'Port Amador required a luxury-grade digital experience that matched the exclusivity of their nautical services, with multi-language support and seamless booking integration.',
    approach:
      'We crafted a bespoke website with cinematic imagery, smooth animations, and an integrated booking flow. The site was built on modern web technologies with a focus on performance and SEO for the competitive luxury maritime market.',
    outcome:
      "The redesigned platform elevated Port Amador's digital presence to match their premium positioning, with a 60% improvement in page load times and significantly increased organic traffic.",
    techStack: ['Next.js', 'Tailwind CSS', 'Framer Motion', 'Vercel'],
    tags: ['Website', 'Infrastructure'],
  },
};

// ─── Static Generation ────────────────────────────────────────────────────────

export function generateStaticParams() {
  const slugs = Object.keys(PROJECTS);
  const allParams: { locale: string; slug: string }[] = [];

  for (const locale of routing.locales) {
    for (const slug of slugs) {
      allParams.push({ locale, slug });
    }
  }

  return allParams;
}

// ─── Sub-components ───────────────────────────────────────────────────────────

function ContentSection({
  label,
  index,
  heading,
  body,
}: {
  label: string;
  index: string;
  heading: string;
  body: string;
}) {
  return (
    <ScrollReveal variant="fadeUp" className="flex flex-col gap-4">
      <div className="flex items-center gap-3">
        <span className="label-md text-outline/50">{index}</span>
        <span className="label-md text-primary">{label}</span>
      </div>
      <h3 className="font-serif text-2xl md:text-3xl font-semibold text-on-surface leading-snug tracking-[-0.02em]">
        {heading}
      </h3>
      <p className="text-outline leading-relaxed text-base md:text-[1.0625rem]">{body}</p>
    </ScrollReveal>
  );
}

// ─── Page ─────────────────────────────────────────────────────────────────────

type Props = {
  params: Promise<{ locale: string; slug: string }>;
};

export default async function CaseStudyPage({ params }: Props) {
  const { locale, slug } = await params;
  setRequestLocale(locale);

  const project = PROJECTS[slug];
  if (!project) notFound();

  return (
    <main>

      {/* ── Hero ── */}
      <section className="bg-surface-low py-24">
        <div className="container mx-auto px-6">
          <div className="max-w-3xl mx-auto flex flex-col items-center text-center gap-6">

            {/* Tags */}
            <ScrollReveal variant="fadeIn">
              <div className="flex flex-wrap items-center justify-center gap-2">
                {project.tags.map((tag) => (
                  <Chip key={tag} size="md">
                    {tag}
                  </Chip>
                ))}
              </div>
            </ScrollReveal>

            {/* Title */}
            <ScrollReveal variant="fadeUp" delay={0.08}>
              <h1 className="font-serif font-semibold text-on-surface text-4xl md:text-5xl lg:text-[3.25rem] leading-[1.1] tracking-[-0.02em]">
                {project.title}
              </h1>
            </ScrollReveal>

            {/* Subtitle */}
            <ScrollReveal variant="fadeUp" delay={0.16}>
              <p className="label-md text-primary tracking-widest">
                {project.subtitle}
              </p>
            </ScrollReveal>

            {/* Description */}
            <ScrollReveal variant="fadeUp" delay={0.22}>
              <p className="text-outline text-lg leading-relaxed max-w-2xl">
                {project.description}
              </p>
            </ScrollReveal>

          </div>
        </div>
      </section>

      {/* ── Case Study Content ── */}
      <section className="bg-surface py-20 md:py-28">
        <div className="container mx-auto px-6">
          <div className="max-w-3xl mx-auto">

            {/* Decorative corner brackets framing the content area */}
            <ScrollReveal variant="fadeIn" className="relative">
              <div className="absolute -top-6 -left-6 md:-left-10" aria-hidden="true">
                <CornerBracket size={36} position="top-left" color="var(--color-primary)" />
              </div>
              <div className="absolute -top-6 -right-6 md:-right-10" aria-hidden="true">
                <CornerBracket size={36} position="top-right" color="var(--color-primary)" />
              </div>
            </ScrollReveal>

            {/* Sections */}
            <div className="flex flex-col gap-16 md:gap-20">

              <ContentSection
                label="The Challenge"
                index="01"
                heading="The problem we set out to solve"
                body={project.challenge}
              />

              {/* Divider */}
              <ScrollReveal variant="fadeIn">
                <div
                  className="w-full h-px"
                  style={{
                    background:
                      'linear-gradient(to right, transparent, var(--color-outline-variant), transparent)',
                  }}
                  aria-hidden="true"
                />
              </ScrollReveal>

              <ContentSection
                label="Our Approach"
                index="02"
                heading="How we thought about it"
                body={project.approach}
              />

              {/* Divider */}
              <ScrollReveal variant="fadeIn">
                <div
                  className="w-full h-px"
                  style={{
                    background:
                      'linear-gradient(to right, transparent, var(--color-outline-variant), transparent)',
                  }}
                  aria-hidden="true"
                />
              </ScrollReveal>

              <ContentSection
                label="The Outcome"
                index="03"
                heading="What we delivered"
                body={project.outcome}
              />

            </div>

          </div>
        </div>
      </section>

      {/* ── Tech Stack ── */}
      <section className="bg-surface-low py-12">
        <div className="container mx-auto px-6">
          <div className="max-w-3xl mx-auto">
            <ScrollReveal variant="fadeUp" className="flex flex-col gap-5">
              <p className="label-md text-outline">Built with</p>
              <div className="flex flex-wrap gap-2">
                {project.techStack.map((tech) => (
                  <span
                    key={tech}
                    className="inline-flex items-center px-4 py-2 rounded-xl bg-surface-high text-on-surface text-sm font-medium shadow-card"
                  >
                    {tech}
                  </span>
                ))}
              </div>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="bg-surface py-20 md:py-24">
        <div className="container mx-auto px-6">
          <ScrollReveal variant="fadeUp">
            <div className="max-w-3xl mx-auto flex flex-col items-center text-center gap-8">

              {/* Decorative corner bracket */}
              <div className="relative">
                <div className="absolute -top-3 -left-3" aria-hidden="true">
                  <CornerBracket size={24} position="top-left" color="var(--color-teal)" />
                </div>
                <div className="absolute -top-3 -right-3" aria-hidden="true">
                  <CornerBracket size={24} position="top-right" color="var(--color-teal)" />
                </div>
                <p className="label-md text-primary px-4">Next Step</p>
              </div>

              <h2 className="font-serif font-semibold text-on-surface text-3xl md:text-4xl leading-[1.1] tracking-[-0.02em]">
                Ready to build your own landmark?
              </h2>

              <p className="text-outline text-lg leading-relaxed max-w-xl">
                Every project we take on is a collaboration built on trust, precision, and a shared
                belief that great digital work is never accidental.
              </p>

              <Button variant="primary" size="lg" arrow href="/#configure">
                Start your project
              </Button>

            </div>
          </ScrollReveal>
        </div>
      </section>

    </main>
  );
}
