import { useState } from 'react'
import { Shield, CheckCircle2, Lock, FileCode, Clock, Hash, ExternalLink, Activity } from 'lucide-react'

interface AuditReceipt {
  date: string
  timestamp_utc: string
  merkle_root: string
  ci_suites: string
  conclusion: 'PASS' | 'FAIL'
  tsc_controls: string[]
  iso_controls: string[]
  source_fingerprints: { file: string; sha256: string }[]
}

const HISTORICAL_RECEIPTS: AuditReceipt[] = [
  {
    date: '2026-08-22',
    timestamp_utc: '2026-08-22T07:09:24.391Z',
    merkle_root: '932d9c5d7c0ff73bf8cc5ff06bc810bf105e9544e3fb07d8ab343bfdaa05dc10',
    ci_suites: '18/18 Multi-Runtime Suites Passing (100%)',
    conclusion: 'PASS',
    tsc_controls: ['CC7.1 (Continuous Monitoring)', 'CC7.2 (Log Evaluation)', 'CC9.1 (Risk Assessment)'],
    iso_controls: ['A.8.8 (Vulnerability Mgmt)', 'A.8.30 (Monitoring Activities)', 'A.9.1 (Performance Eval)'],
    source_fingerprints: [
      { file: 'src/btp_guard.py', sha256: '9f8e7d6c5b4a3f2e1d0c9b8a7f6e5d4c3b2a1f0e' },
      { file: 'src/container_sandbox.py', sha256: 'c8b7a6f5e4d3c2b1a0f9e8d7c6b5a4f3e2d1c0b9' },
      { file: 'ci_security_gate.py', sha256: 'a1b2c3d4e5f60718293a4b5c6d7e8f9012345678' }
    ]
  }
]

