import Link from 'next/link';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { fmtAgo } from '@/lib/format';
import { routes } from '@/lib/site';
import { FreshnessBadge } from '@/components/ui/badges';
import type { StatsSnapshot } from '@/lib/types';

/** "derived" tag with a link to the methodology page — mandatory next to every computed metric. */
export function Derived({ className, what }: { className?: string; what?: string }) {
  return (
    <Link href={routes.methodology()} className={cn('mono inline-flex items-center gap-1 rounded border border-rule px-1.5 py-0.5 text-[10px] uppercase tracking-wider text-ink-3 hover:border-rule-strong hover:text-accent', className)} title={what ? `${what} — derived by SatelliteIndex, see methodology` : 'Derived by SatelliteIndex, see methodology'}>
      derived
    </Link>
  );
}

/** Short explanatory note under a chart or table. `tone="warn"` renders a left rule for disclaimers. */
export function Note({ children, tone = 'muted', className }: { children: ReactNode; tone?: 'muted' | 'warn'; className?: string }) {
  return (
    <p className={cn('text-xs leading-relaxed text-ink-3', tone === 'warn' && 'border-l-2 border-warn pl-3 text-ink-2', className)}>
      {children}
    </p>
  );
}

/** Prominent disclaimer block (debris / reentries pages). Text is shown verbatim from the API. */
export function Disclaimer({ text, label = 'Disclaimer' }: { text: string; label?: string }) {
  return (
    <div className="flex gap-3 border-l-2 border-warn bg-warn-soft/40 py-3 pl-4 pr-4" role="note">
      <div className="min-w-0">
        <p className="eyebrow text-warn">{label}</p>
        <p className="mt-1 text-sm leading-relaxed text-ink">{text}</p>
      </div>
    </div>
  );
}

/** Responsive grid of `Stat` tiles separated by a hairline on top. */
export function StatGrid({ children, cols = 4, className }: { children: ReactNode; cols?: 3 | 4 | 5; className?: string }) {
  const c = cols === 3 ? 'sm:grid-cols-3' : cols === 5 ? 'sm:grid-cols-3 lg:grid-cols-5' : 'sm:grid-cols-3 lg:grid-cols-4';
  return <div className={cn('grid grid-cols-2 gap-x-6 gap-y-6 border-t border-rule pt-5', c, className)}>{children}</div>;
}

/** Group title inside a section (e.g. "Catalogue", "Decays"). */
export function GroupTitle({ children, hint }: { children: ReactNode; hint?: ReactNode }) {
  return (
    <div className="mb-3 flex flex-wrap items-baseline justify-between gap-2">
      <h3 className="text-sm font-semibold text-ink-2">{children}</h3>
      {hint && <span className="text-xs text-ink-3">{hint}</span>}
    </div>
  );
}

/** Chart block: small heading + optional note. No card chrome — hairline composition. */
export function ChartBlock({ title, hint, children, note, derived, className }: { title: ReactNode; hint?: ReactNode; children: ReactNode; note?: ReactNode; derived?: boolean; className?: string }) {
  return (
    <div className={cn('min-w-0', className)}>
      <div className="mb-3 flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
        <h3 className="inline-flex items-center gap-2 text-sm font-semibold text-ink">
          {title}
          {derived && <Derived />}
        </h3>
        {hint && <span className="text-xs text-ink-3">{hint}</span>}
      </div>
      {children}
      {note && <div className="mt-2">{typeof note === 'string' ? <Note>{note}</Note> : note}</div>}
    </div>
  );
}

/** Two-column layout on desktop, stacked on mobile (DOM order = visual order). */
export function TwoCol({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn('grid gap-10 lg:grid-cols-2 lg:gap-12', className)}>{children}</div>;
}

/** Horizontal chip list (filters / metric selector). Scrolls on mobile without breaking layout. */
export function Chips({ items, className, ariaLabel }: { items: { href: string; label: string; active: boolean; count?: string }[]; className?: string; ariaLabel: string }) {
  return (
    <nav aria-label={ariaLabel} className={cn('no-scrollbar -mx-4 overflow-x-auto px-4 md:mx-0 md:px-0', className)}>
      <ul className="flex w-max gap-2 md:w-auto md:flex-wrap">
        {items.map((it) => (
          <li key={it.href}>
            <Link
              href={it.href}
              aria-current={it.active ? 'page' : undefined}
              className={cn('inline-flex min-h-[44px] items-center gap-1.5 rounded-md border px-3 text-sm transition-colors md:min-h-[36px]', it.active ? 'border-accent/50 bg-accent-soft text-accent' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}
            >
              {it.label}
              {it.count && <span className="mono text-[11px] text-ink-3">{it.count}</span>}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}

/** Rank number cell. */
export function Rank({ n, className }: { n: number; className?: string }) {
  return <span className={cn('mono text-xs text-ink-3', className)}>{String(n).padStart(2, '0')}</span>;
}

/** Inline rank prefix inside the primary cell of ranked tables (works in stacked mode: `.data-table.stack td` forces display:block, so a hidden rank column would reappear on mobile). */
export function InlineRank({ n }: { n: number }) {
  return <Rank n={n} className="mr-2 inline-block w-6 shrink-0 pt-0.5" />;
}

type Connector = StatsSnapshot['connectors'][number];

export function connectorFreshness(c: Connector, now = Date.now()): 'fresh' | 'aging' | 'stale' | 'unavailable' | 'not_enabled' {
  if (!c.enabled) return 'not_enabled';
  if (!c.last_success_at) return 'unavailable';
  const t = new Date(c.last_success_at).getTime();
  if (Number.isNaN(t)) return 'unavailable';
  const age = (now - t) / 1000;
  if (age < 3 * c.interval_seconds) return 'fresh';
  if (age < 12 * c.interval_seconds) return 'aging';
  return 'stale';
}

/** Connector freshness strip — one line per connector. */
export function ConnectorStrip({ connectors }: { connectors: Connector[] }) {
  if (!connectors.length) return null;
  const now = Date.now();
  return (
    <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
      {connectors.map((c) => {
        const f = connectorFreshness(c, now);
        return (
          <li key={c.name} className="min-w-0 border-t border-rule pt-3">
            <div className="flex items-center justify-between gap-2">
              <span className="mono truncate text-xs text-ink">{c.name}</span>
              <FreshnessBadge status={f} />
            </div>
            <p className="mt-1 text-xs text-ink-3">
              Last success {c.last_success_at ? fmtAgo(c.last_success_at, now) : 'unavailable'} · every {Math.round(c.interval_seconds / 60)} min
              {c.consecutive_failures > 0 && <span className="text-warn"> · {c.consecutive_failures} failure{c.consecutive_failures > 1 ? 's' : ''}</span>}
            </p>
          </li>
        );
      })}
    </ul>
  );
}