import { useState } from 'react';
import { cn } from '@/lib/utils';
import digitaloceanLogo from '../../assets/logos/provider-digitalocean.svg';
import hetznerLogo from '../../assets/logos/provider-hetzner.svg';
import linodeLogo from '../../assets/logos/provider-linode.svg';
import scalewayLogo from '../../assets/logos/provider-scaleway.svg';
import vultrLogo from '../../assets/logos/provider-vultr.svg';
import { Section } from '../ui/section';
import perfData from './vendor-matrix-data.json';

/*
 * vibecarbon.com-SPECIFIC section. HomePreview is the Launch-UI rebuild of the
 * vibecarbon.com homepage (it will replace Home as the marketing site); it
 * ships with the carbon template on purpose — users are welcome to crib the
 * sections. Wire this section into HomePreview when it takes over as Home.
 *
 * Sovereignty / "deploy anywhere" section: an honest vendor × deploy-scenario
 * matrix where every supported cell carries its measured deploy time. The
 * numbers come from `vendor-matrix-data.json`, a generated byte-identical
 * copy of the root repo's `docs/perf-data.json` — refreshed automatically by
 * each green CI perf run, never hand-edited (the census walk in
 * tests/unit/metrics/readme-provider-coverage.test.ts enforces the sync).
 *
 * The `tiers` values mirror each provider's `SUPPORTED_TIERS` in the CLI
 * (src/lib/providers/*.js); the same census walk enforces that sync too, so
 * a tier flip in the CLI fails unit tests until this file follows.
 *
 * Cell language: a measured cell shows its timing; an applicable cell with no
 * number yet — an unbuilt scenario ('soon') or an unmeasured command on a
 * supported one (failover, which CI does not emit timings for yet) — shows
 * "Coming soon"; a cell that will never hold a number (failover on a non-HA
 * tier) is a dash.
 */

type Support = 'yes' | 'beta' | 'soon' | 'no';

const TIERS = [
  { key: 'compose', label: 'Compose', note: 'single server' },
  { key: 'compose-ha', label: 'Compose HA', note: '2 region replication' },
  { key: 'k8s', label: 'Kubernetes', note: 'autoscaling' },
  { key: 'k8s-ha', label: 'Kubernetes HA', note: 'autoscaling / multi-region' },
] as const;

type TierKey = (typeof TIERS)[number]['key'];

interface ProviderRow {
  /** Provider registry key — must match src/lib/providers/*.js and perf-data. */
  id: string;
  name: string;
  /** Official mark (Simple Icons, CC0), brand fill baked into the SVG. */
  logo: string;
  badge?: { text: string; tone: 'success' | 'primary' };
  tiers: Record<TierKey, Support>;
}

const PROVIDERS: ProviderRow[] = [
  {
    id: 'hetzner',
    name: 'Hetzner Cloud',
    logo: hetznerLogo,
    tiers: { compose: 'yes', 'compose-ha': 'yes', k8s: 'yes', 'k8s-ha': 'yes' },
  },
  {
    id: 'digitalocean',
    name: 'DigitalOcean',
    logo: digitaloceanLogo,
    tiers: { compose: 'yes', 'compose-ha': 'yes', k8s: 'yes', 'k8s-ha': 'yes' },
  },
  {
    id: 'linode',
    name: 'Linode',
    logo: linodeLogo,
    badge: { text: 'New', tone: 'success' },
    tiers: { compose: 'yes', 'compose-ha': 'yes', k8s: 'soon', 'k8s-ha': 'soon' },
  },
  {
    id: 'vultr',
    name: 'Vultr',
    logo: vultrLogo,
    badge: { text: 'New', tone: 'success' },
    tiers: { compose: 'yes', 'compose-ha': 'yes', k8s: 'soon', 'k8s-ha': 'soon' },
  },
  {
    id: 'scaleway',
    name: 'Scaleway',
    logo: scalewayLogo,
    badge: { text: 'New', tone: 'success' },
    tiers: { compose: 'yes', 'compose-ha': 'yes', k8s: 'soon', 'k8s-ha': 'soon' },
  },
];

// ---------------------------------------------------------------------------
// Measured timings — read from the generated data copy
// ---------------------------------------------------------------------------

interface PerfScenario {
  deploy?: number;
  'warm-deploy'?: number;
  backup?: number;
  restore?: number;
  scale?: number;
  /** Not emitted by CI yet; the failover tab reads it the day it appears. */
  failover?: number;
  destroy?: number;
}

const SCENARIOS: Record<string, Record<string, PerfScenario> | undefined> = Object.fromEntries(
  Object.entries(
    perfData.providers as Record<string, { scenarios: Record<string, PerfScenario> }>
  ).map(([id, entry]) => [id, entry.scenarios])
);