export default function ContinuousComplianceTimeline() {
  const [selectedReceipt, setSelectedReceipt] = useState<AuditReceipt>(HISTORICAL_RECEIPTS[0])

  return (
    <section id="compliance-timeline" className="py-24 border-t border-[#27272a]/70 bg-[#040406] text-white relative overflow-hidden">
      {/* Top ambient glowing accent line */}
      <div className="absolute top-0 left-0 right-0 h-[1.5px] bg-gradient-to-r from-transparent via-[#10b981]/70 to-transparent pointer-events-none" />

      {/* Background glow accents */}
      <div className="absolute top-1/2 left-1/3 -translate-y-1/2 w-[600px] h-[300px] bg-gradient-to-b from-[#10b981]/10 to-transparent blur-[140px] pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        {/* Section Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
          <div>
            <div className="inline-flex items-center gap-2 px-3.5 py-1.5 bg-[#10b981]/10 border border-[#10b981]/30 text-xs font-mono font-bold text-[#10b981] rounded-full mb-4 shadow-[0_0_15px_rgba(16,185,129,0.15)]">
              <span className="w-2 h-2 rounded-full bg-[#10b981] animate-ping" />
              <span>[CONTINUOUS COMPLIANCE TELEMETRY]</span>
            </div>
            <h2 className="text-3xl sm:text-5xl font-extrabold font-sans text-[#ffffff] tracking-tight">
              Continuous Cryptographic CI &amp; Controls Audit Timeline
            </h2>
            <p className="text-[#a1a1aa] text-sm sm:text-base mt-3 max-w-2xl font-sans leading-relaxed">
              Daily cryptographic Merkle receipts generated by automated GitHub Actions CI test gates, structured for direct mapping into AICPA TSC and ISO/IEC 27001 compliance evidence archives.
            </p>
          </div>

          <div className="flex items-center gap-3 shrink-0">
            <a
              href="https://github.com/ivegotahunnitonit/bartholomew/tree/main/audit_evidence"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-4 py-2.5 bg-[#14141a] hover:bg-[#1f1f28] border border-[#27272a] hover:border-[#10b981] text-xs font-mono text-[#d4d4d8] hover:text-[#ffffff] rounded-xl transition shadow-lg"
            >
              <FileCode className="w-4 h-4 text-[#10b981]" />
              <span>[GITHUB CI AUDIT ARTIFACTS]</span>
              <ExternalLink className="w-3 h-3 text-[#71717a]" />
            </a>
          </div>
        </div>

        {/* Evidence Dashboard Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
          {/* Left: Timeline List */}
          <div className="bg-gradient-to-b from-[#0e0e14]/95 via-[#09090d]/95 to-[#050507] border border-[#27272a]/80 rounded-2xl p-5 flex flex-col shadow-xl backdrop-blur-xl relative">
            <div className="absolute top-0 left-0 right-0 h-[1.5px] bg-gradient-to-r from-transparent via-[#f59e0b]/50 to-transparent pointer-events-none" />

            <div className="text-xs font-mono text-[#a1a1aa] uppercase mb-4 flex items-center gap-2 font-semibold">
              <Clock className="w-3.5 h-3.5 text-[#f59e0b]" />
              <span>Daily Receipt Archives</span>
            </div>

            <div className="space-y-2.5">
              {HISTORICAL_RECEIPTS.map((receipt) => (
                <button
                  key={receipt.date}
                  onClick={() => setSelectedReceipt(receipt)}
                  className={`w-full text-left p-3.5 rounded-xl border transition-all duration-200 flex items-center justify-between font-mono text-xs cursor-pointer ${
                    selectedReceipt.date === receipt.date
                      ? 'bg-gradient-to-b from-[#10b981]/15 to-[#08080c] border-[#10b981] text-[#ffffff] shadow-[0_0_20px_rgba(16,185,129,0.2)] ring-1 ring-[#10b981]'
                      : 'bg-[#050508] border-[#27272a]/70 text-[#a1a1aa] hover:border-[#444455] hover:text-white'
                  }`}
                >
                  <div className="flex items-center gap-3">
                    <span className="w-2 h-2 rounded-full bg-[#10b981] animate-pulse" />
                    <div>
                      <div className="font-bold">{receipt.date} (Daily Cron)</div>
                      <div className="text-[10px] text-[#71717a]">{receipt.ci_suites.split(' ')[0]} Suites</div>
                    </div>
                  </div>
                  <span className="px-2.5 py-1 bg-[#10b981]/15 text-[#10b981] border border-[#10b981]/30 font-bold text-[10px] rounded-lg">
                    {receipt.conclusion}
                  </span>
                </button>
              ))}
            </div>
          </div>

          {/* Center & Right: Selected Merkle Receipt Inspector */}
          <div className="lg:col-span-2 bg-gradient-to-b from-[#0e0e14]/95 via-[#09090d]/95 to-[#050507] border border-[#27272a]/80 rounded-2xl p-6 sm:p-7 flex flex-col shadow-2xl backdrop-blur-xl relative">
            <div className="absolute top-0 left-0 right-0 h-[1.5px] bg-gradient-to-r from-transparent via-[#10b981]/50 to-transparent pointer-events-none" />

            <div className="flex items-center justify-between border-b border-[#27272a]/70 pb-4 mb-5">
              <div className="flex items-center gap-2.5">
                <Shield className="w-4 h-4 text-[#10b981]" />
                <span className="font-mono text-xs font-bold text-[#ffffff] tracking-wider">
                  MERKLE RECEIPT // {selectedReceipt.date}
                </span>
              </div>
              <div className="flex flex-wrap items-center gap-2 font-mono text-[11px] text-[#10b981] bg-[#10b981]/10 px-2.5 py-1 rounded-lg border border-[#10b981]/30">
                <Activity className="w-3.5 h-3.5" />
                <span>ALL 18 GATES PASSING</span>
              </div>
            </div>

            {/* Merkle Root Box */}
            <div className="bg-[#030305] border border-[#27272a]/80 rounded-xl p-4 mb-5 font-mono text-xs shadow-inner">
              <div className="text-[10px] text-[#71717a] uppercase mb-1.5 flex items-center gap-1.5 font-semibold">
                <Hash className="w-3.5 h-3.5 text-[#f59e0b]" />
                <span>SHA-256 Merkle Root Hash (Reproducible CI Gate Evidence)</span>
              </div>
              <div className="text-[#f59e0b] break-all font-bold select-all bg-[#0a0a0f] p-2.5 rounded-lg border border-[#27272a]/60">
                {selectedReceipt.merkle_root}
              </div>
            </div>

            {/* Criteria Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
              {/* AICPA SOC 2 Controls */}
              <div className="bg-[#030305] border border-[#27272a]/80 rounded-xl p-4 shadow-inner">
                <div className="text-[11px] font-mono font-bold text-[#38bdf8] mb-2.5 flex items-center gap-1.5">
                  <Lock className="w-3.5 h-3.5" />
                  <span>AICPA Trust Services Criteria</span>
                </div>
                <ul className="space-y-1.5 text-[11px] font-mono text-[#a1a1aa]">
                  {selectedReceipt.tsc_controls.map((c, i) => (
                    <li key={i} className="flex items-center gap-2">
                      <CheckCircle2 className="w-3.5 h-3.5 text-[#10b981] shrink-0" />
                      <span>{c}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* ISO 27001 Controls */}
              <div className="bg-[#030305] border border-[#27272a]/80 rounded-xl p-4 shadow-inner">
                <div className="text-[11px] font-mono font-bold text-[#c084fc] mb-2.5 flex items-center gap-1.5">
                  <Shield className="w-3.5 h-3.5" />
                  <span>ISO/IEC 27001:2022 ISMS</span>
                </div>
                <ul className="space-y-1.5 text-[11px] font-mono text-[#a1a1aa]">
                  {selectedReceipt.iso_controls.map((c, i) => (
                    <li key={i} className="flex items-center gap-2">
                      <CheckCircle2 className="w-3.5 h-3.5 text-[#10b981] shrink-0" />
                      <span>{c}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            {/* Source Module Integrity Fingerprints */}
            <div className="bg-[#030305] border border-[#27272a]/80 rounded-xl p-4 font-mono text-xs shadow-inner">
              <div className="text-[10px] text-[#71717a] uppercase mb-2.5 font-semibold">
                Core Module Integrity Fingerprints (SHA-256)
              </div>
              <div className="space-y-2 text-[11px]">
                {selectedReceipt.source_fingerprints.map((item, idx) => (
                  <div key={idx} className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 text-[#a1a1aa] bg-[#0a0a0f] px-3 py-1.5 rounded-lg border border-[#27272a]/40">
                    <span className="text-[#ffffff] font-bold shrink-0">{item.file}</span>
                    <span className="text-[#71717a] text-[10px] truncate max-w-full sm:max-w-[260px] font-mono">{item.sha256}...</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}