"use client";

import { Link, useLocation } from "react-router";

import type {
  ComponentDocAccessibilityItem,
  ComponentDocAnatomyPart,
  ComponentDocFeatureGroup,
  ComponentDocGuidelines,
  ComponentDocSpec,
  ComponentDocSpecAccessibility,
  ComponentDocUx,
} from "@/lib/design-system/component-doc-types";
import {
  A11Y_PRINCIPLE_LABEL,
  A11Y_PRINCIPLE_ORDER,
  A11Y_PRINCIPLE_SUMMARY,
  isStructuredAccessibility,
} from "@/lib/design-system/component-doc-a11y";
import { SelectionTileShowcase } from "@/components/ui/selection-tile-grid";
import { Badge } from "@/components/ui/badge";
import { ComponentDocApiTable } from "@/components/design-system/component-doc-api-table";
import {
  DS_DOC_BODY,
  DS_DOC_BODY_EMPHASIS,
  DS_DOC_CODE_LABEL,
  DS_DOC_GUIDELINE_DO_ICON,
  DS_DOC_GUIDELINE_DONT_ICON,
  DS_DOC_GUIDELINE_ICON,
  DS_DOC_LINK,
  DS_DOC_PROSE,
  DS_DOC_SECTION_TITLE,
  DS_DOC_SUBSECTION_TITLE,
} from "@/lib/design-system/doc-typography";
import { cn } from "@/lib/utils";
import { useProductDashboardHref } from "@/contexts/product-route-sync";

function AnatomyList({ parts }: { parts: ComponentDocAnatomyPart[] }) {
  const { hash } = useLocation();
  const activeSlug = hash ? hash.slice(1) : undefined;
  return (
    <ul className="flex flex-col gap-2">
      {parts.map((row) => {
        const isActive = Boolean(row.slug) && row.slug === activeSlug;
        return (
          <li
            key={row.part}
            id={row.slug}
            className={cn(
              "flex scroll-mt-20 flex-col gap-0.5 rounded-md sm:flex-row sm:gap-3",
              row.slug && "px-2 py-1 -mx-2 transition-colors",
              isActive &&
                "bg-accent text-accent-foreground [&>*]:text-accent-foreground hc:bg-foreground hc:text-background hc:[&>*]:text-background forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:[&>*]:text-[HighlightText]",
            )}
          >
            <code className={cn("shrink-0 sm:w-44", DS_DOC_CODE_LABEL)}>
              {row.part}
            </code>
            <span className={cn("min-w-0 flex-1", DS_DOC_BODY)}>
              {row.description}
            </span>
          </li>
        );
      })}
    </ul>
  );
}

function AnatomyBlock({ parts }: { parts: ComponentDocAnatomyPart[] }) {
  return (
    <section className="flex flex-col gap-2">
      <h2 className={DS_DOC_SECTION_TITLE}>Anatomy</h2>
      <AnatomyList parts={parts} />
    </section>
  );
}

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

function FeaturesBlock({ groups }: { groups: ComponentDocFeatureGroup[] }) {
  return (
    <section className="flex flex-col gap-6">
      <h2 className={DS_DOC_SECTION_TITLE}>Features</h2>
      {groups.map((group) => (
        <SelectionTileShowcase
          key={group.group}
          sectionLabel={group.group}
          sectionIcon={group.icon}
          columns={Math.min(4, Math.max(2, group.items.length)) as 2 | 3 | 4}
          align="center"
          density="compact"
          options={group.items.map((item) => ({
            value: featureOptionValue(item.part),
            label: item.part,
            icon: item.icon ?? "fa-circle-info",
            description: item.description,
          }))}
        />
      ))}
    </section>
  );
}

function CriterionHeading({ item }: { item: ComponentDocAccessibilityItem }) {
  const title = item.criterionTitle ? ` ${item.criterionTitle}` : "";
  return (
    <h4
      className={cn(
        "text-sm font-medium text-foreground",
        DS_DOC_BODY_EMPHASIS,
      )}
    >
      <span className="font-mono tabular-nums">{item.criterion}</span>
      {title}
      {item.level ? (
        <Badge
          variant="outline"
          className="ms-2 align-middle text-2xs font-normal"
        >
          Level {item.level}
        </Badge>
      ) : null}
    </h4>
  );
}

