'use client'; import React, { useEffect, useState } from 'react';import { ChevronLeft, KeyRound, ShieldCheck, AlertTriangle, FileKey } from 'lucide-react';import { fetchInfonetStatus, type InfonetStatus } from '@/mesh/infonetEconomyClient'; interface FunctionKeyViewProps {  onBack: () => void;} const PIECE_STATUS: Record<string, { color: string; label: string }> = {  not_implemented: { color: 'text-gray-500',   label: 'NOT IMPLEMENTED' },  scaffolding:     { color: 'text-amber-400',  label: 'SCAFFOLDING' },  reference_impl:  { color: 'text-blue-400',   label: 'REFERENCE' },  production_rust: { color: 'text-green-400',  label: 'PRODUCTION' },}; export default function FunctionKeyView({ onBack }: FunctionKeyViewProps) {  const [status, setStatus] = useState<InfonetStatus | null>(null);   useEffect(() => {    let cancelled = false;    void (async () => {      try {        const s = await fetchInfonetStatus();        if (!cancelled) setStatus(s);      } catch {        // ignore — render the design overview without status      }    })();    return () => { cancelled = true; };  }, []);   return (    <div className="h-full flex flex-col overflow-hidden">      <div className="flex items-center justify-between border-b border-gray-800/50 pb-3 mb-4 shrink-0">        <button onClick={onBack} className="flex items-center text-cyan-400 hover:text-cyan-300 text-sm">          <ChevronLeft size={14} className="mr-1" /> BACK        </button>        <div className="text-sm text-purple-400 font-bold uppercase tracking-widest flex items-center gap-2">          <KeyRound size={16} /> FUNCTION KEYS — Anonymous Citizenship Proof        </div>        <div />      </div>       <div className="flex-1 overflow-y-auto pr-3 space-y-4">        <div className="text-xs text-gray-400 leading-relaxed">          A citizen proves &quot;I am an Infonet citizen&quot; to a real-world          operator <span className="text-purple-400">without revealing their Infonet identity</span>.          The naive approach (scramble a public key, record each redemption on chain) leaks          identity through metadata correlation. The Function Keys design is six pieces;          five are implemented; one (issuance via blind signatures / anonymous credentials)          waits on a cryptographic primitive decision.        </div>         {status && (          <div className="border border-gray-800 bg-black/40 p-3">            <div className="text-xs uppercase tracking-wider text-purple-400 mb-2 flex items-center gap-1">              <ShieldCheck size={12} /> Privacy Primitive Status            </div>            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">              {Object.entries(status.privacy_primitive_status).map(([k, v]) => {                const style = PIECE_STATUS[v] ?? PIECE_STATUS.not_implemented;                return (                  <div key={k}>                    <div className="text-gray-500 capitalize">{k.replace(/_/g, ' ')}</div>                    <div className={`${style.color} font-bold`}>{style.label}</div>                  </div>                );              })}            </div>            <div className="text-xs text-gray-500 mt-2">              Cryptographic primitives are stubbed via the locked Protocol contracts in              <span className="font-mono"> services/infonet/privacy/contracts.py</span>.              When the privacy-core Rust binding lands, the scaffolding swaps for the              production class — no caller changes.            </div>          </div>        )}         <div className="border border-gray-800 bg-black/40 p-3">          <div className="text-xs uppercase tracking-wider text-purple-400 mb-2">            The Six Pieces          </div>          <ol className="text-xs space-y-2 text-gray-300">            <li>              <span className="text-amber-400 font-bold">1. Issuance</span>{' '}              <span className="text-gray-500">(NOT IMPLEMENTED — blind sig / BBS+ / U-Prove / Idemix)</span>              <div className="text-gray-400 ml-4">                Protocol issues a credential proving citizenship without linking to node_id.              </div>            </li>            <li>              <span className="text-green-400 font-bold">2. Nullifiers</span>{' '}              <span className="text-gray-500">(implemented — pure SHA-256)</span>              <div className="text-gray-400 ml-4">                <span className="font-mono">nullifier = H(secret || operator_id)</span>.                Different operators see different nullifiers for the same key — no                cross-operator linkage. One-time-use per (key, operator) pair via a                tracker.              </div>            </li>            <li>              <span className="text-green-400 font-bold">3. Challenge-Response</span>{' '}              <span className="text-gray-500">(implemented — HMAC-SHA256 placeholder)</span>              <div className="text-gray-400 ml-4">                Operator issues a fresh nonce; key-holder signs with the Function Key&apos;s                secret. Defeats screenshot, replay, key-sharing. Production wires the chosen                blind-sig scheme; API stays compatible.              </div>            </li>            <li>              <span className="text-green-400 font-bold">4. Two-Phase Commit Receipts</span>{' '}              <span className="text-gray-500">(implemented)</span>              <div className="text-gray-400 ml-4">                Phase 1: operator signs a verification receipt (day-bucket date,                nullifier prefix only — NO timestamps, NO full nullifiers, NO node_id).                Phase 2: citizen counter-signs after service rendered. Both parties hold                a copy. <span className="text-purple-400">Receipts NEVER published on-chain.</span>              </div>            </li>            <li>              <span className="text-green-400 font-bold">5. Enumerated Denial Codes</span>{' '}              <span className="text-gray-500">(implemented — 3-value enum)</span>              <div className="text-gray-400 ml-4">                Operators can reject for exactly three reasons: invalid signature,                nullifier already seen, rate limit exceeded. Adding a 4th code is a hard                fork. Anti-discrimination by design.              </div>            </li>            <li>              <span className="text-green-400 font-bold">6. Batched Settlement</span>{' '}              <span className="text-gray-500">(implemented)</span>              <div className="text-gray-400 ml-4">                Operators settle in aggregate. Chain sees{' '}                <span className="font-mono">&#123;operator_id, period_id, count&#125;</span>{' '}                — never per-receipt detail. Fraud detection via statistical auditing,                not per-redemption traces.              </div>            </li>          </ol>        </div>         <div className="border border-amber-900/50 bg-amber-900/10 p-3">          <div className="flex items-center gap-2 text-amber-400 text-xs font-bold uppercase tracking-wider mb-1">            <AlertTriangle size={12} /> Production Readiness          </div>          <div className="text-xs text-gray-400 space-y-1">            <div>              <FileKey size={11} className="inline mr-1" />              The HMAC-SHA256 placeholder requires the verifier to know the citizen&apos;s              secret — that is NOT private. Production replaces it with a blind-sig              scheme that verifies without learning the secret.            </div>            <div>              The cryptographic scheme decision (RSA blind sigs vs BBS+ vs U-Prove vs              Idemix) is open per IMPLEMENTATION_PLAN §6.4.            </div>          </div>        </div>      </div>    </div>  );}