import { motion } from 'motion/react';

export default function ERModelDiagram() {
  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-4">
        <span className="text-sm font-bold uppercase tracking-widest text-indigo-400/80">
          ER Model System Architecture
        </span>
        <p className="text-xs text-slate-500 mt-1">High-Level Architecture for Conceptual Data Modeling</p>
      </div>

      <svg
        viewBox="0 0 900 520"
        className="w-full max-w-5xl mx-auto"
        style={{ filter: 'drop-shadow(0 0 30px rgba(99,102,241,0.08))' }}
      >
        <defs>
          <marker id="er-arrow" markerWidth="6" markerHeight="4" refX="5" refY="2" orient="auto">
            <polygon points="0 0,6 2,0 4" fill="rgba(148,163,184,0.4)" />
          </marker>
        </defs>

        {/* Layer 1: Presentation */}
        <rect x="10" y="10" width="620" height="70" rx="10" fill="rgba(59,130,246,0.05)" stroke="rgba(59,130,246,0.2)" strokeWidth="1.5" />
        <text x="20" y="30" fill="#60a5fa" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">1. Presentation Layer</text>
        <text x="20" y="44" fill="#3b82f6" fontSize="8" fontFamily="'Inter',sans-serif">User Interfaces</text>

        <rect x="90" y="22" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="140" y="42" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">End Users</text>
        <text x="140" y="56" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Business Analysts, Domain Experts</text>

        <rect x="200" y="22" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="255" y="42" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">ER Diagram Editor</text>
        <text x="255" y="56" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Draw entities, attributes, relationships</text>

        <rect x="320" y="22" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="370" y="42" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Viewer / Reports</text>
        <text x="370" y="56" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">View diagrams, metadata, documentation</text>

        <rect x="430" y="22" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="485" y="42" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Export / Import</text>
        <text x="485" y="56" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Export to SQL, Import templates, Share models</text>

        {/* Arrow Layer 1 → 2 */}
        <line x1="320" y1="80" x2="320" y2="95" stroke="rgba(148,163,184,0.4)" strokeWidth="1.5" markerEnd="url(#er-arrow)" />

        {/* Layer 2: Application */}
        <rect x="10" y="95" width="620" height="70" rx="10" fill="rgba(34,197,94,0.05)" stroke="rgba(34,197,94,0.2)" strokeWidth="1.5" />
        <text x="20" y="115" fill="#4ade80" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">2. Application Layer</text>
        <text x="20" y="129" fill="#22c55e" fontSize="8" fontFamily="'Inter',sans-serif">Business Logic</text>

        <rect x="60" y="107" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="110" y="127" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Model Manager</text>
        <text x="110" y="141" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Create, update, delete ER models</text>

        <rect x="170" y="107" width="120" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="230" y="127" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Relationship Manager</text>
        <text x="230" y="141" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Define relationship types, cardinality, participation</text>

        <rect x="300" y="107" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="350" y="127" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Attribute Manager</text>
        <text x="350" y="141" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Manage attribute types (key, composite, multi-valued, derived)</text>

        <rect x="410" y="107" width="90" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="455" y="127" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Validation Engine</text>
        <text x="455" y="141" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Validate rules, cardinality, participation, keys</text>

        <rect x="510" y="107" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="560" y="127" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Metadata Manager</text>
        <text x="560" y="141" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Maintain model metadata and history</text>

        {/* Arrow Layer 2 → 3 */}
        <line x1="320" y1="165" x2="320" y2="180" stroke="rgba(148,163,184,0.4)" strokeWidth="1.5" markerEnd="url(#er-arrow)" />

        {/* Layer 3: Service */}
        <rect x="10" y="180" width="620" height="70" rx="10" fill="rgba(139,92,246,0.05)" stroke="rgba(139,92,246,0.2)" strokeWidth="1.5" />
        <text x="20" y="200" fill="#a78bfa" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">3. Service Layer</text>
        <text x="20" y="214" fill="#8b5cf6" fontSize="8" fontFamily="'Inter',sans-serif">Core Services</text>

        <rect x="40" y="192" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="95" y="212" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">ER Modeling Service</text>
        <text x="95" y="226" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Core engine to build and manage ER models</text>

        <rect x="160" y="192" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="215" y="212" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Rule & Constraint</text>
        <text x="215" y="226" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Enforce business rules and integrity constraints</text>

        <rect x="280" y="192" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="335" y="212" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Transformation</text>
        <text x="335" y="226" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Convert ER model to relational schema</text>

        <rect x="400" y="192" width="90" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="445" y="212" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">DDL Generator</text>
        <text x="445" y="226" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Generate SQL (CREATE TABLE, FKs, Constraints)</text>

        <rect x="500" y="192" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="555" y="212" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Documentation</text>
        <text x="555" y="226" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Generate data dictionary and reports</text>

        {/* Arrow Layer 3 → 4 */}
        <line x1="320" y1="250" x2="320" y2="265" stroke="rgba(148,163,184,0.4)" strokeWidth="1.5" markerEnd="url(#er-arrow)" />

        {/* Layer 4: Data */}
        <rect x="10" y="265" width="620" height="70" rx="10" fill="rgba(245,158,11,0.05)" stroke="rgba(245,158,11,0.2)" strokeWidth="1.5" />
        <text x="20" y="285" fill="#fbbf24" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">4. Data Layer</text>
        <text x="20" y="299" fill="#d97706" fontSize="8" fontFamily="'Inter',sans-serif">Storage</text>

        <rect x="70" y="277" width="140" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="140" y="297" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Model Repository</text>
        <text x="140" y="311" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Store ER models (diagrams, metadata, definitions)</text>

        <rect x="250" y="277" width="140" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="320" y="297" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Metadata Repository</text>
        <text x="320" y="311" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Store entity, relationship, rules, and constraints</text>

        <rect x="430" y="277" width="140" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="500" y="297" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Version & Audit Store</text>
        <text x="500" y="311" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Track versions, changes, and audit logs</text>

        <line x1="210" y1="301" x2="250" y2="301" stroke="rgba(148,163,184,0.3)" strokeWidth="1.5" markerEnd="url(#er-arrow)" markerStart="url(#er-arrow)" />
        <line x1="390" y1="301" x2="430" y2="301" stroke="rgba(148,163,184,0.3)" strokeWidth="1.5" markerEnd="url(#er-arrow)" markerStart="url(#er-arrow)" />

        {/* Arrow Layer 4 → 5 */}
        <line x1="320" y1="335" x2="320" y2="350" stroke="rgba(148,163,184,0.4)" strokeWidth="1.5" markerEnd="url(#er-arrow)" />

        {/* Layer 5: Infrastructure */}
        <rect x="10" y="350" width="620" height="70" rx="10" fill="rgba(239,68,68,0.05)" stroke="rgba(239,68,68,0.2)" strokeWidth="1.5" />
        <text x="20" y="370" fill="#f87171" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">5. Infrastructure Layer</text>
        <text x="20" y="384" fill="#dc2626" fontSize="8" fontFamily="'Inter',sans-serif">Platform Services</text>

        <rect x="50" y="362" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="100" y="382" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Security</text>
        <text x="100" y="396" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Authentication, Authorization, Access Control</text>

        <rect x="160" y="362" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="210" y="382" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Backup & Recovery</text>
        <text x="210" y="396" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Regular backups, disaster recovery</text>

        <rect x="270" y="362" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="320" y="382" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Configuration</text>
        <text x="320" y="396" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">System settings, preferences</text>

        <rect x="380" y="362" width="110" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="435" y="382" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Monitoring & Logging</text>
        <text x="435" y="396" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Performance monitoring, error logging, alerts</text>

        <rect x="500" y="362" width="100" height="48" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        <text x="550" y="382" textAnchor="middle" fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">Scalability</text>
        <text x="550" y="396" textAnchor="middle" fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">Load balancing, scaling, caching</text>

        {/* Database Design Flow - Right Side */}
        <rect x="650" y="10" width="240" height="260" rx="10" fill="rgba(99,102,241,0.04)" stroke="rgba(99,102,241,0.15)" strokeWidth="1.5" />
        <text x="770" y="28" textAnchor="middle" fill="#a5b4fc" fontSize="11" fontWeight="700" fontFamily="'Inter',sans-serif">Database Design Flow</text>

        {[
          { num: '1', title: 'Gather Requirements', desc: 'Collect business and data requirements', y: 45 },
          { num: '2', title: 'Create ER Model', desc: 'Identify entities, attributes, relationships, constraints', y: 85 },
          { num: '3', title: 'Validate Model', desc: 'Check rules, cardinality, participation, keys', y: 125 },
          { num: '4', title: 'Transform to Schema', desc: 'Map ER model to relational schema', y: 165 },
          { num: '5', title: 'Generate Database', desc: 'Generate SQL and implement database', y: 205 },
          { num: '6', title: 'Maintenance', desc: 'Evolve model with business changes', y: 245 },
        ].map((step, i) => (
          <g key={i}>
            <rect x="660" y={step.y - 12} width="220" height="32" rx="6" fill={i === 5 ? "rgba(239,68,68,0.08)" : "rgba(99,102,241,0.06)"} stroke={i === 5 ? "rgba(239,68,68,0.25)" : "rgba(99,102,241,0.2)"} strokeWidth="1" />
            <circle cx="675" cy={step.y + 4} r="10" fill={i === 5 ? "rgba(239,68,68,0.2)" : "rgba(99,102,241,0.2)"} stroke={i === 5 ? "rgba(239,68,68,0.4)" : "rgba(99,102,241,0.4)"} strokeWidth="1" />
            <text x="675" y={step.y + 8} textAnchor="middle" fill={i === 5 ? "#f87171" : "#a5b4fc"} fontSize="10" fontWeight="700" fontFamily="'Inter',sans-serif">{step.num}</text>
            <text x="695" y={step.y + 4} fill="#e2e8f0" fontSize="9" fontWeight="600" fontFamily="'Inter',sans-serif">{step.title}</text>
            <text x="695" y={step.y + 16} fill="#94a3b8" fontSize="7" fontFamily="'Inter',sans-serif">{step.desc}</text>
            {i < 5 && <line x1="770" y1={step.y + 22} x2="770" y2={step.y + 38} stroke="rgba(99,102,241,0.3)" strokeWidth="1" markerEnd="url(#er-arrow)" />}
          </g>
        ))}

        {/* Connection lines to flow */}
        <line x1="630" y1="45" x2="650" y2="45" stroke="rgba(148,163,184,0.3)" strokeWidth="1" strokeDasharray="3,2" />

        {/* Legend */}
        <rect x="10" y="435" width="620" height="75" rx="10" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.06)" strokeWidth="1" />
        <text x="30" y="455" fill="#94a3b8" fontSize="10" fontWeight="700" fontFamily="'Inter',sans-serif">LEGEND</text>
        <text x="30" y="468" fill="#64748b" fontSize="8" fontFamily="'Inter',sans-serif">ER Model Symbols</text>

        {/* Legend items */}
        <g transform="translate(90, 450)">
          <rect x="0" y="0" width="20" height="14" rx="2" fill="rgba(59,130,246,0.15)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" />
          <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Strong Entity</text>
        </g>

        <g transform="translate(160, 450)">
          <rect x="0" y="0" width="20" height="14" rx="2" fill="transparent" stroke="rgba(255,255,255,0.3)" strokeWidth="1" strokeDasharray="2,1" />
          <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Weak Entity</text>
        </g>

        <g transform="translate(230, 450)">
          <polygon points="10,0 20,7 10,14 0,7" fill="rgba(99,102,246,0.15)" stroke="rgba(99,102,246,0.3)" strokeWidth="1" />
          <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Relationship</text>
        </g>

        <g transform="translate(310, 450)">
          <ellipse cx="10" cy="7" rx="10" ry="5" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.3)" strokeWidth="1" />
          <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Key Attribute</text>
        </g>

        <g transform="translate(390, 450)">
          <ellipse cx="10" cy="7" rx="10" ry="5" fill="rgba(34,197,94,0.15)" stroke="rgba(34,197,94,0.3)" strokeWidth="1" />
          <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Composite</text>
        </g>

        <g transform="translate(460, 450)">
          <ellipse cx="10" cy="7" rx="10" ry="7" fill="rgba(139,92,246,0.15)" stroke="rgba(139,92,246,0.3)" strokeWidth="1" />
          <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Multi-valued</text>
        </g>

        <g transform="translate(540, 450)">
          <ellipse cx="10" cy="7" rx="10" ry="7" fill="transparent" stroke="rgba(255,255,255,0.3)" strokeWidth="1" strokeDasharray="2,1" />
          <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Derived</text>
        </g>

        <g transform="translate(90, 475)">
          <line x1="0" y1="7" x2="20" y2="7" stroke="rgba(148,163,184,0.5)" strokeWidth="1" strokeDasharray="3,2" />
          <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Partial Participation</text>
        </g>

        <g transform="translate(220, 475)">
          <line x1="0" y1="7" x2="20" y2="7" stroke="rgba(148,163,184,0.5)" strokeWidth="2" />
          <text x="28" y="11" fill="#94a3b8" fontSize="8" fontFamily="'Inter',sans-serif">Total Participation</text>
        </g>
      </svg>
    </motion.div>
  );
}