function AccessibilityBlock({
  items,
}: {
  items: ComponentDocSpecAccessibility;
}) {
  if (isStructuredAccessibility(items)) {
    const grouped = A11Y_PRINCIPLE_ORDER.map((principle) => ({
      principle,
      items: items.filter((row) => row.principle === principle),
    })).filter((group) => group.items.length > 0);

    return (
      <section className="flex flex-col gap-5">
        <div className="flex flex-col gap-1">
          <h2 className={DS_DOC_SECTION_TITLE}>Accessibility</h2>
          <p className={DS_DOC_PROSE}>
            WCAG 2.1 Level AA floor, grouped by POUR (Perceivable, Operable,
            Understandable, Robust).
          </p>
        </div>
        {grouped.map(({ principle, items: principleItems }) => (
          <div key={principle} className="flex flex-col gap-3">
            <div>
              <h3 className={DS_DOC_SUBSECTION_TITLE}>
                {A11Y_PRINCIPLE_LABEL[principle]}
              </h3>
              <p className={cn("mt-0.5", DS_DOC_PROSE)}>
                {A11Y_PRINCIPLE_SUMMARY[principle]}
              </p>
            </div>
            <div className="flex flex-col gap-3 ps-0 sm:ps-2">
              {principleItems.map((item) => (
                <div
                  key={`${item.criterion}-${item.guidance}`}
                  className="flex flex-col gap-1"
                >
                  <CriterionHeading item={item} />
                  <p className={DS_DOC_PROSE}>{item.guidance}</p>
                </div>
              ))}
            </div>
          </div>
        ))}
      </section>
    );
  }

  return (
    <section className="flex flex-col gap-2">
      <h2 className={DS_DOC_SECTION_TITLE}>Accessibility</h2>
      <ul className={cn("list-disc space-y-1 ps-4", DS_DOC_PROSE)}>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </section>
  );
}

function GuidelineListItem({
  item,
  iconClassName,
  iconToneClassName,
}: {
  item: string;
  iconClassName: string;
  iconToneClassName: string;
}) {
  return (
    <li className="flex gap-2">
      <span
        className={cn(
          "mt-0.5 inline-flex size-4 shrink-0 items-center justify-center",
          DS_DOC_GUIDELINE_ICON,
          iconToneClassName,
        )}
        aria-hidden="true"
      >
        <i className={iconClassName} />
      </span>
      <span className="text-sm text-foreground">{item}</span>
    </li>
  );
}

