"use client";

import Link from "next/link";
import { useState } from "react";
import { mockCaseStudies } from "@/lib/data/mockCaseStudies";

export default function CaseStudiesPage() {
  const [activeSlug, setActiveSlug] = useState(mockCaseStudies[0]?.slug ?? "");
  const activeCase = mockCaseStudies.find((item) => item.slug === activeSlug) ?? mockCaseStudies[0];

  return (
    <div className="space-y-7">
      <section className="text-center">
        <p className="acve-pill mx-auto mb-4 w-fit">Case Studies</p>
        <h1 className="acve-heading text-4xl md:text-6xl">Learn from Landmark Cases</h1>
        <p className="mx-auto mt-3 max-w-4xl text-lg text-slate-600 md:text-3xl">
          Real English law cases explained with key legal terms and practical insights.
        </p>
      </section>

      <section className="grid gap-5 lg:grid-cols-[0.9fr_1.8fr]">
        <div className="space-y-3">
          {mockCaseStudies.map((caseStudy) => {
            const isActive = caseStudy.slug === activeCase.slug;
            return (
              <button
                key={caseStudy.slug}
                className={`w-full rounded-2xl border p-4 text-left transition ${
                  isActive ? "border-brand bg-white shadow-sm" : "border-slate-300 bg-white hover:border-slate-400"
                }`}
                onClick={() => setActiveSlug(caseStudy.slug)}
                type="button"
              >
                <h2 className="text-xl text-[#232b39] md:text-3xl">{caseStudy.title}</h2>
                <p className="mt-1 text-base text-slate-500 md:text-2xl">
                  [{caseStudy.year}] {caseStudy.citation}
                </p>
                <div className="mt-3 flex items-center gap-2 text-sm">
                  <span className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{caseStudy.topic}</span>
                  <span className="rounded-full bg-accent px-3 py-1 font-semibold text-white">{caseStudy.level}</span>
                </div>
              </button>
            );
          })}
        </div>

        <article className="acve-panel p-6">
          <div className="mb-5 flex flex-wrap items-start justify-between gap-3">
            <div>
              <h2 className="text-3xl text-[#202936] md:text-6xl">{activeCase.title}</h2>
              <p className="mt-2 text-lg text-slate-500 md:text-3xl">
                {activeCase.citation} | {activeCase.year}
              </p>
            </div>
            <div className="space-y-2 text-right text-sm">
              <p className="rounded-full bg-accent px-3 py-1 font-semibold text-white">{activeCase.level}</p>
              <p className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{activeCase.topic}</p>
            </div>
          </div>

          <section className="border-t border-slate-200 pt-5">
            <h3 className="text-4xl text-[#232b39]">Case Summary</h3>
            <p className="mt-3 text-lg leading-relaxed text-slate-700 md:text-3xl">{activeCase.summary}</p>
          </section>

          <section className="mt-6">
            <h3 className="mb-3 text-4xl text-[#232b39]">Key Legal Terms Explained</h3>
            <div className="space-y-3">
              {activeCase.keyTerms.map((term) => (
                <div key={term} className="rounded-xl border-l-4 border-accent bg-[#faf8f8] p-4">
                  <p className="text-xl font-semibold text-brand md:text-3xl">{term}</p>
                  <p className="mt-1 text-base text-slate-600 md:text-2xl">Term explanation will be expanded in phase 2 content.</p>
                </div>
              ))}
            </div>
          </section>

          <Link className="acve-button-secondary mt-6 inline-flex px-4 py-2 text-sm font-semibold hover:bg-brand-soft" href={`/case-studies/${activeCase.slug}`}>
            Open detail page
          </Link>
        </article>
      </section>
    </div>
  );
}