import type { ReactNode } from 'react';

import { AppLink } from '@/components/ui/app-link';
import { CopyButton } from '@/components/ui/copy-button';
import { Text, textVariants, typographyTones } from '@/components/ui/typography';
import { cn } from '@/lib/utils';

/* ============================================================================
   SPEC LIST  —  the catalogue key/value rail on the creation page.
   ----------------------------------------------------------------------------
   A definition list of record attributes (place, medium, role, identifier…).
   Hairline-ruled rows, label in the meta face, value in body. The `mono` flag
   switches a value to the monospace catalogue face (identifiers, coordinates).

   `columns` exists for one reason: when a creation has NO description, the rail
   is the only thing in the row, so it spreads to a 2-up grid instead of a tall
   single column. With a description beside it, keep it single-column (1).
   ========================================================================== */

export interface Spec {
  label: string;
  value: string;
  /** render the value in the monospace catalogue face — ids, coordinates */
  mono?: boolean;
  /** when set, the value renders as a link (e.g. place → search by town) */
  href?: string;
  /** small glyph shown before the value (e.g. a map pin for places) */
  icon?: ReactNode;
  /** show a copy-to-clipboard button after the value (e.g. the identifier) */
  copyable?: boolean;
}

interface SpecListProps {
  items: Spec[];
  /** 1 = single column (sits beside prose) · 2 = fills the row when alone */
  columns?: 1 | 2;
  className?: string;
}

export function SpecList({ items, columns = 1, className }: SpecListProps) {
  if (items.length === 0) return null;

  return (
    <dl
      className={cn(
        'border-t border-brand-primary/25',
        columns === 2 && 'sm:grid sm:grid-cols-2 sm:gap-x-[clamp(24px,4vw,64px)]',
        className
      )}
    >
      {items.map((spec, i) => (
        <div
          key={`${spec.label}-${i}`}
          className="flex flex-col gap-1 border-b border-brand-primary/10 py-3 sm:grid sm:grid-cols-[minmax(0,38%)_1fr] sm:items-baseline sm:gap-3"
        >
          <Text as="dt" variant="meta" tone="muted" className="leading-tight">
            {spec.label}
          </Text>
          <dd
            className={cn(
              textVariants.bodySm,
              typographyTones.strong,
              'm-0',
              spec.copyable && 'flex items-center gap-2',
              spec.mono && 'font-mono'
            )}
          >
            {spec.href ? (
              <AppLink
                href={spec.href}
                variant="bodySm"
                tone="brand"
                underline="hover"
                className="inline-flex items-center gap-1 font-semibold"
              >
                {spec.icon}
                {spec.value}
              </AppLink>
            ) : spec.icon ? (
              <span className="inline-flex items-center gap-1">
                {spec.icon}
                {spec.value}
              </span>
            ) : (
              spec.value
            )}
            {spec.copyable && <CopyButton value={spec.value} className="-my-1" />}
          </dd>
        </div>
      ))}
    </dl>
  );
}

export default SpecList;