import Link from 'next/link';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { routes } from '@/lib/site';

/** Small building blocks shared by the satellite / launch pages (local variants — shared ui/* is read-only). */

export function DL({ children, className }: { children: ReactNode; className?: string }) {
  return <dl className={cn('divide-y divide-[color:var(--rule)] text-sm', className)}>{children}</dl>;
}

export function Row({ label, value, mono = true, hint }: { label: ReactNode; value: ReactNode; mono?: boolean; hint?: ReactNode }) {
  return (
    <div className="grid grid-cols-[minmax(0,42%)_minmax(0,1fr)] items-baseline gap-3 py-2">
      <dt className="text-ink-3">
        {label}
        {hint && <span className="ml-1 text-2xs text-ink-3/70">{hint}</span>}
      </dt>
      <dd className={cn('min-w-0 break-words text-right text-ink', mono && 'mono tnum')}>{value}</dd>
    </div>
  );
}

export function Derived({ className }: { className?: string }) {
  return (
    <Link href={routes.methodology()} className={cn('inline-flex items-center rounded border border-dashed border-rule-strong px-1.5 py-px text-[10px] uppercase tracking-wider text-ink-3 hover:text-accent', className)} title="Derived by SatelliteIndex — see methodology">
      derived
    </Link>
  );
}

export function Note({ children, className }: { children: ReactNode; className?: string }) {
  return <p className={cn('rounded-md border border-dashed border-rule px-3 py-2.5 text-xs leading-relaxed text-ink-3', className)}>{children}</p>;
}

export function Chip({ href, children, active = false, count, className }: { href: string; children: ReactNode; active?: boolean; count?: ReactNode; className?: string }) {
  return (
    <Link
      href={href}
      className={cn(
        'inline-flex min-h-9 items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs transition-colors',
        active ? 'border-accent/40 bg-accent-soft text-accent' : 'border-rule bg-plane text-ink-2 hover:border-rule-strong hover:text-ink',
        className,
      )}
    >
      <span className="truncate">{children}</span>
      {count !== undefined && <span className="tnum text-[11px] text-ink-3">{count}</span>}
    </Link>
  );
}

export function Head({ eyebrow, title, action, children }: { eyebrow?: string; title: ReactNode; action?: { href: string; label: string }; children?: ReactNode }) {
  return (
    <div className="mb-4 flex items-end justify-between gap-4 border-b border-rule pb-3">
      <div>
        {eyebrow && <p className="eyebrow">{eyebrow}</p>}
        <h2 className="mt-0.5 text-lg font-semibold tracking-tight md:text-xl">{title}</h2>
        {children}
      </div>
      {action && (
        <Link href={action.href} className="shrink-0 py-1 text-sm text-accent hover:underline">
          {action.label} →
        </Link>
      )}
    </div>
  );
}

/** Wraps a page section; `id` allows deep links. */
export function Block({ id, children, className }: { id: string; children: ReactNode; className?: string }) {
  return (
    <section id={id} className={cn('scroll-mt-20 py-6 md:py-8', className)}>
      {children}
    </section>
  );
}

export function Empty({ children }: { children: ReactNode }) {
  return <p className="text-sm text-ink-3">{children}</p>;
}