"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { FileText } from "lucide-react";
import Header from "@/sections/Header";
import { LegalFooter } from "./LegalFooter";

const LEGAL_DOCS = [
  { label: "Terms & Conditions", href: "/terms" },
  { label: "Privacy Policy", href: "/privacy" },
  { label: "Cookies Policy", href: "/cookies" },
  { label: "Refund Policy", href: "/refund" },
] as const;

export type LegalSection = { id: string; label: string };

type LegalPageLayoutProps = {
  title: string;
  effectiveDate?: string;
  sections: LegalSection[];
  children: React.ReactNode;
};

export function LegalPageLayout({
  title,
  effectiveDate,
  sections,
  children,
}: LegalPageLayoutProps) {
  const pathname = usePathname();

  return (
    <div className="legal-page relative flex min-h-screen flex-col bg-white dark:bg-navy">
      <Header />

      <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-8 px-4 pt-24 pb-12 sm:px-6 lg:flex-row lg:gap-12 lg:pt-28 lg:pb-16">
        {/* Sidebar - sticky on desktop, theme-aware */}
        <aside className="order-2 shrink-0 lg:order-1 lg:w-56 xl:w-64">
          <div className="sticky top-24 space-y-8 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-5 shadow-sm dark:shadow-none backdrop-blur-sm">
            <div>
              <p className="legal-sidebar-label mb-3 text-xs font-semibold uppercase tracking-wider">
                Legal documents
              </p>
              <nav className="space-y-0.5">
                {LEGAL_DOCS.map((doc) => {
                  const isActive = pathname === doc.href;
                  return (
                    <Link
                      key={doc.href}
                      href={doc.href}
                      className={`legal-sidebar-link flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition ${
                        isActive
                          ? "legal-sidebar-link-active bg-[#428B4D]/15 hover:bg-[#428B4D]/15 dark:hover:bg-[#428B4D]/15"
                          : "hover:bg-gray-100 dark:hover:bg-white/10"
                      }`}
                    >
                      <FileText size={14} className="shrink-0 opacity-70" />
                      {doc.label}
                    </Link>
                  );
                })}
              </nav>
            </div>

            {sections.length > 0 && (
              <div>
                <p className="legal-sidebar-label mb-3 text-xs font-semibold uppercase tracking-wider">
                  On this page
                </p>
                <nav className="space-y-0.5">
                  {sections.map((section) => (
                    <a
                      key={section.id}
                      href={`#${section.id}`}
                      className="legal-sidebar-link block rounded-lg px-3 py-2 text-sm transition hover:bg-gray-100 dark:hover:bg-white/10"
                    >
                      {section.label}
                    </a>
                  ))}
                </nav>
              </div>
            )}
          </div>
        </aside>

        {/* Main content - theme-aware card */}
        <main className="min-w-0 flex-1 order-1 lg:order-2">
          <article className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 px-6 py-8 shadow-sm sm:px-8 sm:py-10 lg:px-10 backdrop-blur-sm">
            <div className="mb-8">
              <Link
                href="/"
                className="legal-back-link inline-flex items-center text-sm font-medium hover:underline"
              >
                ← Back to Home
              </Link>
            </div>
            <h1 className="legal-page-title mb-2 text-3xl font-bold tracking-tight sm:text-4xl">
              {title}
            </h1>
            {effectiveDate && (
              <p className="legal-page-date mb-10 text-sm">
                {effectiveDate}
              </p>
            )}
            <div className="legal-prose prose prose-slate dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-a:no-underline hover:prose-a:underline">
              {children}
            </div>
          </article>
        </main>
      </div>

      <LegalFooter />
    </div>
  );
}