import { Children, cloneElement, isValidElement, type ReactNode } from 'react';
import Link from 'next/link';
import Breadcrumbs from './Breadcrumbs';

export interface LegalSectionLink {
  id: string;
  label: string;
}

interface LegalDocumentLayoutProps {
  title: string;
  eyebrow: string;
  description: string;
  updatedAt?: string;
  sections: LegalSectionLink[];
  children: ReactNode;
}

const documents = [
  { href: '/privacy', label: 'Ochrana osobních údajů' },
  { href: '/terms', label: 'Obchodní podmínky' },
  { href: '/rights', label: 'Vyhrazená práva' },
];

const LegalDocumentLayout: React.FC<LegalDocumentLayoutProps> = ({
  title,
  eyebrow,
  description,
  updatedAt,
  sections,
  children,
}) => {
  const enhancedChildren = Children.map(children, (child, index) => {
    if (!isValidElement<{ id?: string }>(child)) return child;
    return cloneElement(child, { id: sections[index]?.id });
  });

  return (
    <div className="min-h-screen overflow-hidden bg-luxury-dark text-luxury-light">
      <header className="relative border-b border-luxury-gold/15 px-4 pb-12 pt-32 sm:px-6 sm:pb-16 sm:pt-40 md:pt-52 lg:px-8">
        <div className="pointer-events-none absolute inset-0" aria-hidden="true">
          <div className="absolute left-1/2 top-12 h-72 w-72 -translate-x-1/2 rounded-full bg-luxury-gold/[0.07] blur-3xl sm:h-96 sm:w-96" />
          <div className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-luxury-gold/40 to-transparent" />
        </div>

        <div className="relative mx-auto max-w-6xl">
          <Breadcrumbs items={[{ name: 'Domů', href: '/' }, { name: title }]} />
          <div className="max-w-4xl">
            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.24em] text-luxury-gold/75 sm:text-sm">
              {eyebrow}
            </p>
            <h1 className="max-w-4xl font-aptos text-4xl font-bold uppercase leading-[0.96] text-luxury-gold sm:text-5xl md:text-6xl lg:text-7xl">
              {title}
            </h1>
            <p className="mt-6 max-w-2xl text-sm leading-7 text-luxury-light/65 sm:text-base md:text-lg">
              {description}
            </p>
            {updatedAt && (
              <p className="mt-5 inline-flex items-center gap-2 rounded-full border border-luxury-gold/20 bg-luxury-gold/[0.06] px-3.5 py-2 text-xs text-luxury-light/60">
                <span className="h-1.5 w-1.5 rounded-full bg-luxury-gold" aria-hidden="true" />
                Platné od {updatedAt}
              </p>
            )}
          </div>
        </div>
      </header>

      <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
        <nav aria-label="Právní dokumenty" className="mb-8 grid grid-cols-1 gap-2 sm:grid-cols-3 lg:mb-12">
          {documents.map((document) => {
            const active = document.label === title;
            return (
              <Link
                key={document.href}
                href={document.href}
                aria-current={active ? 'page' : undefined}
                className={`rounded-xl border px-4 py-3 text-center text-sm font-semibold transition-colors ${
                  active
                    ? 'border-luxury-gold/60 bg-luxury-gold/15 text-luxury-gold'
                    : 'border-luxury-gold/15 bg-white/[0.025] text-luxury-light/65 hover:border-luxury-gold/35 hover:text-luxury-gold'
                }`}
              >
                {document.label}
              </Link>
            );
          })}
        </nav>

        <div className="lg:grid lg:grid-cols-[15rem_minmax(0,1fr)] lg:items-start lg:gap-10 xl:grid-cols-[17rem_minmax(0,1fr)] xl:gap-14">
          <aside className="hidden lg:sticky lg:top-32 lg:block">
            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-luxury-gold/65">Obsah dokumentu</p>
            <nav aria-label="Obsah dokumentu" className="border-l border-luxury-gold/20">
              {sections.map((section) => (
                <a
                  key={section.id}
                  href={`#${section.id}`}
                  className="block border-l border-transparent py-2.5 pl-4 text-sm leading-5 text-luxury-light/55 transition-colors hover:border-luxury-gold hover:text-luxury-gold"
                >
                  {section.label}
                </a>
              ))}
            </nav>
          </aside>

          <div className="min-w-0">
            <nav aria-label="Obsah dokumentu" className="-mx-4 mb-6 flex gap-2 overflow-x-auto px-4 pb-2 lg:hidden">
              {sections.map((section, index) => (
                <a
                  key={section.id}
                  href={`#${section.id}`}
                  className="shrink-0 rounded-full border border-luxury-gold/20 bg-luxury-gold/[0.06] px-3.5 py-2 text-xs text-luxury-light/65"
                >
                  {index + 1}. {section.label.replace(/^(?:[IVX]+|\d+)\.\s*/, '')}
                </a>
              ))}
            </nav>

            <article className="legal-document overflow-hidden rounded-2xl border border-luxury-gold/15 bg-white/[0.025] px-5 shadow-2xl shadow-black/10 sm:px-8 md:px-10">
              {enhancedChildren}
            </article>

            <div className="mt-8 rounded-2xl border border-luxury-gold/20 bg-luxury-gold/[0.055] p-5 sm:flex sm:items-center sm:justify-between sm:gap-6 sm:p-6">
              <div>
                <p className="text-sm font-semibold text-luxury-gold">Potřebujete něco upřesnit?</p>
                <p className="mt-1 text-sm leading-6 text-luxury-light/55">Ozvěte se nám, rádi vám pomůžeme s dotazem k objednávce nebo nákupu.</p>
              </div>
              <a
                href="mailto:info@vystrikejto.cz"
                className="mt-4 inline-flex rounded-full bg-luxury-gold px-5 py-2.5 text-sm font-bold text-luxury-dark transition-transform hover:-translate-y-0.5 sm:mt-0"
              >
                info@vystrikejto.cz
              </a>
            </div>
          </div>
        </div>
      </div>

      <style jsx global>{`
        .legal-document > section {
          scroll-margin-top: 8.5rem;
          border-bottom: 1px solid rgba(212, 175, 55, 0.14);
          padding: 2rem 0;
        }
        .legal-document > section:last-child {
          border-bottom: 0;
        }
        .legal-document h2 {
          font-size: clamp(1.2rem, 2.4vw, 1.6rem);
          line-height: 1.25;
          letter-spacing: -0.01em;
        }
        .legal-document p,
        .legal-document li {
          color: rgba(245, 239, 226, 0.7);
          font-size: clamp(0.92rem, 1.4vw, 1rem);
          line-height: 1.8;
        }
        .legal-document ol,
        .legal-document ul {
          list-style-position: outside;
          padding-left: 1.35rem;
        }
        .legal-document li::marker {
          color: rgba(212, 175, 55, 0.75);
          font-weight: 700;
        }
        .legal-document a {
          text-underline-offset: 0.2em;
        }
        @media (min-width: 640px) {
          .legal-document > section {
            padding: 2.5rem 0;
          }
        }
      `}</style>
    </div>
  );
};

export default LegalDocumentLayout;