import type { Metadata } from 'next';
import { V3_API_ROUTES } from '../api/v3/_lib/inventory';
import { V3_REQUEST_ID_EXAMPLE } from '../api/v3/_lib/validation';

export const metadata: Metadata = {
  title: 'Vaultfire V3 — Read-only developer catalog',
  description: 'Explicitly versioned, fail-closed Vaultfire V3 API and capability dispositions.',
};

const colors = {
  supported: '#34d399',
  degraded: '#fbbf24',
  unavailable: '#a1a1aa',
  retired: '#fb7185',
} as const;

const displayPath = (path: string) => path
  .replace(':name', 'MultisigGovernanceV3')
  .replace(':bondId', '1')
  .replace(':disputeId', '1')
  .replace(':taskId', '1')
  .replace(':proposalId', '1')
  .replace(':requestId', V3_REQUEST_ID_EXAMPLE)
  .replace(':challengeId', `0x${'0'.repeat(64)}`)
  .replace(':mandateHash', `0x${'0'.repeat(64)}`)
  .replace(':evidenceHash', `0x${'0'.repeat(64)}`);

export default function V3DeveloperCatalog() {
  const groups = ['supported', 'degraded', 'unavailable', 'retired'] as const;
  return (
    <main style={{ minHeight: '100dvh', background: '#09090B', color: '#F4F4F5', padding: '56px 24px 88px' }}>
      <style>{`
        .v3-route-row {
          display: grid;
          grid-template-columns: 76px minmax(260px, 1.25fr) minmax(240px, 1fr);
        }
        @media (max-width: 760px) {
          .v3-route-row {
            grid-template-columns: 68px minmax(0, 1fr);
          }
          .v3-route-row > p {
            grid-column: 1 / -1;
          }
        }
      `}</style>
      <div style={{ maxWidth: 1060, margin: '0 auto' }}>
        <a href="/" style={{ color: '#a1a1aa', textDecoration: 'none', fontSize: 13 }}>← Vaultfire</a>
        <div style={{
          display: 'inline-flex', marginLeft: 16, padding: '5px 10px', borderRadius: 999,
          border: '1px solid rgba(255,107,53,.35)', color: '#FF8C5A', font: '600 11px JetBrains Mono, monospace',
        }}>V3 · READ ONLY</div>

        <section style={{ padding: '52px 0 44px', borderBottom: '1px solid rgba(255,255,255,.08)' }}>
          <p style={{ color: '#FF8C5A', font: '600 12px JetBrains Mono, monospace', letterSpacing: '.12em' }}>
            DEVELOPER CATALOG / 3.0.0
          </p>
          <h1 style={{ fontSize: 'clamp(36px, 6vw, 68px)', lineHeight: 1.02, letterSpacing: '-.045em', margin: '14px 0 20px', maxWidth: 850 }}>
            Explicit V3 reads. No invented state.
          </h1>
          <p style={{ color: '#a1a1aa', fontSize: 17, lineHeight: 1.75, maxWidth: 760, margin: 0 }}>
            This additive V3 surface reports what is supported, deferred, unavailable, or retired.
            Deployment-backed reads return typed unconfigured responses until a verified V3 address and
            read adapter exist. API handlers never fall back to V2, pay, or write; this page does not request wallet authorization or signatures.
          </p>
        </section>

        <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))', gap: 12, padding: '28px 0 48px' }}>
          {groups.map((group) => (
            <div key={group} style={{ background: '#111114', border: '1px solid rgba(255,255,255,.07)', borderRadius: 14, padding: 20 }}>
              <div style={{ color: colors[group], font: '600 11px JetBrains Mono, monospace', textTransform: 'uppercase', letterSpacing: '.08em' }}>{group}</div>
              <div style={{ fontSize: 30, fontWeight: 700, marginTop: 8 }}>{V3_API_ROUTES.filter((route) => route.disposition === group).length}</div>
              <div style={{ color: '#a1a1aa', fontSize: 12, marginTop: 4 }}>versioned routes</div>
            </div>
          ))}
        </section>

        <section>
          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 20, alignItems: 'end', marginBottom: 18, flexWrap: 'wrap' }}>
            <div>
              <p style={{ color: '#a1a1aa', font: '600 11px JetBrains Mono, monospace', letterSpacing: '.1em', margin: '0 0 8px' }}>ROUTE INVENTORY</p>
              <h2 style={{ fontSize: 27, letterSpacing: '-.025em', margin: 0 }}>V3 catalog surface</h2>
            </div>
            <a href="/api/v3/migration/dispositions" style={{ color: '#FF8C5A', font: '500 12px JetBrains Mono, monospace' }}>
              machine-readable dispositions
            </a>
          </div>
          <div style={{ border: '1px solid rgba(255,255,255,.08)', borderRadius: 16, overflow: 'hidden' }}>
            {V3_API_ROUTES.map((route, index) => {
              const queryExample = route.id === 'bond-party' ? `?party=0x${'2'.repeat(40)}` : route.id === 'pull-credit' ? `?contract=0x${'2'.repeat(40)}&asset=0x${'3'.repeat(40)}&holder=0x${'4'.repeat(40)}` : '';
              const concrete = `${displayPath(route.path)}${queryExample}`;
              const href = route.method === 'GET' && !concrete.includes(':') ? concrete : undefined;
              return (
                <article key={route.id} className="v3-route-row" style={{
                  gap: 18, padding: '18px 20px', alignItems: 'start',
                  background: index % 2 ? '#0d0d10' : '#111114',
                  borderTop: index ? '1px solid rgba(255,255,255,.055)' : 'none',
                }}>
                  <div>
                    <span style={{ color: route.method === 'GET' ? '#60a5fa' : '#fb7185', font: '600 11px JetBrains Mono, monospace' }}>{route.method}</span>
                    <div style={{ color: colors[route.disposition], fontSize: 10, marginTop: 7, textTransform: 'uppercase' }}>{route.disposition}</div>
                  </div>
                  <div style={{ minWidth: 0 }}>
                    {href ? (
                      <a href={href} style={{ color: '#e4e4e7', font: '500 12px JetBrains Mono, monospace', overflowWrap: 'anywhere' }}>{route.path}</a>
                    ) : (
                      <code style={{ color: '#e4e4e7', fontSize: 12, overflowWrap: 'anywhere' }}>{route.path}</code>
                    )}
                    <div style={{ color: '#a1a1aa', fontSize: 11, marginTop: 7 }}>{route.canonicalSdkRoute ? `SDK: ${route.canonicalSdkRoute}` : 'Static disposition surface'}</div>
                  </div>
                  <p style={{ color: '#a1a1aa', fontSize: 13, lineHeight: 1.55, margin: 0 }}>{route.description}</p>
                </article>
              );
            })}
          </div>
        </section>

        <section style={{ marginTop: 48, padding: 26, borderRadius: 16, background: 'rgba(255,107,53,.055)', border: '1px solid rgba(255,107,53,.18)' }}>
          <h2 style={{ fontSize: 18, margin: '0 0 10px' }}>Protected-decision boundary</h2>
          <p style={{ color: '#a1a1aa', lineHeight: 1.7, margin: 0, maxWidth: 880 }}>
            Behavioral scoring, reputation, loyalty, quality, belief, biometrics, profiling, surveillance,
            and subjective flourishing inputs are prohibited from custody, access, eligibility, pricing,
            settlement, slashing, disputes, and routing. Retired capabilities stay visible as dispositions,
            not executable features.
          </p>
        </section>
      </div>
    </main>
  );
}
