"use client";

import * as React from "react";

import { Button } from "@/components/ui/button";
import { Tip } from "@/components/ui/tip";
import {
  DESIGN_SYSTEM_DOC_ARTICLE,
  DESIGN_SYSTEM_EXAMPLE_CANVAS,
  DESIGN_SYSTEM_EXAMPLE_INNER,
  DESIGN_SYSTEM_EXAMPLE_INNER_WIDE,
  designSystemPreviewIsWide,
} from "@/lib/design-system/component-doc-shell";
import type { ComponentDocSpec } from "@/lib/design-system/component-doc-types";
import {
  DS_DOC_BODY,
  DS_DOC_CODE,
  DS_DOC_SECTION_TITLE,
  DS_DOC_SUBSECTION_TITLE,
} from "@/lib/design-system/doc-typography";
import { cn } from "@/lib/utils";

export function DesignSystemDocArticle({
  className,
  children,
}: {
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <article className={cn(DESIGN_SYSTEM_DOC_ARTICLE, className)}>
      {children}
    </article>
  );
}

export function DesignSystemExampleCanvas({
  children,
  wide = false,
}: {
  children: React.ReactNode;
  /** Use full article width for HubTable / DataTable previews */
  wide?: boolean;
}) {
  return (
    <div className={DESIGN_SYSTEM_EXAMPLE_CANVAS}>
      <div
        className={
          wide ? DESIGN_SYSTEM_EXAMPLE_INNER_WIDE : DESIGN_SYSTEM_EXAMPLE_INNER
        }
      >
        {children}
      </div>
    </div>
  );
}

/** Live example blocks from a loaded `ComponentDocSpec` (no PREVIEW_SECTIONS registry). */
export function ComponentDocSpecSections({
  spec,
}: {
  spec: Pick<ComponentDocSpec, "slug" | "sections">;
}) {
  const wideCanvas = designSystemPreviewIsWide(spec.slug);
  return (
    <div className="flex flex-col gap-8">
      {spec.sections.map((block) => (
        <section
          key={block.id}
          id={block.id}
          className="flex flex-col gap-2 scroll-mt-20"
        >
          {block.bare ? null : (
            <h2 className={DS_DOC_SECTION_TITLE}>{block.title}</h2>
          )}
          {block.description ? (
            <p className={DS_DOC_BODY}>{block.description}</p>
          ) : null}
          <DesignSystemExampleCanvas wide={wideCanvas}>
            {block.children}
          </DesignSystemExampleCanvas>
        </section>
      ))}
    </div>
  );
}

function ImportPathRow({ label, path }: { label: string; path: string }) {
  const [copied, setCopied] = React.useState(false);

  const handleCopy = React.useCallback(async () => {
    try {
      await navigator.clipboard.writeText(path);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 2000);
    } catch {
      setCopied(false);
    }
  }, [path]);

  return (
    <li className="group flex flex-col gap-0.5">
      <span className={DS_DOC_SUBSECTION_TITLE}>{label}</span>
      <div className="flex min-w-0 items-start gap-2">
        <code className={cn("min-w-0 flex-1 break-all", DS_DOC_CODE)}>
          {path}
        </code>
        <Tip side="left" label={copied ? "Copied" : "Copy import"}>
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            className="size-6 shrink-0 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
            onClick={() => void handleCopy()}
            aria-label={copied ? "Copied" : `Copy import for ${label}`}
          >
            <i
              className={cn(
                copied ? "fa-solid fa-check" : "fa-light fa-copy",
                "text-sm",
              )}
              aria-hidden="true"
            />
          </Button>
        </Tip>
      </div>
    </li>
  );
}

export function ComponentDocImportSection({
  rows,
  sourcePath,
  heading = "Import",
}: {
  rows: { label: string; path: string }[];
  sourcePath?: string;
  heading?: string;
}) {
  return (
    <section className="flex flex-col gap-3">
      <h2 className={DS_DOC_SECTION_TITLE}>{heading}</h2>
      {rows.length > 0 ? (
        <ul className="flex flex-col gap-3">
          {rows.map((row) => (
            <ImportPathRow
              key={`${row.label}:${row.path}`}
              label={row.label}
              path={row.path}
            />
          ))}
        </ul>
      ) : null}
      {sourcePath ? (
        <p className={DS_DOC_BODY}>
          Source: <code className={DS_DOC_CODE}>{sourcePath}</code>
        </p>
      ) : null}
    </section>
  );
}