function formatDuration(ms: number): string {
  if (ms < 1_000) return `${Math.round(ms)}ms`;
  const totalSeconds = ms / 1_000;
  if (totalSeconds < 60) return `${totalSeconds.toFixed(1)}s`;
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = Math.round(totalSeconds % 60);
  const carry = Math.floor(seconds / 60);
  return `${minutes + carry}m ${seconds % 60}s`;
}

// ---------------------------------------------------------------------------
// Cells
// ---------------------------------------------------------------------------

/** The perf-tracked CLI commands; two tabs show timing pairs. */
type StepKey = 'deploy' | 'backup-restore' | 'scale' | 'failover' | 'destroy';
const STEP_TABS: Array<{ key: StepKey; label: string }> = [
  { key: 'deploy', label: 'deploy' },
  { key: 'backup-restore', label: 'backup / restore' },
  { key: 'scale', label: 'scale' },
  { key: 'failover', label: 'failover' },
  { key: 'destroy', label: 'destroy' },
];

/** Pair tabs: [top, bottom] timing keys, plus the row-key labels for each. */
const PAIRS: Partial<Record<StepKey, [keyof PerfScenario, keyof PerfScenario]>> = {
  deploy: ['deploy', 'warm-deploy'],
  'backup-restore': ['backup', 'restore'],
};
const PAIR_LABELS: Partial<Record<StepKey, [string, string]>> = {
  deploy: ['New Deploy', 'Redeploy'],
  'backup-restore': ['Backup', 'Restore'],
};

/** Failover is an HA capability; it never applies to the single-* tiers. */
const HA_TIERS: ReadonlySet<TierKey> = new Set(['compose-ha', 'k8s-ha']);

function ComingSoon() {
  return (
    <span className="flex h-[44px] items-center justify-center">
      <span className="text-muted-foreground rounded-full border border-border px-2.5 py-1 text-[10.5px] font-semibold tracking-wide uppercase">
        Coming soon
      </span>
    </span>
  );
}

function Cell({
  support,
  timings,
  step,
  tier,
}: {
  support: Support;
  timings?: PerfScenario;
  step: StepKey;
  tier: TierKey;
}) {
  // A command that can never apply to this tier is a dash whatever the
  // support state — "coming soon" is reserved for cells that will one day
  // hold a number.
  if (support === 'no' || (step === 'failover' && !HA_TIERS.has(tier)))
    return (
      <span className="text-muted-foreground/50 flex h-[44px] items-center justify-center text-lg">
        —
      </span>
    );
  if (support === 'beta') {
    return (
      <span className="flex h-[44px] items-center justify-center">
        <span className="border-primary text-primary rounded-full border px-2.5 py-1 text-[10.5px] font-semibold tracking-wide uppercase">
          Beta
        </span>
      </span>
    );
  }
  if (support === 'soon') return <ComingSoon />;

  // Supported: lead with the measured timing(s) when this scenario has a
  // green CI baseline; "coming soon" otherwise — the applicable-but-unmeasured
  // cell (e.g. failover, which CI does not emit timings for yet) makes the
  // same promise as an unbuilt scenario: a number is on its way. Pair tabs
  // (deploy, backup/restore) stack two times, labeled once per table by the
  // row key; the rest are a single time.
  const pair = PAIRS[step];
  if (!pair) {
    const value = timings?.[step as keyof PerfScenario];
    if (value == null) return <ComingSoon />;
    return (
      <span className="flex h-[44px] items-center justify-center text-[17px] leading-none font-semibold tabular-nums">
        {formatDuration(value)}
      </span>
    );
  }

  const top = timings?.[pair[0]];
  const bottom = timings?.[pair[1]];
  if (top == null && bottom == null) return <ComingSoon />;
  return (
    <span className="flex h-[44px] flex-col items-center justify-center gap-2.5">
      <span className="flex h-[17px] items-center text-[17px] leading-none font-semibold tabular-nums">
        {top != null ? formatDuration(top) : '—'}
      </span>
      <span className="flex h-[17px] items-center text-[17px] leading-none font-semibold tabular-nums">
        {bottom != null ? formatDuration(bottom) : '—'}
      </span>
    </span>
  );
}

/** Once-per-table timing-pair key, aligned to the stacked pair in every cell. */
function RowKey({ labels }: { labels: [string, string] }) {
  return (
    <span className="flex h-[44px] flex-col items-end justify-center gap-2.5">
      <span className="text-muted-foreground/70 flex h-[17px] items-center text-[11.5px] font-semibold tracking-wider uppercase whitespace-nowrap">
        {labels[0]}
      </span>
      <span className="text-muted-foreground/70 flex h-[17px] items-center text-[11.5px] font-semibold tracking-wider uppercase">
        {labels[1]}
      </span>
    </span>
  );
}

// ---------------------------------------------------------------------------
// Section
// ---------------------------------------------------------------------------

