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

export const ADMIN_NAV = [
  { href: '/admin', label: 'Overview' },
  { href: '/admin/connectors', label: 'Connectors' },
  { href: '/admin/coverage', label: 'Coverage' },
  { href: '/admin/data-quality', label: 'Data quality' },
  { href: '/admin/costs', label: 'Costs' },
  { href: '/admin/taxonomy', label: 'Taxonomy' },
  { href: '/admin/audit', label: 'Audit log' },
  { href: '/admin/events', label: 'Events' },
];

export function AdminShell({ children, title, subtitle, actions, current }: { children: ReactNode; title: string; subtitle?: ReactNode; actions?: ReactNode; current: string }) {
  return (
    <div className="grid gap-6 lg:grid-cols-[180px_1fr]">
      <aside className="lg:sticky lg:top-20 lg:self-start">
        <p className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-subtle">Admin</p>
        <nav className="flex gap-1 overflow-x-auto scrollbar-none lg:flex-col">
          {ADMIN_NAV.map((n) => (
            <Link key={n.href} href={n.href} className={cn('whitespace-nowrap rounded-md px-2.5 py-1.5 text-[13px]', current === n.href ? 'bg-inset font-medium text-fg' : 'text-muted hover:bg-inset hover:text-fg')}>
              {n.label}
            </Link>
          ))}
        </nav>
      </aside>
      <div className="min-w-0">
        <header className="mb-4 flex flex-wrap items-end justify-between gap-3">
          <div>
            <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
            {subtitle ? <p className="mt-0.5 text-xs text-muted">{subtitle}</p> : null}
          </div>
          {actions}
        </header>
        {children}
      </div>
    </div>
  );
}

export function StatusPill({ status }: { status: string | null | undefined }) {
  const s = status ?? 'unknown';
  const tone: Record<string, string> = { maintenance: 'bg-index-bg text-index', completed: 'bg-gain-bg text-gain', healthy: 'bg-gain-bg text-gain', active: 'bg-gain-bg text-gain', success: 'bg-gain-bg text-gain', valid: 'bg-gain-bg text-gain', degraded: 'bg-alert-bg text-alert', partial: 'bg-alert-bg text-alert', paused: 'bg-alert-bg text-alert', flagged: 'bg-alert-bg text-alert', pending: 'bg-alert-bg text-alert', running: 'bg-index-bg text-index', failing: 'bg-loss-bg text-loss', failed: 'bg-loss-bg text-loss', excluded: 'bg-loss-bg text-loss', disabled: 'bg-inset text-muted', unknown: 'bg-inset text-muted' };
  return <span className={cn('inline-flex rounded-sm px-1.5 py-0.5 text-[11px] font-medium', tone[s] ?? 'bg-inset text-muted')}>{s}</span>;
}

export function ActionButton({ label, tone = 'neutral', small = true }: { label: string; tone?: 'neutral' | 'danger' | 'primary'; small?: boolean }) {
  return (
    <button type="submit" className={cn('rounded-md border font-medium', small ? 'px-2 py-0.5 text-[11px]' : 'px-3 py-1.5 text-xs', tone === 'danger' ? 'border-loss/40 text-loss hover:bg-loss-bg' : tone === 'primary' ? 'border-accent bg-accent text-accent-fg' : 'border-border hover:bg-inset')}>
      {label}
    </button>
  );
}

export function Kpi({ label, value, sub, tone }: { label: string; value: ReactNode; sub?: ReactNode; tone?: 'gain' | 'loss' | 'alert' }) {
  return (
    <div className="card px-3 py-2.5">
      <p className="text-[10px] font-semibold uppercase tracking-wider text-subtle">{label}</p>
      <p className={cn('num mt-0.5 text-lg font-semibold', tone === 'gain' && 'text-gain', tone === 'loss' && 'text-loss', tone === 'alert' && 'text-alert')}>{value}</p>
      {sub ? <p className="text-[11px] text-muted">{sub}</p> : null}
    </div>
  );
}

/** Single-series bar chart (one hue, hover tooltips via <title>, no legend needed). */
export function Bars({ points, format, className }: { points: Array<{ label: string; value: number }>; format?: (v: number) => string; className?: string }) {
  if (!points.length) return <p className="text-xs text-subtle">No data in this window.</p>;
  const max = Math.max(...points.map((p) => p.value), 0) || 1;
  const w = 600;
  const h = 120;
  const gap = 2;
  const bw = Math.max(2, (w - gap * points.length) / points.length);
  const fmt = format ?? ((v: number) => String(Math.round(v * 100) / 100));
  return (
    <svg viewBox={`0 0 ${w} ${h + 16}`} className={cn('h-auto w-full', className)} role="img" aria-label="Daily values">
      <line x1={0} x2={w} y1={h} y2={h} stroke="var(--ri-border)" />
      {points.map((p, i) => {
        const bh = Math.max(p.value > 0 ? 1 : 0, (p.value / max) * (h - 8));
        return (
          <g key={p.label}>
            <rect x={i * (bw + gap)} y={h - bh} width={bw} height={bh} rx={bw > 6 ? 2 : 0} fill="var(--ri-index)" opacity={0.85}>
              <title>{`${p.label}: ${fmt(p.value)}`}</title>
            </rect>
            {points.length <= 31 && (i === 0 || i === points.length - 1) ? (
              <text x={i * (bw + gap) + bw / 2} y={h + 12} textAnchor="middle" fontSize={9} fill="var(--ri-fg-subtle)">{p.label.slice(5)}</text>
            ) : null}
          </g>
        );
      })}
    </svg>
  );
}

export function fmtTs(v: unknown): string {
  if (!v) return '—';
  const d = v instanceof Date ? v : new Date(String(v));
  if (Number.isNaN(d.getTime())) return String(v);
  return d.toISOString().replace('T', ' ').slice(0, 16) + 'Z';
}

export function n(v: unknown, digits = 0): string {
  const x = Number(v);
  return Number.isFinite(x) ? x.toLocaleString('en-US', { maximumFractionDigits: digits }) : '—';
}