function ImplementationBlock({
  guidelines,
}: {
  guidelines: ComponentDocGuidelines;
}) {
  return (
    <section className="flex flex-col gap-3">
      <div className="flex flex-col gap-1">
        <h2 className={DS_DOC_SECTION_TITLE}>Implementation</h2>
        <p className={DS_DOC_PROSE}>
          How to compose and configure the primitive. Technical and structural
          rules, not product UX.
        </p>
      </div>
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <h3 className={cn("mb-1.5", DS_DOC_SUBSECTION_TITLE)}>Do</h3>
          <ul className={cn("space-y-1", DS_DOC_BODY)}>
            {guidelines.do.map((item) => (
              <GuidelineListItem
                key={item}
                item={item}
                iconClassName="fa-solid fa-check"
                iconToneClassName={DS_DOC_GUIDELINE_DO_ICON}
              />
            ))}
          </ul>
        </div>
        <div>
          <h3 className={cn("mb-1.5", DS_DOC_SUBSECTION_TITLE)}>Avoid</h3>
          <ul className={cn("space-y-1", DS_DOC_BODY)}>
            {guidelines.dont.map((item) => (
              <GuidelineListItem
                key={item}
                item={item}
                iconClassName="fa-solid fa-xmark"
                iconToneClassName={DS_DOC_GUIDELINE_DONT_ICON}
              />
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function WhenToUseColumns({ ux }: { ux: ComponentDocUx }) {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      {ux.whenToUse?.length ? (
        <div>
          <h3 className={cn("mb-1.5", DS_DOC_SUBSECTION_TITLE)}>When to use</h3>
          <ul className="space-y-1">
            {ux.whenToUse.map((item) => (
              <GuidelineListItem
                key={item}
                item={item}
                iconClassName="fa-solid fa-check"
                iconToneClassName={DS_DOC_GUIDELINE_DO_ICON}
              />
            ))}
          </ul>
        </div>
      ) : null}
      {ux.whenNotToUse?.length ? (
        <div>
          <h3 className={cn("mb-1.5", DS_DOC_SUBSECTION_TITLE)}>
            When not to use
          </h3>
          <ul className="space-y-1">
            {ux.whenNotToUse.map((item) => (
              <GuidelineListItem
                key={item}
                item={item}
                iconClassName="fa-solid fa-xmark"
                iconToneClassName={DS_DOC_GUIDELINE_DONT_ICON}
              />
            ))}
          </ul>
        </div>
      ) : null}
    </div>
  );
}

function ConstraintsBlock({
  budgets,
}: {
  budgets: NonNullable<ComponentDocUx["budgets"]>;
}) {
  return (
    <section className="flex flex-col gap-2">
      <div className="flex flex-col gap-1">
        <h2 className={DS_DOC_SECTION_TITLE}>Constraints</h2>
        <p className={DS_DOC_PROSE}>
          Quantitative design limits for scanning and density. These are IA and
          layout budgets, not WCAG criteria.
        </p>
      </div>
      <ul className={cn("space-y-2", DS_DOC_PROSE)}>
        {budgets.map((row) => (
          <li key={row.label}>
            <span className={DS_DOC_BODY_EMPHASIS}>{row.label}: </span>
            {row.value}.{" "}
            <span className="text-foreground">{row.rationale}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

/** Product UX only — job, when to pick this primitive, references. */
function UxGuidelinesBlock({ ux }: { ux: ComponentDocUx }) {
  const hasWhenToUse = Boolean(ux.whenToUse?.length || ux.whenNotToUse?.length);

  return (
    <section className="flex flex-col gap-4">
      <h2 className={DS_DOC_SECTION_TITLE}>UX guidelines</h2>
      {ux.job ? <p className="text-sm text-foreground">{ux.job}</p> : null}
      {hasWhenToUse ? <WhenToUseColumns ux={ux} /> : null}
      {ux.principles?.length ? (
        <p className="text-sm text-foreground">
          <span className={DS_DOC_BODY_EMPHASIS}>Principles: </span>
          {ux.principles.join(", ")}
        </p>
      ) : null}
      {ux.modernReferences?.length ? (
        <p className="text-sm text-foreground">
          <span className={DS_DOC_BODY_EMPHASIS}>Modern references: </span>
          {ux.modernReferences.join("; ")}
        </p>
      ) : null}
      {ux.patternDoc || ux.rulePath ? (
        <p className="text-sm text-foreground">
          {ux.patternDoc ? (
            <>
              <span className={DS_DOC_BODY_EMPHASIS}>Pattern: </span>
              <code className={DS_DOC_CODE_LABEL}>{ux.patternDoc}</code>
            </>
          ) : null}
          {ux.patternDoc && ux.rulePath ? " · " : null}
          {ux.rulePath ? (
            <>
              <span className={DS_DOC_BODY_EMPHASIS}>Rule: </span>
              <code className={DS_DOC_CODE_LABEL}>{ux.rulePath}</code>
            </>
          ) : null}
        </p>
      ) : null}
    </section>
  );
}

function RelatedBlock({ slugs }: { slugs: string[] }) {
  const dashboardHref = useProductDashboardHref();
  const productBase = dashboardHref.replace(/\/dashboard$/, "");
  const basePath = `${productBase}/design-system`;

  return (
    <section className="flex flex-col gap-2">
      <h2 className={DS_DOC_SECTION_TITLE}>Related</h2>
      <ul className="flex flex-wrap gap-2">
        {slugs.map((slug) => (
          <li key={slug}>
            <Link to={`${basePath}/${slug}`} className={DS_DOC_LINK}>
              {slug}
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}

/** Live previews → UX → Implementation → Constraints → Accessibility → reference sections. */
export function ComponentDocDetails({ spec }: { spec: ComponentDocSpec }) {
  const showUx = Boolean(
    spec.ux?.job ||
    spec.ux?.whenToUse?.length ||
    spec.ux?.whenNotToUse?.length ||
    spec.ux?.principles?.length,
  );

  return (
    <div className="flex flex-col gap-6 border-t border-border pt-6">
      {showUx && spec.ux ? <UxGuidelinesBlock ux={spec.ux} /> : null}
      {spec.guidelines ? (
        <ImplementationBlock guidelines={spec.guidelines} />
      ) : null}
      {spec.ux?.budgets?.length ? (
        <ConstraintsBlock budgets={spec.ux.budgets} />
      ) : null}
      {spec.accessibility?.length ? (
        <AccessibilityBlock items={spec.accessibility} />
      ) : null}
      {spec.anatomy?.length ? <AnatomyBlock parts={spec.anatomy} /> : null}
      {spec.features?.length ? <FeaturesBlock groups={spec.features} /> : null}
      {spec.api?.length ? <ComponentDocApiTable rows={spec.api} /> : null}
      {spec.relatedSlugs?.length ? (
        <RelatedBlock slugs={spec.relatedSlugs} />
      ) : null}
    </div>
  );
}