import Link from "next/link";
import { Sparkline } from "@/components/ui/sparkline";
import { cx, formatDuration } from "@/lib/format";
import type { DataHealth } from "@/lib/types";

/** Compact source-health panel for the homepage (server component; data from /v1/data-health). */
export function HealthPanel({ health, className }: { health: DataHealth; className?: string }) {
  const c = health.connectors;
  const ratio = health.healthy_ratio == null ? null : Math.round(health.healthy_ratio * 100);
  const segs: Array<[number, string, string]> = [
    [c.healthy, "bg-positive", "healthy"],
    [c.degraded, "bg-warning", "degraded"],
    [c.recovering, "bg-accent", "recovering"],
    [c.failed, "bg-negative", "failed"],
    [c.paused, "bg-stale", "paused"],
  ];
  return (
    <div className={cx("rounded-md border border-rule bg-surface p-4", className)}>
      <div className="flex items-baseline justify-between">
        <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Source health</h3>
        <Link href="/data-health" className="text-xs text-accent hover:underline">
          Data health →
        </Link>
      </div>
      <div className="mono mt-1 text-2xl font-semibold tnum">
        {ratio == null ? "—" : `${ratio}%`} <span className="text-sm font-normal text-ink-3">connectors healthy</span>
      </div>
      <div className="mt-2 flex h-2 overflow-hidden rounded-full bg-surface-3">
        {segs.map(([n, cls, label]) => (n > 0 ? <span key={label} className={cls} style={{ width: `${(n / Math.max(1, c.total)) * 100}%` }} title={`${n} ${label}`} /> : null))}
      </div>
      <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-ink-3">
        {segs.map(([n, cls, label]) => (
          <span key={label} className="inline-flex items-center gap-1">
            <span className={cx("inline-block h-1.5 w-1.5 rounded-full", cls)} />
            {n} {label}
          </span>
        ))}
      </div>
      <dl className="mt-3 grid grid-cols-2 gap-x-4 text-sm">
        <Row k="Median freshness" v={formatDuration(health.median_freshness_ms)} />
        <Row k="Multi-source quotes" v={`${health.multi_source_quotes} / ${health.quotes_public}`} />
        <Row k="Mean confidence" v={health.mean_confidence == null ? "—" : `${Math.round(health.mean_confidence * 100)}%`} />
        <Row k="Observations / s" v={health.observations_per_sec.toFixed(1)} />
      </dl>
      {health.history.length > 2 && (
        <div className="mt-3 flex items-center justify-between text-[11px] text-ink-3">
          <span>48 h · healthy ratio</span>
          <Sparkline values={health.history.map((h) => h.healthy_ratio)} width={140} height={24} stroke="var(--accent)" />
        </div>
      )}
    </div>
  );
}

function Row({ k, v }: { k: string; v: string }) {
  return (
    <div className="flex items-baseline justify-between border-b border-rule py-1">
      <dt className="text-xs text-ink-3">{k}</dt>
      <dd className="mono text-xs tnum">{v}</dd>
    </div>
  );
}