/**
 * Shared building blocks for entity pages (constellations, operators, countries). Server components only.
 * Kept local to `components/entities/` so shared UI stays untouched.
 */
import { ExternalLink as ExternalIcon } from 'lucide-react';
import Link from 'next/link';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { fmtDateTime, fmtInt, titleCase } from '@/lib/format';
import { EVENT_TYPE_LABELS, SITE_NAME, SITE_URL, routes } from '@/lib/site';
import type { EventRow } from '@/lib/types';
import { Unavailable } from '@/components/ui/unavailable';

// ------------------------------------------------------------------------------------------------------- metadata
export function entityMetadata({ title, description, path, ogImage }: { title: string; description: string; path: string; ogImage?: string }) {
  const url = `${SITE_URL}${path}`;
  const images = ogImage ? [{ url: ogImage, width: 1200, height: 630 }] : undefined;
  return {
    title,
    description,
    alternates: { canonical: path },
    openGraph: { type: 'website' as const, siteName: SITE_NAME, url, title: `${title} | ${SITE_NAME}`, description, images },
    twitter: { card: 'summary_large_image' as const, title: `${title} | ${SITE_NAME}`, description, images: images?.map((i) => i.url) },
  };
}

// --------------------------------------------------------------------------------------------------- URL helpers
export type Params = Record<string, string | undefined>;

/** Build an href for the current list page with one param changed (drops `page`). */
export function withParam(base: string, current: Params, key: string, value: string | undefined): string {
  const p = new URLSearchParams();
  for (const [k, v] of Object.entries(current)) if (v && k !== 'page' && k !== key) p.set(k, v);
  if (value) p.set(key, value);
  const s = p.toString();
  return s ? `${base}?${s}` : base;
}

export function first(v: string | string[] | undefined): string | undefined {
  return Array.isArray(v) ? v[0] : v;
}

// -------------------------------------------------------------------------------------------------------- chips
export interface ChipOption {
  value: string | undefined;
  label: string;
  count?: number | null;
}

