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

/* Dense admin primitives on the shared tokens. No marketing, no cards. */

const chip = 'inline-flex items-center whitespace-nowrap rounded-[3px] px-1.5 py-[1px] text-[11px] font-medium leading-4 tracking-wide';

const HEALTH: Record<string, string> = {
  ok: 'text-positive bg-positive-soft',
  success: 'text-positive bg-positive-soft',
  done: 'text-positive bg-positive-soft',
  approved: 'text-positive bg-positive-soft',
  extracted: 'text-positive bg-positive-soft',
  active: 'text-positive bg-positive-soft',
  degraded: 'text-warning bg-warning-soft',
  partial: 'text-warning bg-warning-soft',
  skipped: 'text-warning bg-warning-soft',
  queued: 'text-accent bg-accent-soft',
  running: 'text-accent bg-accent-soft',
  pending: 'text-accent bg-accent-soft',
  failing: 'text-danger bg-danger-soft',
  failed: 'text-danger bg-danger-soft',
  error: 'text-danger bg-danger-soft',
  dead: 'text-danger bg-danger-soft',
  rejected: 'text-danger bg-danger-soft',
  schema_error: 'text-danger bg-danger-soft',
  blocked: 'text-danger bg-danger-soft',
  disabled: 'text-ink-3 bg-surface-2',
  unknown: 'text-ink-3 bg-surface-2',
};

/** Health / status chip: ok → positive · degraded → warning · failing → danger · disabled/unknown → muted. */
export function StatusChip({ value, className }: { value: string | null | undefined; className?: string }) {
  if (!value) return <span className="text-ink-3">{DASH}</span>;
  return <span className={cn(chip, 'mono', HEALTH[value] ?? 'text-ink-2 bg-surface-2', className)}>{value}</span>;
}

export function KindChip({ value, className }: { value: string; className?: string }) {
  return <span className={cn(chip, 'mono bg-surface-2 text-ink-2', className)}>{value}</span>;
}

export function Bool({ v }: { v: boolean | null | undefined }) {
  if (v === null || v === undefined) return <span className="text-ink-3">{DASH}</span>;
  return <span className={v ? 'text-positive' : 'text-ink-3'}>{v ? 'yes' : 'no'}</span>;
}

/** Inline notice from `?notice=&level=` after a server action. */
export function Notice({ notice, level }: { notice?: string; level?: string }) {
  if (!notice) return null;
  const err = level === 'error';
  return (
    <p role="status" className={cn('mb-4 border-l-2 px-3 py-2 text-sm', err ? 'border-danger bg-danger-soft text-danger' : 'border-positive bg-positive-soft text-ink')}>
      {notice}
    </p>
  );
}

/** Pretty JSON in a scrollable block; never dumps undefined/null as text. */
export function JsonPre({ value, className, maxHeight = '24rem' }: { value: unknown; className?: string; maxHeight?: string }) {
  if (value === null || value === undefined) return <p className="text-xs text-ink-3">none</p>;
  const text = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
  return (
    <pre className={cn('scrollbar-thin overflow-auto border border-rule bg-surface p-3 text-[12px] leading-relaxed text-ink', className)} style={{ maxHeight }}>
      <code>{text}</code>
    </pre>
  );
}

/** Small action button used inside server-action forms. */
export function ActionButton({ children, tone = 'neutral', className, disabled, title }: { children: ReactNode; tone?: 'neutral' | 'accent' | 'danger' | 'positive'; className?: string; disabled?: boolean; title?: string }) {
  return (
    <button
      type="submit"
      disabled={disabled}
      title={title}
      className={cn(
        'inline-flex h-8 items-center justify-center whitespace-nowrap border px-2.5 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40',
        tone === 'neutral' && 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink',
        tone === 'accent' && 'border-accent text-accent hover:bg-accent-soft',
        tone === 'positive' && 'border-positive text-positive hover:bg-positive-soft',
        tone === 'danger' && 'border-danger text-danger hover:bg-danger-soft',
        className,
      )}
    >
      {children}
    </button>
  );
}

/** Title line for an admin section. */
export function AdminTitle({ title, count, children, lede }: { title: string; count?: ReactNode; children?: ReactNode; lede?: ReactNode }) {
  return (
    <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
      <div className="min-w-0">
        <h1 className="text-xl font-semibold tracking-tight">
          {title} {count !== undefined && <span className="tnum text-base font-normal text-ink-3">{count}</span>}
        </h1>
        {lede && <p className="mt-1 text-xs text-ink-3">{lede}</p>}
      </div>
      {children && <div className="flex flex-wrap items-center gap-2">{children}</div>}
    </div>
  );
}

/** Compact GET filter form (selects/text) for admin listings. */
export function AdminFilters({ action, fields, className }: { action: string; fields: ({ kind: 'select'; name: string; label: string; value?: string; options: { value: string; label: string }[]; any?: string } | { kind: 'text'; name: string; label: string; value?: string; placeholder?: string } | { kind: 'hidden'; name: string; value: string })[]; className?: string }) {
  const cls = 'h-9 w-full border border-rule bg-surface px-2 text-xs text-ink focus:border-accent focus:outline-none';
  return (
    <form action={action} method="get" className={cn('grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-6', className)}>
      {fields.map((f) =>
        f.kind === 'hidden' ? (
          <input key={f.name} type="hidden" name={f.name} value={f.value} />
        ) : (
          <label key={f.name} className="block min-w-0">
            <span className="eyebrow block pb-1">{f.label}</span>
            {f.kind === 'select' ? (
              <select name={f.name} defaultValue={f.value ?? ''} className={cls}>
                <option value="">{f.any ?? 'Any'}</option>
                {f.options.map((o) => (
                  <option key={o.value} value={o.value}>
                    {o.label}
                  </option>
                ))}
              </select>
            ) : (
              <input name={f.name} defaultValue={f.value ?? ''} placeholder={f.placeholder} className={cls} />
            )}
          </label>
        ),
      )}
      <div className="flex items-end gap-2">
        <button type="submit" className="h-9 flex-1 bg-ink px-3 text-xs font-medium text-canvas hover:opacity-90">
          Apply
        </button>
        <Link href={action} className="inline-flex h-9 items-center border border-rule px-3 text-xs text-ink-2 hover:text-ink">
          Reset
        </Link>
      </div>
    </form>
  );
}

export function Mono({ children, className, title }: { children: ReactNode; className?: string; title?: string }) {
  return (
    <span className={cn('mono text-[11.5px] text-ink-2', className)} title={title}>
      {children}
    </span>
  );
}

/** Truncate long text with the full text as title. */
export function Trunc({ text, max = 80, className }: { text: string | null | undefined; max?: number; className?: string }) {
  if (!text) return <span className="text-ink-3">{DASH}</span>;
  return (
    <span className={className} title={text.length > max ? text : undefined}>
      {text.length > max ? `${text.slice(0, max)}…` : text}
    </span>
  );
}