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

/** Page-width wrapper. Pages render inside <main> without padding: wrap content in Container (1280) or wide (1600). */
export function Container({ children, className, wide = false }: { children: ReactNode; className?: string; wide?: boolean }) {
  return <div className={cn('container-x mx-auto w-full', wide ? 'max-w-[1600px]' : 'max-w-[1280px]', className)}>{children}</div>;
}

/** Section with eyebrow + title + optional action link. Spatial composition with a hairline — not a card. */
export function Section({
  eyebrow,
  title,
  lede,
  action,
  children,
  className,
  id,
  hairline = true,
  aside,
}: {
  eyebrow?: string;
  title?: ReactNode;
  lede?: ReactNode;
  action?: { href: string; label: string };
  children: ReactNode;
  className?: string;
  id?: string;
  hairline?: boolean;
  aside?: ReactNode;
}) {
  return (
    <section id={id} className={cn('section-y scroll-mt-20', hairline && 'hairline', className)}>
      {(eyebrow || title) && (
        <div className="mb-4 flex items-end justify-between gap-4 md:mb-5">
          <div className="min-w-0">
            {eyebrow && <p className="eyebrow">{eyebrow}</p>}
            {title && <h2 className="mt-1 text-lg font-semibold tracking-tight md:text-xl">{title}</h2>}
            {lede && <p className="mt-1 max-w-2xl text-sm text-ink-2">{lede}</p>}
          </div>
          {aside}
          {action && (
            <Link href={action.href} className="link shrink-0 py-1 text-sm">
              {action.label} →
            </Link>
          )}
        </div>
      )}
      {children}
    </section>
  );
}

export function PageHeader({ eyebrow, title, lede, children, className, aside }: { eyebrow?: ReactNode; title: ReactNode; lede?: ReactNode; children?: ReactNode; className?: string; aside?: ReactNode }) {
  return (
    <div className={cn('pb-5 pt-6 md:pb-7 md:pt-10', className)}>
      <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
        <div className="min-w-0">
          {eyebrow && <div className="eyebrow flex flex-wrap items-center gap-2">{eyebrow}</div>}
          <h1 className="display mt-2 text-[26px] md:text-[38px]">{title}</h1>
          {lede && <p className="mt-3 max-w-2xl text-[15px] leading-relaxed text-ink-2 md:text-base">{lede}</p>}
        </div>
        {aside && <div className="shrink-0">{aside}</div>}
      </div>
      {children}
    </div>
  );
}

/** Stat tile: big tabular number + label + optional delta/hint. Composes in a hairline grid, never in a card. */
export function Stat({ label, value, hint, delta, className, accent = false, href, size = 'md' }: { label: ReactNode; value: ReactNode; hint?: ReactNode; delta?: { value: string; tone?: 'positive' | 'negative' | 'neutral' }; className?: string; accent?: boolean; href?: string; size?: 'sm' | 'md' | 'lg' }) {
  const body = (
    <>
      <p className="eyebrow">{label}</p>
      <p className={cn('tnum mt-1 font-semibold leading-none tracking-tight', size === 'lg' && 'text-[30px] md:text-[38px]', size === 'md' && 'text-[24px] md:text-[30px]', size === 'sm' && 'text-[20px] md:text-[22px]', accent && 'text-accent')}>{value}</p>
      {(hint || delta) && (
        <p className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-ink-3">
          {delta && <span className={cn('tnum font-medium', delta.tone === 'positive' && 'text-positive', delta.tone === 'negative' && 'text-danger', (!delta.tone || delta.tone === 'neutral') && 'text-ink-2')}>{delta.value}</span>}
          {hint}
        </p>
      )}
    </>
  );
  if (href)
    return (
      <Link href={href} className={cn('block min-w-0 py-3 hover:text-accent md:py-4', className)}>
        {body}
      </Link>
    );
  return <div className={cn('min-w-0 py-3 md:py-4', className)}>{body}</div>;
}

export function StatGrid({ children, cols = 4, className }: { children: ReactNode; cols?: 2 | 3 | 4 | 5 | 6; className?: string }) {
  const desktop = { 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4', 5: 'md:grid-cols-5', 6: 'md:grid-cols-3 lg:grid-cols-6' }[cols];
  return <div className={cn('grid grid-cols-2 gap-x-6 border-y border-rule [&>*]:border-b [&>*]:border-rule md:[&>*]:border-b-0', desktop, className)}>{children}</div>;
}

/** Small honest note. */
export function Note({ children, className }: { children: ReactNode; className?: string }) {
  return <p className={cn('text-xs leading-relaxed text-ink-3', className)}>{children}</p>;
}

/** Honest empty state — spec §165 wording. */
export function Empty({ title = 'No monitored evidence available yet.', children, className, compact = false }: { title?: string; children?: ReactNode; className?: string; compact?: boolean }) {
  return (
    <div className={cn('border border-dashed border-rule-strong text-center text-ink-3', compact ? 'px-3 py-4 text-xs' : 'px-5 py-10 text-sm', className)} role="status">
      <p className="text-ink-2">{title}</p>
      {children && <div className="mt-1 text-xs">{children}</div>}
    </div>
  );
}

export function Unavailable({ what = 'This panel', className, compact = false }: { what?: string; className?: string; compact?: boolean }) {
  return <Empty title={`${what} is temporarily unavailable.`} className={className} compact={compact}>The dataset itself is intact — the API did not answer in time.</Empty>;
}