import { CheckCircle2, FileText, ShieldCheck } from "lucide-react";
import type React from "react";

type PolicyItem = {
  heading: string;
  body?: string[];
  list?: string[];
  after?: string;
};

type PolicySection = {
  title: string;
  content?: string[];
  list?: string[];
  after?: string;
  items?: PolicyItem[];
};

type PolicyDocumentProps = {
  title: string;
  lead?: string;
  sections: PolicySection[];
  pledge?: React.ReactNode;
  meta?: string[];
};

export function PolicyDocument({ lead, meta, pledge, sections, title }: PolicyDocumentProps) {
  return (
    <section className="bg-[#f6f7f9] font-['Space_Grotesk']">
      <div className="mx-auto grid max-w-7xl gap-8 px-4 py-14 md:px-6 lg:grid-cols-[280px_minmax(0,1fr)] 2xl:py-24">
        <aside className="lg:sticky lg:top-28 lg:self-start">
          <div className="rounded-lg border border-border bg-white p-5 shadow-sm">
            <p className="text-xs font-black uppercase tracking-[0.16em] text-primary">
              Policy Index
            </p>
            <nav className="mt-4 grid gap-2">
              {sections.map((section) => (
                <a
                  key={section.title}
                  href={`#${slugify(section.title)}`}
                  className="rounded-md px-3 py-2 text-sm font-bold text-muted-foreground transition hover:bg-primary/10 hover:text-primary"
                >
                  {section.title}
                </a>
              ))}
            </nav>
          </div>
        </aside>

        <div className="min-w-0">
          <article className="overflow-hidden rounded-lg border border-border bg-white shadow-sm">
            <header className="border-b border-border bg-white p-6 sm:p-8 lg:p-10">
              <div className="flex flex-col gap-5 sm:flex-row sm:items-start">
                <div className="grid h-14 w-14 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary">
                  <FileText className="h-7 w-7" />
                </div>
                <div className="min-w-0">
                  <p className="text-xs font-black uppercase tracking-[0.18em] text-primary">
                    Ride N Revive
                  </p>
                  <h1 className="mt-2 text-3xl font-black tracking-tight text-foreground md:text-4xl">
                    {title}
                  </h1>
                  {lead ? (
                    <p className="mt-3 max-w-3xl text-base font-bold leading-7 text-muted-foreground">
                      {lead}
                    </p>
                  ) : null}
                  <div className="mt-5 flex flex-wrap gap-2">
                    <span className="inline-flex items-center gap-2 rounded-md border border-primary/20 bg-primary/5 px-3 py-1.5 text-xs font-black uppercase tracking-[0.12em] text-primary">
                      <ShieldCheck className="h-3.5 w-3.5" />
                      Effective June 2026
                    </span>
                    {meta?.map((item) => (
                      <span
                        key={item}
                        className="rounded-md border border-border bg-slate-50 px-3 py-1.5 text-xs font-bold text-muted-foreground"
                      >
                        {item}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </header>

            <div className="space-y-10 p-6 sm:p-8 lg:p-10">
              {sections.map((section) => (
                <PolicySectionBlock key={section.title} section={section} />
              ))}

              {pledge ? (
                <section className="rounded-lg border border-primary/20 bg-primary/5 p-6">
                  {pledge}
                </section>
              ) : null}
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

function PolicySectionBlock({ section }: { section: PolicySection }) {
  return (
    <section id={slugify(section.title)} className="scroll-mt-28">
      <div className="flex items-start gap-3">
        <div className="mt-1 h-5 w-1 shrink-0 rounded-full bg-primary" />
        <h2 className="text-xl font-black tracking-tight text-foreground md:text-2xl">
          {section.title}
        </h2>
      </div>

      {section.content?.length ? (
        <div className="mt-5 space-y-3">
          {section.content.map((text) => (
            <PolicyParagraph key={text}>{text}</PolicyParagraph>
          ))}
        </div>
      ) : null}

      {section.list?.length ? <PolicyList items={section.list} /> : null}

      {section.after ? (
        <div className="mt-4">
          <PolicyParagraph>{section.after}</PolicyParagraph>
        </div>
      ) : null}

      {section.items?.length ? (
        <div className="mt-5 grid gap-4">
          {section.items.map((item) => (
            <article
              key={item.heading}
              className="rounded-lg border border-border bg-slate-50/80 p-5 transition hover:border-primary/25 hover:bg-white"
            >
              <h3 className="text-base font-black text-foreground">{item.heading}</h3>

              {item.body?.length ? (
                <div className="mt-3 space-y-2">
                  {item.body.map((text) => (
                    <PolicyParagraph key={text}>{text}</PolicyParagraph>
                  ))}
                </div>
              ) : null}

              {item.list?.length ? <PolicyList items={item.list} /> : null}

              {item.after ? (
                <div className="mt-3">
                  <PolicyParagraph>{item.after}</PolicyParagraph>
                </div>
              ) : null}
            </article>
          ))}
        </div>
      ) : null}
    </section>
  );
}

function PolicyParagraph({ children }: { children: string }) {
  return (
    <p className="whitespace-pre-line text-sm font-medium leading-7 text-muted-foreground">
      {children}
    </p>
  );
}

function PolicyList({ items }: { items: string[] }) {
  return (
    <ul className="mt-3 grid gap-2 text-sm font-medium leading-7 text-muted-foreground sm:grid-cols-2">
      {items.map((point) => (
        <li key={point} className="flex gap-2">
          <CheckCircle2 className="mt-1 h-4 w-4 shrink-0 text-primary" />
          <span className="whitespace-pre-line">{point}</span>
        </li>
      ))}
    </ul>
  );
}

function slugify(value: string) {
  return value
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "");
}