/** Row of link chips (sort / filter). ≥ 44 px tap targets, horizontally scrollable on small screens. */
export function ChipRow({ label, options, current, base, params, paramKey, className }: { label: string; options: ChipOption[]; current: string | undefined; base: string; params: Params; paramKey: string; className?: string }) {
  return (
    <div className={cn('flex min-w-0 items-center gap-2', className)}>
      <span className="eyebrow shrink-0">{label}</span>
      <ul className="no-scrollbar flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto py-1" role="list">
        {options.map((o) => {
          const active = (o.value ?? '') === (current ?? '');
          return (
            <li key={o.label} className="shrink-0">
              <Link
                href={withParam(base, params, paramKey, o.value)}
                aria-current={active ? 'true' : undefined}
                className={cn('inline-flex h-11 items-center gap-1.5 rounded-md border px-3 text-[13px] transition-colors', active ? 'border-accent/40 bg-accent-soft text-accent' : 'border-rule text-ink-2 hover:bg-plane-2 hover:text-ink')}
              >
                {o.label}
                {o.count != null && <span className="tnum text-[11px] text-ink-3">{fmtInt(o.count)}</span>}
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

// ---------------------------------------------------------------------------------------------------- KPI strip
export interface Kpi {
  label: string;
  value: ReactNode;
  hint?: ReactNode;
  derived?: boolean;
}

/** Hairline-separated strip of big numbers — not a wall of cards. */
export function KpiStrip({ items, className }: { items: Kpi[]; className?: string }) {
  return (
    <dl className={cn('grid grid-cols-2 gap-x-6 gap-y-5 border-y border-rule py-5 sm:grid-cols-3 lg:grid-cols-6', className)}>
      {items.map((k) => (
        <div key={k.label} className="min-w-0">
          <dt className="eyebrow flex flex-wrap items-center gap-1.5">
            {k.label}
            {k.derived && <Derived />}
          </dt>
          <dd className="tnum mt-1 text-2xl font-semibold tracking-tight md:text-[28px]">{k.value}</dd>
          {k.hint && <dd className="mt-0.5 text-xs text-ink-3">{k.hint}</dd>}
        </div>
      ))}
    </dl>
  );
}

/** Marks a derived metric and links to the methodology. */
export function Derived({ className }: { className?: string }) {
  return (
    <Link href={routes.methodology()} className={cn('inline-flex items-center rounded-sm border border-accent-2/40 px-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-accent-2 no-underline hover:bg-accent-2-soft', className)} title="Derived metric — see methodology">
      derived
    </Link>
  );
}

// ---------------------------------------------------------------------------------------------------- hero bits
export function HeroFacts({ items }: { items: { label: string; value: ReactNode }[] }) {
  const rows = items.filter((i) => i.value !== null && i.value !== undefined && i.value !== '—');
  if (!rows.length) return null;
  return (
    <dl className="mt-5 flex flex-wrap gap-x-8 gap-y-3 text-sm">
      {rows.map((i) => (
        <div key={i.label} className="min-w-0">
          <dt className="eyebrow">{i.label}</dt>
          <dd className="mt-0.5 text-ink">{i.value}</dd>
        </div>
      ))}
    </dl>
  );
}

export function ExternalLink({ href, children }: { href: string; children?: ReactNode }) {
  let host = href;
  try {
    host = new URL(href).host.replace(/^www\./, '');
  } catch {
    /* keep raw */
  }
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" className="link inline-flex items-center gap-1 text-sm">
      {children ?? host} <ExternalIcon className="size-3.5" aria-hidden />
    </a>
  );
}

/** Small kind/service/stage label (uppercase mono). */
export function Tag({ children, tone = 'ink', className }: { children: ReactNode; tone?: 'ink' | 'accent' | 'accent-2' | 'warn'; className?: string }) {
  const tones = { ink: 'border-rule text-ink-2', accent: 'border-accent/40 text-accent', 'accent-2': 'border-accent-2/40 text-accent-2', warn: 'border-warn/40 text-warn' };
  return <span className={cn('mono inline-flex items-center rounded border px-1.5 py-0.5 text-[11px] uppercase tracking-wide', tones[tone], className)}>{children}</span>;
}

// ------------------------------------------------------------------------------------------------------ panels
/** Titled block used inside two-column layouts (lighter than <Section>). */
export function Block({ title, eyebrow, action, children, className, id }: { title: ReactNode; eyebrow?: string; action?: { href: string; label: string }; children: ReactNode; className?: string; id?: string }) {
  return (
    <section id={id} className={cn('py-6', className)}>
      <div className="mb-4 flex items-end justify-between gap-4">
        <div>
          {eyebrow && <p className="eyebrow">{eyebrow}</p>}
          <h2 className="text-lg font-semibold tracking-tight md:text-xl">{title}</h2>
        </div>
        {action && (
          <Link href={action.href} className="shrink-0 py-1 text-sm text-accent hover:underline">
            {action.label} →
          </Link>
        )}
      </div>
      {children}
    </section>
  );
}

/** Planned-but-not-yet-connected data: honest state, never fabricated. */
export function PlannedUnavailable({ what, note }: { what: string; note: string }) {
  return (
    <div>
      <Unavailable what={what} />
      <p className="mt-2 text-xs text-ink-3">{note}</p>
    </div>
  );
}

// ------------------------------------------------------------------------------------------------------- events
export function EventsList({ events, emptyWhat = 'Events' }: { events: EventRow[] | null | undefined; emptyWhat?: string }) {
  if (!events) return <Unavailable what={emptyWhat} />;
  if (!events.length) return <p className="text-sm text-ink-3">No events recorded for this entity yet.</p>;
  return (
    <ol className="divide-y divide-rule">
      {events.map((e) => (
        <li key={e.id} className="grid gap-1 py-3 sm:grid-cols-[150px_minmax(0,1fr)] sm:gap-4">
          <time dateTime={e.event_time} className="mono text-xs text-ink-3">{fmtDateTime(e.event_time)}</time>
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-2">
              <Tag>{EVENT_TYPE_LABELS[e.type] ?? titleCase(e.type)}</Tag>
              <p className="text-sm font-medium text-ink">{e.title}</p>
            </div>
            {e.summary && <p className="mt-1 text-sm text-ink-2">{e.summary}</p>}
            <p className="mt-1 text-xs text-ink-3">
              {e.source_name ? `Source: ${e.source_name}` : 'Source unavailable'} · confidence {Math.round(e.confidence * 100)}%
            </p>
          </div>
        </li>
      ))}
    </ol>
  );
}

// ------------------------------------------------------------------------------------------------------- tables
export function ScrollTable({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn('-mx-1 overflow-x-auto px-1 md:mx-0 md:px-0', className)}>{children}</div>;
}

export function EmptyRow({ colSpan, children }: { colSpan: number; children: ReactNode }) {
  return (
    <tr>
      <td colSpan={colSpan} className="py-6 text-center text-sm text-ink-3">{children}</td>
    </tr>
  );
}