import Link from "next/link";

const STACK = [
  {
    layer: "Account Storage",
    what: "All accounts are stored in browser localStorage under cyberlux-accounts-v1.",
    how: "Passwords are hashed SHA-256 with a static pepper before storage. No server ever receives your password.",
    honest: "SHA-256 with a static pepper is not as strong as Argon2/bcrypt. Suitable for a local-first demo — not a production secret store.",
    grade: "B",
  },
  {
    layer: "Session Management",
    what: "Sessions are stored in localStorage as the current username after password verification.",
    how: "No JWT or server-side token. Session is simply the username string persisted until sign-out.",
    honest: "There is no token expiry or rotation. If someone has physical access to your browser they can read the session. Use private/incognito mode for isolation.",
    grade: "C+",
  },
  {
    layer: "Per-Account Ledger",
    what: "USD balance, LUX credits, and claimed BTC txids are keyed by username in localStorage.",
    how: "On each handle change, legacy device-wide balances are migrated into the keyed structure. Ledger key: cyberlux-account-ledger-v1.",
    honest: "Data is client-side only. Clearing localStorage wipes balances. Export your account bundle from /dashboard to back up.",
    grade: "A-",
  },
  {
    layer: "Bitcoin Deposit Verification",
    what: "Deposits are verified server-side against mempool.space (on-chain) and CoinGecko (BTC/USD rate).",
    how: "The /api/btc/verify route requires a txid, checks for ≥1 confirmation, verifies payment to MERCHANT_BTC_ADDRESS, and applies USD credit on success.",
    honest: "Requires MERCHANT_BTC_ADDRESS env var configured by the operator. Without it, the endpoint returns a configuration error. One-confirmation threshold — standard.",
    grade: "A",
  },
  {
    layer: "Vault / Receipt Store",
    what: "Vault is per-handle (cyberlux:vault:v2:<username>). Stores keys, receipts, and flags.",
    how: "Receipts are written on checkout and mixer actions. Migration from legacy v1 (device-wide) runs once on first sign-in.",
    honest: "Contents are plaintext JSON in localStorage. Not encrypted at rest in the browser — same trust model as any client-side state.",
    grade: "B+",
  },
  {
    layer: "Network Architecture",
    what: "Next.js app deployable behind Tor hidden services via Nginx loopbacks.",
    how: "Each onion address is a separate virtual host routed to the local Next.js process. Configured via systemd + nginx conf blocks documented in DEPLOY.md.",
    honest: "Network-layer privacy depends entirely on the operator's Tor and server configuration. The app itself does not configure Tor — see DEPLOY.md.",
    grade: "Operator-dependent",
  },
];

const GRADE_COLOR: Record<string, string> = {
  "A": "bg-green-900/30 text-green-400 border-green-800",
  "A-": "bg-green-900/20 text-green-400 border-green-800",
  "B+": "bg-emerald-900/20 text-emerald-400 border-emerald-800",
  "B": "bg-cyan-900/20 text-cyan-400 border-cyan-800",
  "C+": "bg-yellow-900/20 text-yellow-400 border-yellow-800",
  "Operator-dependent": "bg-gray-800 text-gray-400 border-gray-700",
};

