import { motion } from 'motion/react';

export default function ACIDTransactionsDiagram() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 24, scale: 0.97 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      transition={{ duration: 0.7, ease: [0.25, 0.1, 0.25, 1] as const, delay: 0.2 }}
      className="mt-10 mb-4"
    >
      <div className="text-center mb-6">
        <span className="text-lg font-bold uppercase tracking-widest text-indigo-400" style={{ filter: 'drop-shadow(0 0 10px rgba(99,102,241,0.5))' }}>
          TRANSACTIONS &amp; ACID PROPERTIES
        </span>
      </div>
      <svg viewBox="0 0 900 760" className="w-full max-w-6xl mx-auto" style={{ filter: 'drop-shadow(0 0 30px rgba(99,102,241,0.1))' }}>
        <defs>
          <marker id="acidArr" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#6366f1" /></marker>
          <marker id="acidRed" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#ef4444" /></marker>
          <marker id="acidGrn" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#22c55e" /></marker>
          <linearGradient id="acidHdr" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stopColor="rgba(99,102,241,0.2)" /><stop offset="100%" stopColor="rgba(99,102,241,0.05)" /></linearGradient>
        </defs>

        {/* Header */}
        <rect x="20" y="10" width="860" height="48" rx="12" fill="url(#acidHdr)" stroke="rgba(99,102,241,0.4)" strokeWidth="2" />
        <ellipse cx="50" cy="26" rx="13" ry="5" fill="none" stroke="#6366f1" strokeWidth="1.5" />
        <rect x="37" y="26" width="26" height="14" fill="rgba(99,102,241,0.1)" />
        <ellipse cx="50" cy="40" rx="13" ry="5" fill="none" stroke="#6366f1" strokeWidth="1.5" />
        <text x="72" y="28" fill="#818cf8" fontSize="10" fontWeight="700" fontFamily="'Inter',sans-serif">Transaction:</text>
        <text x="148" y="28" fill="#a5b4fc" fontSize="9" fontFamily="'Inter',sans-serif">A sequence of database operations treated as a single logical unit of work.</text>
        <text x="72" y="42" fill="#a5b4fc" fontSize="9" fontFamily="'Inter',sans-serif">All operations must succeed together, or all must fail — enforced by ACID properties.</text>

        {/* Lifecycle */}
        <text x="450" y="80" textAnchor="middle" fill="#e2e8f0" fontSize="10" fontWeight="800" fontFamily="'Inter',sans-serif">TRANSACTION LIFECYCLE</text>
        {[
          { x: 30, label: 'BEGIN', c: '#6366f1' },
          { x: 195, label: 'ACTIVE', c: '#22c55e' },
          { x: 360, label: 'PARTIALLY COMMITTED', c: '#3b82f6' },
          { x: 560, label: 'COMMITTED', c: '#4ade80' },
        ].map(({ x, label, c }, i) => (
          <g key={i}>
            <rect x={x} y="88" width="140" height="30" rx="7" fill={`${c}22`} stroke={`${c}88`} strokeWidth="1.5" />
            <text x={x + 70} y="107" textAnchor="middle" fill={c} fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">{label}</text>
          </g>
        ))}
        <line x1="170" y1="103" x2="195" y2="103" stroke="#6366f1" strokeWidth="1.5" markerEnd="url(#acidArr)" />
        <line x1="335" y1="103" x2="360" y2="103" stroke="#6366f1" strokeWidth="1.5" markerEnd="url(#acidArr)" />
        <line x1="500" y1="103" x2="560" y2="103" stroke="#22c55e" strokeWidth="1.5" markerEnd="url(#acidGrn)" />
        <rect x="360" y="128" width="110" height="26" rx="7" fill="rgba(239,68,68,0.12)" stroke="rgba(239,68,68,0.4)" strokeWidth="1.5" />
        <text x="415" y="144" textAnchor="middle" fill="#f87171" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">FAILED → ROLLBACK</text>
        <line x1="430" y1="118" x2="430" y2="128" stroke="#ef4444" strokeWidth="1.5" markerEnd="url(#acidRed)" />

        {/* A — Atomicity */}
        <rect x="20" y="168" width="420" height="220" rx="12" fill="rgba(34,197,94,0.06)" stroke="rgba(34,197,94,0.4)" strokeWidth="2" />
        <circle cx="44" cy="192" r="14" fill="#22c55e" />
        <text x="44" y="197" textAnchor="middle" fill="white" fontSize="13" fontWeight="800" fontFamily="'Inter',sans-serif">A</text>
        <text x="68" y="189" fill="#4ade80" fontSize="13" fontWeight="800" fontFamily="'Inter',sans-serif">ATOMICITY</text>
        <text x="68" y="202" fill="#86efac" fontSize="8" fontFamily="'Inter',sans-serif">"All or Nothing"</text>
        <text x="24" y="222" fill="#e2e8f0" fontSize="8.5" fontFamily="'Inter',sans-serif">Every op in a transaction succeeds, or the entire</text>
        <text x="24" y="234" fill="#e2e8f0" fontSize="8.5" fontFamily="'Inter',sans-serif">transaction is rolled back with no partial changes.</text>
        <text x="24" y="252" fill="#4ade80" fontSize="8.5" fontWeight="700" fontFamily="'Inter',sans-serif">Example: Bank Transfer ₹500 from A → B</text>
        <rect x="24" y="259" width="175" height="80" rx="6" fill="rgba(34,197,94,0.08)" stroke="rgba(34,197,94,0.3)" strokeWidth="1" />
        <text x="111" y="274" textAnchor="middle" fill="#4ade80" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">✓ SUCCESS (COMMIT)</text>
        <text x="34" y="290" fill="#86efac" fontSize="7.5" fontFamily="'Inter',sans-serif">1. Debit A: -₹500 ✓</text>
        <text x="34" y="303" fill="#86efac" fontSize="7.5" fontFamily="'Inter',sans-serif">2. Credit B: +₹500 ✓</text>
        <text x="34" y="316" fill="#64748b" fontSize="7" fontFamily="'Inter',sans-serif">Both written to disk</text>
        <text x="34" y="330" fill="#64748b" fontSize="7" fontFamily="'Inter',sans-serif">A: ₹1000→₹500  B: ₹200→₹700</text>
        <rect x="215" y="259" width="195" height="80" rx="6" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.3)" strokeWidth="1" />
        <text x="312" y="274" textAnchor="middle" fill="#f87171" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">✗ FAILURE (ROLLBACK)</text>
        <text x="225" y="290" fill="#fca5a5" fontSize="7.5" fontFamily="'Inter',sans-serif">1. Debit A: -₹500 ✓</text>
        <text x="225" y="303" fill="#f87171" fontSize="7.5" fontFamily="'Inter',sans-serif">2. Credit B: ERROR ✗</text>
        <text x="225" y="316" fill="#64748b" fontSize="7" fontFamily="'Inter',sans-serif">Entire tx rolled back</text>
        <text x="225" y="330" fill="#64748b" fontSize="7" fontFamily="'Inter',sans-serif">A stays ₹1000, B stays ₹200</text>
        <text x="24" y="365" fill="#fbbf24" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Enforced by:</text>
        <text x="90" y="365" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Undo logs &amp; Rollback mechanism</text>
        <text x="24" y="378" fill="#fbbf24" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Ops:</text>
        <rect x="50" y="369" width="55" height="14" rx="4" fill="rgba(34,197,94,0.2)" stroke="rgba(34,197,94,0.4)" strokeWidth="1" />
        <text x="77" y="379" textAnchor="middle" fill="#4ade80" fontSize="7" fontFamily="'Inter',sans-serif">COMMIT</text>
        <rect x="112" y="369" width="62" height="14" rx="4" fill="rgba(239,68,68,0.2)" stroke="rgba(239,68,68,0.4)" strokeWidth="1" />
        <text x="143" y="379" textAnchor="middle" fill="#f87171" fontSize="7" fontFamily="'Inter',sans-serif">ROLLBACK</text>

        {/* C — Consistency */}
        <rect x="460" y="168" width="420" height="220" rx="12" fill="rgba(59,130,246,0.06)" stroke="rgba(59,130,246,0.4)" strokeWidth="2" />
        <circle cx="484" cy="192" r="14" fill="#3b82f6" />
        <text x="484" y="197" textAnchor="middle" fill="white" fontSize="13" fontWeight="800" fontFamily="'Inter',sans-serif">C</text>
        <text x="508" y="189" fill="#60a5fa" fontSize="13" fontWeight="800" fontFamily="'Inter',sans-serif">CONSISTENCY</text>
        <text x="508" y="202" fill="#93c5fd" fontSize="8" fontFamily="'Inter',sans-serif">"Valid State to Valid State"</text>
        <text x="468" y="222" fill="#e2e8f0" fontSize="8.5" fontFamily="'Inter',sans-serif">A transaction brings the DB from one valid state</text>
        <text x="468" y="234" fill="#e2e8f0" fontSize="8.5" fontFamily="'Inter',sans-serif">to another — all integrity constraints are preserved.</text>
        <text x="468" y="252" fill="#60a5fa" fontSize="8.5" fontWeight="700" fontFamily="'Inter',sans-serif">Integrity Constraints that must hold:</text>
        <rect x="468" y="258" width="390" height="95" rx="6" fill="rgba(15,23,42,0.4)" stroke="rgba(59,130,246,0.2)" strokeWidth="1" />
        {[
          { k: 'NOT NULL', v: 'Required fields must always have values', y: 0 },
          { k: 'UNIQUE', v: 'No duplicates in constrained columns', y: 1 },
          { k: 'CHECK', v: 'e.g. balance ≥ 0 — no negative balances', y: 2 },
          { k: 'FOREIGN KEY', v: 'Referenced rows must exist in parent table', y: 3 },
          { k: 'PRIMARY KEY', v: 'Must be unique and non-null', y: 4 },
        ].map(({ k, v, y }) => (
          <g key={y}>
            <rect x="474" y={266 + y * 17} width="70" height="12" rx="3" fill="rgba(59,130,246,0.15)" stroke="rgba(59,130,246,0.3)" strokeWidth="0.5" />
            <text x="509" y={275 + y * 17} textAnchor="middle" fill="#93c5fd" fontSize="6.5" fontWeight="700" fontFamily="'Inter',sans-serif">{k}</text>
            <text x="550" y={275 + y * 17} fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">{v}</text>
          </g>
        ))}
        <text x="468" y="368" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Violation → transaction aborted automatically.</text>
        <text x="468" y="381" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">Consistency is the responsibility of both DB &amp; application.</text>

        {/* I — Isolation */}
        <rect x="20" y="400" width="420" height="340" rx="12" fill="rgba(168,85,247,0.06)" stroke="rgba(168,85,247,0.4)" strokeWidth="2" />
        <circle cx="44" cy="424" r="14" fill="#a855f7" />
        <text x="44" y="429" textAnchor="middle" fill="white" fontSize="13" fontWeight="800" fontFamily="'Inter',sans-serif">I</text>
        <text x="68" y="421" fill="#c084fc" fontSize="13" fontWeight="800" fontFamily="'Inter',sans-serif">ISOLATION</text>
        <text x="68" y="434" fill="#d8b4fe" fontSize="8" fontFamily="'Inter',sans-serif">"Transactions Don't Interfere"</text>
        <text x="24" y="455" fill="#e2e8f0" fontSize="8.5" fontFamily="'Inter',sans-serif">Concurrent transactions run as if they are serial.</text>
        <text x="24" y="467" fill="#e2e8f0" fontSize="8.5" fontFamily="'Inter',sans-serif">Intermediate states are hidden from other transactions.</text>
        <text x="24" y="487" fill="#c084fc" fontSize="8.5" fontWeight="700" fontFamily="'Inter',sans-serif">Isolation Levels (weakest → strongest):</text>
        <rect x="24" y="494" width="385" height="92" rx="6" fill="rgba(15,23,42,0.4)" stroke="rgba(168,85,247,0.2)" strokeWidth="1" />
        {[
          { lv: 'READ UNCOMMITTED', note: 'Dirty Read allowed', c: '#f87171' },
          { lv: 'READ COMMITTED', note: 'Prevents Dirty Read', c: '#fbbf24' },
          { lv: 'REPEATABLE READ', note: 'Prevents Non-repeatable Read', c: '#60a5fa' },
          { lv: 'SERIALIZABLE', note: 'Prevents Phantom Read — safest', c: '#4ade80' },
        ].map(({ lv, note, c }, i) => (
          <g key={i}>
            <rect x="30" y={500 + i * 21} width="160" height="14" rx="3" fill={`${c}20`} stroke={`${c}40`} strokeWidth="0.5" />
            <text x="110" y={510 + i * 21} textAnchor="middle" fill={c} fontSize="6.5" fontWeight="700" fontFamily="'Inter',sans-serif">{lv}</text>
            <text x="198" y={510 + i * 21} fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">{note}</text>
          </g>
        ))}
        <text x="24" y="600" fill="#c084fc" fontSize="8.5" fontWeight="700" fontFamily="'Inter',sans-serif">Read Phenomena:</text>
        <text x="24" y="616" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">• Dirty Read: sees uncommitted data of another tx</text>
        <text x="24" y="630" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">• Non-repeatable Read: same query returns different rows</text>
        <text x="24" y="644" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">• Phantom Read: new rows appear in a repeated range query</text>
        <text x="24" y="660" fill="#fbbf24" fontSize="7.5" fontFamily="'Inter',sans-serif">Implemented via: Locks, MVCC (Multi-Version Concurrency Control)</text>
        <text x="24" y="673" fill="#64748b" fontSize="7" fontFamily="'Inter',sans-serif">Higher isolation = more serializable but lower concurrency performance.</text>
        <text x="24" y="686" fill="#64748b" fontSize="7" fontFamily="'Inter',sans-serif">Most DBs default to READ COMMITTED or REPEATABLE READ.</text>
        <text x="24" y="730" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">PostgreSQL: defaults to READ COMMITTED | MySQL InnoDB: REPEATABLE READ</text>

        {/* D — Durability */}
        <rect x="460" y="400" width="420" height="340" rx="12" fill="rgba(245,158,11,0.06)" stroke="rgba(245,158,11,0.4)" strokeWidth="2" />
        <circle cx="484" cy="424" r="14" fill="#f59e0b" />
        <text x="484" y="429" textAnchor="middle" fill="white" fontSize="13" fontWeight="800" fontFamily="'Inter',sans-serif">D</text>
        <text x="508" y="421" fill="#fbbf24" fontSize="13" fontWeight="800" fontFamily="'Inter',sans-serif">DURABILITY</text>
        <text x="508" y="434" fill="#fcd34d" fontSize="8" fontFamily="'Inter',sans-serif">"Committed = Permanent"</text>
        <text x="468" y="455" fill="#e2e8f0" fontSize="8.5" fontFamily="'Inter',sans-serif">Once a transaction commits, changes persist forever</text>
        <text x="468" y="467" fill="#e2e8f0" fontSize="8.5" fontFamily="'Inter',sans-serif">— even across crashes, power failures, or errors.</text>
        <text x="468" y="487" fill="#fbbf24" fontSize="8.5" fontWeight="700" fontFamily="'Inter',sans-serif">Techniques that ensure Durability:</text>
        <rect x="468" y="494" width="385" height="92" rx="6" fill="rgba(15,23,42,0.4)" stroke="rgba(245,158,11,0.2)" strokeWidth="1" />
        {[
          { t: 'Write-Ahead Logging (WAL)', d: 'Log changes before applying to disk' },
          { t: 'Checkpointing', d: 'Periodically flush dirty pages to storage' },
          { t: 'Redo Logs', d: 'Replay committed txs after a crash' },
          { t: 'Shadow Paging', d: 'Keep old page until commit is confirmed' },
        ].map(({ t, d }, i) => (
          <g key={i}>
            <text x="478" y={507 + i * 22} fill="#fbbf24" fontSize="7.5" fontWeight="700" fontFamily="'Inter',sans-serif">▸ {t}</text>
            <text x="478" y={518 + i * 22} fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">  {d}</text>
          </g>
        ))}
        <text x="468" y="600" fill="#fbbf24" fontSize="8.5" fontWeight="700" fontFamily="'Inter',sans-serif">Crash Recovery Flow:</text>
        {[
          { label: 'CRASH', c: '#ef4444', x: 468 },
          { label: 'READ REDO LOG', c: '#fbbf24', x: 560 },
          { label: 'REPLAY COMMITS', c: '#3b82f6', x: 665 },
          { label: 'DB RESTORED ✓', c: '#4ade80', x: 775 },
        ].map(({ label, c, x }, i) => (
          <g key={i}>
            <rect x={x} y="608" width="88" height="22" rx="5" fill={`${c}20`} stroke={`${c}50`} strokeWidth="1" />
            <text x={x + 44} y="622" textAnchor="middle" fill={c} fontSize="6.5" fontWeight="700" fontFamily="'Inter',sans-serif">{label}</text>
            {i < 3 && <line x1={x + 88} y1="619" x2={x + 100} y2="619" stroke={c} strokeWidth="1.5" markerEnd="url(#acidArr)" />}
          </g>
        ))}
        <text x="468" y="648" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">WAL ensures that crash recovery restores all committed changes.</text>
        <text x="468" y="660" fill="#4ade80" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Committed transactions are ALWAYS recoverable.</text>
        <text x="468" y="680" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">Used in: PostgreSQL (WAL), MySQL (InnoDB redo log),</text>
        <text x="468" y="692" fill="#94a3b8" fontSize="7.5" fontFamily="'Inter',sans-serif">Oracle (REDO log files), SQL Server (Transaction Log)</text>
        <text x="468" y="712" fill="#64748b" fontSize="7" fontFamily="'Inter',sans-serif">Storage media: SSDs and HDDs provide physical durability.</text>
        <text x="468" y="724" fill="#64748b" fontSize="7" fontFamily="'Inter',sans-serif">For distributed systems: replication adds cross-node durability.</text>
        <text x="468" y="740" fill="#fbbf24" fontSize="7.5" fontWeight="700" fontFamily="'Inter',sans-serif">Summary: ACID = the gold standard for reliable database transactions.</text>
      </svg>
    </motion.div>
  );
}
