import type { Metadata } from 'next';
import {
  BASE_CONTRACTS,
  AVALANCHE_CONTRACTS,
  ARBITRUM_CONTRACTS,
  POLYGON_CONTRACTS,
  CHAINS,
} from '../lib/contracts';

export const metadata: Metadata = {
  title: 'Contracts — Vaultfire',
  description:
    'Canonical list of all deployed Vaultfire smart contracts across Base, Avalanche, Arbitrum, and Polygon. Every address verified on-chain.',
};

export const dynamic = 'force-static';

function shorten(addr: string) {
  return `${addr.slice(0, 6)}…${addr.slice(-4)}`;
}

function ChainSection({
  label,
  chainKey,
  contracts,
  chainId,
  rpc,
  explorer,
  accent,
}: {
  label: string;
  chainKey: string;
  contracts: readonly { name: string; address: string }[];
  chainId: number;
  rpc: string;
  explorer: string;
  accent: string;
}) {
  return (
    <section className="mb-12">
      <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2 mb-4">
        <h2 className="text-2xl font-bold" style={{ color: accent }}>
          {label}
        </h2>
        <span className="text-sm text-[var(--color-ember-text-muted)]">
          Chain ID {chainId} · {contracts.length} contracts
        </span>
      </div>
      <div className="rounded-xl border border-white/10 overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-white/5 text-left">
            <tr>
              <th className="px-4 py-3 font-semibold">Contract</th>
              <th className="px-4 py-3 font-semibold">Address</th>
              <th className="px-4 py-3 font-semibold text-right">Explorer</th>
            </tr>
          </thead>
          <tbody>
            {contracts.map((c) => (
              <tr
                key={`${chainKey}-${c.name}`}
                className="border-t border-white/5 hover:bg-white/5"
              >
                <td className="px-4 py-3 font-medium">{c.name}</td>
                <td className="px-4 py-3 font-mono text-xs text-[var(--color-ember-text-muted)]">
                  <span className="hidden md:inline">{c.address}</span>
                  <span className="md:hidden">{shorten(c.address)}</span>
                </td>
                <td className="px-4 py-3 text-right">
                  <a
                    href={`${explorer}/address/${c.address}`}
                    target="_blank"
                    rel="noreferrer"
                    className="text-[var(--color-ember-accent)] hover:underline"
                  >
                    View →
                  </a>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p className="mt-3 text-xs text-[var(--color-ember-text-muted)]">
        RPC: <span className="font-mono">{rpc}</span> · Explorer:{' '}
        <a
          href={explorer}
          target="_blank"
          rel="noreferrer"
          className="text-[var(--color-ember-accent)] hover:underline"
        >
          {explorer.replace('https://', '')}
        </a>
      </p>
    </section>
  );
}

export default function ContractsPage() {
  const total =
    BASE_CONTRACTS.length +
    AVALANCHE_CONTRACTS.length +
    ARBITRUM_CONTRACTS.length +
    POLYGON_CONTRACTS.length;

  const DEPLOYER = '0xfA15Ee28939B222B0448261A22156070f0A7813C';

  return (
    <main className="min-h-screen bg-[var(--color-ember-bg)] text-[var(--color-ember-text)] px-6 py-12">
      <div className="max-w-5xl mx-auto">
        <a
          href="/"
          className="text-sm text-[var(--color-ember-text-muted)] hover:text-white transition-colors"
        >
          ← theloopbreaker.com
        </a>

        <h1 className="mt-6 text-4xl md:text-5xl font-bold">
          Vaultfire Contracts
        </h1>
        <p className="mt-4 text-lg text-[var(--color-ember-text-muted)] max-w-3xl">
          The canonical list of every Vaultfire smart contract deployed across 4
          EVM chains. Every address here is verified on its block explorer. No
          placeholders, no test deployments — these are the live production
          addresses.
        </p>

        <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
          <div className="rounded-lg border border-white/10 p-4">
            <div className="text-xs uppercase tracking-wider text-[var(--color-ember-text-muted)]">
              Total contracts
            </div>
            <div className="text-2xl font-bold mt-1">{total}</div>
          </div>
          <div className="rounded-lg border border-white/10 p-4">
            <div className="text-xs uppercase tracking-wider text-[var(--color-ember-text-muted)]">
              Chains
            </div>
            <div className="text-2xl font-bold mt-1">4</div>
          </div>
          <div className="rounded-lg border border-white/10 p-4">
            <div className="text-xs uppercase tracking-wider text-[var(--color-ember-text-muted)]">
              Primary chain
            </div>
            <div className="text-2xl font-bold mt-1">Base</div>
          </div>
          <div className="rounded-lg border border-white/10 p-4">
            <div className="text-xs uppercase tracking-wider text-[var(--color-ember-text-muted)]">
              Standard
            </div>
            <div className="text-2xl font-bold mt-1">ERC-8004</div>
          </div>
        </div>

        <div className="mt-8 rounded-lg border border-white/10 p-4 text-sm">
          <div className="text-xs uppercase tracking-wider text-[var(--color-ember-text-muted)] mb-1">
            Canonical deployer
          </div>
          <div className="font-mono text-xs break-all">{DEPLOYER}</div>
          <div className="mt-1 text-xs text-[var(--color-ember-text-muted)]">
            ghostkey.base.eth — every contract on this page was deployed by this
            address.
          </div>
        </div>

        <div className="mt-12">
          <ChainSection
            label="Base Mainnet"
            chainKey="base"
            contracts={BASE_CONTRACTS}
            chainId={CHAINS.base.id}
            rpc="https://mainnet.base.org"
            explorer={CHAINS.base.explorerUrl}
            accent="#00D9FF"
          />
          <ChainSection
            label="Avalanche C-Chain"
            chainKey="avalanche"
            contracts={AVALANCHE_CONTRACTS}
            chainId={CHAINS.avalanche.id}
            rpc="https://api.avax.network/ext/bc/C/rpc"
            explorer={CHAINS.avalanche.explorerUrl}
            accent="#E84142"
          />
          <ChainSection
            label="Arbitrum One"
            chainKey="arbitrum"
            contracts={ARBITRUM_CONTRACTS}
            chainId={CHAINS.arbitrum.id}
            rpc="https://arb1.arbitrum.io/rpc"
            explorer={CHAINS.arbitrum.explorerUrl}
            accent="#28A0F0"
          />
          <ChainSection
            label="Polygon"
            chainKey="polygon"
            contracts={POLYGON_CONTRACTS}
            chainId={CHAINS.polygon.id}
            rpc="https://polygon-bor-rpc.publicnode.com"
            explorer={CHAINS.polygon.explorerUrl}
            accent="#8247E5"
          />
        </div>

        <div className="mt-12 rounded-xl border border-white/10 p-6">
          <h3 className="text-lg font-semibold mb-3">Verify for yourself</h3>
          <p className="text-sm text-[var(--color-ember-text-muted)] mb-4">
            This page is generated from{' '}
            <a
              href="/api/contracts"
              className="text-[var(--color-ember-accent)] hover:underline"
            >
              /api/contracts
            </a>
            , a public endpoint that returns the same data in JSON. Don&apos;t
            trust — verify every address on the explorer above.
          </p>
          <div className="flex flex-wrap gap-3 text-sm">
            <a
              href="/api/contracts"
              className="rounded-lg border border-white/20 px-4 py-2 hover:border-white/40"
            >
              API: /api/contracts
            </a>
            <a
              href="/api/hub/stats"
              className="rounded-lg border border-white/20 px-4 py-2 hover:border-white/40"
            >
              Live protocol stats
            </a>
            <a
              href="/security"
              className="rounded-lg border border-white/20 px-4 py-2 hover:border-white/40"
            >
              Security & audit status →
            </a>
          </div>
        </div>
      </div>
    </main>
  );
}
