"use client";

import Link from "next/link";
import { useParams } from "next/navigation";
import { getCaseStudyBySlug } from "@/lib/data/mockCaseStudies";
import type { CourseLevel } from "@/types/course";

const levelBadgeClass = (level: CourseLevel) => {
  if (level === "Beginner") return "bg-emerald-100 text-emerald-900 border border-emerald-200";
  if (level === "Intermediate") return "bg-sky-100 text-sky-900 border border-sky-200";
  return "bg-violet-100 text-violet-900 border border-violet-200";
};

export default function CaseStudyDetailPage() {
  const params = useParams<{ slug: string }>();
  const caseStudy = getCaseStudyBySlug(params.slug);

  if (!caseStudy) {
    return (
      <div className="acve-panel p-6">
        <h1 className="text-2xl font-bold text-slate-900">Case study not found</h1>
        <p className="mt-2 text-slate-600">The requested case study slug does not exist in mock data.</p>
        <Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/case-studies">
          Back to case studies
        </Link>
      </div>
    );
  }

  return (
    <article className="acve-page">
      <header className="acve-panel acve-section-base">
        <p className="text-sm font-semibold uppercase tracking-wide text-slate-500">{caseStudy.citation} ({caseStudy.year})</p>
        <h1 className="mt-2 text-4xl font-semibold leading-tight text-[#1f2b3a] md:text-5xl">{caseStudy.title}</h1>
        <div className="mt-3 flex flex-wrap items-center gap-2">
          <span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">
            Categoria: {caseStudy.category}
          </span>
          <span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">
            Dificultad: {caseStudy.difficulty}
          </span>
          <span className={`rounded-full px-3 py-1 text-xs font-semibold ${levelBadgeClass(caseStudy.level)}`}>Level: {caseStudy.level}</span>
        </div>
      </header>

      <section className="grid gap-4 lg:grid-cols-[1.35fr_0.8fr]">
        <div className="acve-panel p-5">
          <h2 className="text-2xl font-semibold text-[#232b39]">Resumen del caso</h2>
          <p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{caseStudy.summaryEs}</p>

          <h3 className="mt-5 text-lg font-semibold text-[#232b39]">Resultado Juridico</h3>
          <p className="mt-2 rounded-lg border border-slate-200 bg-white px-3 py-3 text-sm leading-relaxed text-slate-700">
            {caseStudy.legalOutcomeEs}
          </p>
        </div>

        <aside className="acve-panel p-5">
          <h2 className="text-lg font-semibold text-[#232b39]">Terminos Juridicos Fundamentales</h2>
          <div className="mt-3 space-y-2">
            {caseStudy.keyTerms.map((term) => (
              <div key={term.term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-3">
                <p className="text-base font-semibold text-brand">{term.term}</p>
                <p className="mt-1 text-sm text-slate-600">{term.definitionEs}</p>
              </div>
            ))}
          </div>
          <p className="mt-4 inline-flex rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
            {caseStudy.quizPrompt}
          </p>
        </aside>
      </section>

      <section className="border-t border-slate-200 pt-1">
        <Link className="acve-button-secondary inline-flex px-4 py-2 text-sm font-semibold hover:bg-brand-soft" href="/case-studies">
          Back to Case Library
        </Link>
      </section>
    </article>
  );
}