export default function VendorMatrix() {
  const [step, setStep] = useState<StepKey>('deploy');
  return (
    <Section id="deploy">
      <div className="mx-auto max-w-5xl">
        <div className="text-center">
          {/* Leads with the measurement, not the ideology. The Sovereign and
              Agnostic argument this used to open with now lives in the pillars
              section above, and making it twice weakened both. */}
          <div className="text-primary text-sm font-semibold tracking-[0.12em] uppercase">
            Performance
          </div>
          <h2 className="mt-3 text-3xl font-black tracking-tight text-balance sm:text-4xl md:text-5xl">
            Fast Automated DevOps.
          </h2>
          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-balance sm:text-lg">
            Vibecarbon CLI commands are constantly tested and optimized for speed and reliability on
            real infrastructure.
          </p>
        </div>

        {/* One tab per perf-tracked CLI command; the table below re-reads
            the same generated data for whichever command is selected. */}
        <div
          className="mt-10 flex flex-wrap justify-center gap-2 sm:mt-12"
          role="tablist"
          aria-label="CLI command"
        >
          {STEP_TABS.map((tab) => (
            <button
              key={tab.key}
              type="button"
              role="tab"
              aria-selected={step === tab.key}
              onClick={() => setStep(tab.key)}
              className={cn(
                'cursor-pointer rounded-full border px-4 py-1.5 font-mono text-sm transition-colors',
                step === tab.key
                  ? 'border-primary/40 bg-primary/10 text-primary'
                  : 'text-muted-foreground border-border hover:border-primary/30 hover:text-foreground'
              )}
            >
              {tab.label}
            </button>
          ))}
        </div>

        <div className="glass-3 mt-6 overflow-hidden rounded-2xl border border-border sm:mt-8">
          <div className="overflow-x-auto">
            <table className="w-full min-w-[700px] border-collapse">
              <thead>
                <tr>
                  <th className="text-muted-foreground border-b border-border px-6 py-5 text-left text-xs font-semibold tracking-wide uppercase">
                    Provider
                  </th>
                  {/* Row-key column. Fixed width so the timing columns sit in
                      the same place whether or not a tab renders the key. */}
                  <th className="w-[104px] min-w-[104px] border-b border-border" />
                  {TIERS.map((t) => (
                    <th
                      key={t.key}
                      className="text-muted-foreground border-b border-border px-4 py-5 text-center text-xs font-semibold tracking-wide whitespace-nowrap uppercase"
                    >
                      {t.label}
                      {/* block + w-fit forces the pill onto its own line
                          despite the th's whitespace-nowrap. */}
                      <span className="border-secondary-accent/30 text-secondary-accent mx-auto mt-1.5 block w-fit rounded-full border px-2.5 py-0.5 text-xs font-medium tracking-normal normal-case">
                        {t.note}
                      </span>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {PROVIDERS.map((p, i) => (
                  <tr key={p.id}>
                    {/* Every cell renders a fixed 44px-tall content box (the
                        h-[44px] wrappers below), so the table keeps one height
                        whichever tab is selected — stacked timing pairs,
                        single values, chips, and dashes all occupy the same
                        row. */}
                    <td className="border-b border-border/60 px-6 py-4">
                      <div className="flex items-center gap-3">
                        <img src={p.logo} alt="" aria-hidden="true" className="size-8 shrink-0" />
                        <div className="flex items-center gap-2 text-[15px] font-semibold">
                          {/* min-width spans the longest name so every row's
                              badge starts at the same x. */}
                          <span className="min-w-28">{p.name}</span>
                          {p.badge && (
                            <span
                              className={cn(
                                'rounded-full border px-1.5 text-[10px] font-bold tracking-wide uppercase',
                                p.badge.tone === 'success'
                                  ? 'border-success text-success'
                                  : 'border-primary text-primary'
                              )}
                            >
                              {p.badge.text}
                            </span>
                          )}
                        </div>
                      </div>
                    </td>
                    <td className="border-b border-border/60 py-4 pr-1 pl-2 text-right">
                      {/* The key reads once, on the top row; the alignment
                          carries it for the rows below. Only the pair tabs
                          need it. */}
                      {i === 0 && PAIR_LABELS[step] && <RowKey labels={PAIR_LABELS[step]} />}
                    </td>
                    {TIERS.map((t) => (
                      <td key={t.key} className="border-b border-border/60 px-4 py-4 text-center">
                        <Cell
                          support={p.tiers[t.key]}
                          timings={SCENARIOS[p.id]?.[t.key]}
                          step={step}
                          tier={t.key}
                        />
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="text-muted-foreground mt-5 flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm">
          <span className="inline-flex items-center gap-2">
            <span className="text-muted-foreground/50">—</span> Not applicable
          </span>
        </div>
      </div>
    </Section>
  );
}