export default function SecurityAnalysisPage() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-950 to-black text-gray-100">
      <header className="border-b border-gray-800">
        <div className="container mx-auto max-w-6xl px-4 py-5">
          <div className="flex flex-wrap items-center justify-between gap-4">
            <div className="flex items-center gap-3">
              <div className="h-9 w-9 rounded-full bg-gradient-to-r from-red-500 to-orange-600" />
              <div>
                <h1 className="text-xl font-bold">Architecture Breakdown</h1>
                <p className="text-xs text-gray-400">Real technical analysis of the CyberLux stack</p>
              </div>
            </div>
            <nav className="flex flex-wrap items-center gap-4 text-sm">
              <Link href="#stack" className="text-gray-300 hover:text-red-400">Stack</Link>
              <Link href="#opsec" className="text-gray-300 hover:text-red-400">OPSEC Guide</Link>
              <Link href="/" className="rounded-full bg-red-600 px-5 py-2 font-bold hover:bg-red-700">Hub</Link>
            </nav>
          </div>
        </div>
      </header>

      <section className="container mx-auto max-w-6xl px-4 py-12">
        <div className="rounded-2xl border border-amber-800/40 bg-amber-900/10 p-6 mb-10">
          <div className="flex items-start gap-3">
            <span className="text-2xl">⚠️</span>
            <div>
              <div className="font-bold text-amber-300 mb-1">Honest Architecture Document</div>
              <p className="text-sm text-amber-200/70">
                This is a real technical breakdown of how CyberLux actually works — not a marketing audit. Grades
                reflect the actual security posture of each layer. Where limitations exist, they are explicitly
                noted. Read DEPLOY.md for operator-level configuration.
              </p>
            </div>
          </div>
        </div>

        <div className="rounded-2xl bg-gradient-to-r from-gray-900 to-gray-800 p-10">
          <span className="rounded-full bg-red-900/30 px-3 py-1 text-xs font-bold text-red-300">TECHNICAL BREAKDOWN</span>
          <h1 className="mt-5 text-4xl font-bold md:text-5xl">CyberLux Architecture</h1>
          <p className="mt-5 max-w-3xl text-gray-300">
            Layer-by-layer analysis of the actual security model: account storage, session management, Bitcoin
            verification, vault, and network architecture. Honest grades included.
          </p>
          <div className="mt-8 grid grid-cols-3 gap-6 md:grid-cols-6">
            {STACK.map((s) => (
              <div key={s.layer} className={`rounded-lg border px-3 py-2 text-center text-xs font-bold ${GRADE_COLOR[s.grade] ?? "bg-gray-800 text-gray-400 border-gray-700"}`}>
                {s.grade}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="stack" className="container mx-auto max-w-6xl px-4 pb-16 space-y-6">
        <h2 className="text-2xl font-bold">Layer Analysis</h2>
        {STACK.map((s) => (
          <div key={s.layer} className="rounded-2xl border border-gray-800 bg-gray-900/50 p-8">
            <div className="mb-5 flex flex-wrap items-start justify-between gap-4">
              <div>
                <h3 className="text-xl font-bold">{s.layer}</h3>
                <p className="mt-2 text-gray-300">{s.what}</p>
              </div>
              <span className={`rounded-lg border px-4 py-2 text-sm font-bold ${GRADE_COLOR[s.grade] ?? "bg-gray-800 text-gray-400 border-gray-700"}`}>
                {s.grade}
              </span>
            </div>
            <div className="mb-4 rounded-lg bg-gray-800/50 p-4 text-sm text-gray-300">
              <span className="text-green-400 font-bold">How it works: </span>{s.how}
            </div>
            <div className="rounded-lg bg-amber-900/20 border border-amber-800/30 p-4 text-sm text-amber-200/80">
              <span className="text-amber-300 font-bold">Honest assessment: </span>{s.honest}
            </div>
          </div>
        ))}
      </section>

      <section id="opsec" className="container mx-auto max-w-6xl px-4 pb-20">
        <div className="rounded-2xl border border-gray-800 bg-gray-900/30 p-10">
          <h2 className="mb-6 text-2xl font-bold">Practical OPSEC Guide</h2>
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            {[
              { title: "Use Tor Browser on .onion deployments", body: "Safari and Chrome cannot resolve .onion hostnames. Tor Browser is required for accessing the onion version of this site." },
              { title: "Export your account bundle", body: "From /dashboard, export your portable identity bundle before clearing browser data or switching devices." },
              { title: "Verify the BTC address each session", body: "Before sending any Bitcoin, confirm the merchant address matches the one you used last session. Phishing clones will substitute their own address." },
              { title: "localStorage is not encrypted at rest", body: "Your browser's localStorage is readable by JavaScript from the same origin. Do not store high-value secrets here beyond what the app requires." },
              { title: "One-confirmation BTC threshold", body: "The deposit system credits after 1 confirmation — fast but not fully final. For large amounts, wait for 6 confirmations before spending the credited USD." },
              { title: "Operator must configure .env", body: "MERCHANT_BTC_ADDRESS and optional NEXT_PUBLIC_BITCOIN_CHECKOUT_URL must be set in .env.local. Without these, Bitcoin verify returns a config error." },
            ].map((item) => (
              <div key={item.title} className="rounded-xl border border-gray-800 p-5">
                <div className="mb-2 font-bold text-red-300">{item.title}</div>
                <p className="text-sm text-gray-400">{item.body}</p>
              </div>
            ))}
          </div>
          <div className="mt-8 text-center">
            <Link href="/arb-academy" className="text-sm text-red-400 hover:underline">ARB Academy for more →</Link>
          </div>
        </div>
      </section>

      <footer className="border-t border-gray-800 px-4 py-8 text-center text-sm text-gray-600">
        <p>CyberLux Architecture Breakdown · Honest technical documentation · No fabricated audit results</p>
        <div className="mt-2 flex justify-center gap-6">
          <Link href="/" className="hover:text-gray-300">Hub</Link>
          <Link href="/trust" className="hover:text-gray-300">Trust Dashboard</Link>
          <Link href="/reviews" className="hover:text-gray-300">Reviews</Link>
        </div>
      </footer>
    </div>
  );
}