import os

svg_content = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200">
  <style>
    .layer-title { font: bold 18px sans-serif; fill: #1e293b; }
    .node-label { font: bold 13px sans-serif; fill: #334155; }
    .subtext { font: 11px sans-serif; fill: #64748b; }
    .arrow { stroke: #94a3b8; stroke-width: 1.5; fill: none; }
    .box { stroke-width: 2; rx: 8; ry: 8; }
    .layer-bg { fill: #f8fafc; stroke: #e2e8f0; stroke-width: 1; rx: 15; }
  </style>

  <defs>
    <marker id="head" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#94a3b8" />
    </marker>
    <linearGradient id="grad-gate" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#eff6ff;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#dbeafe;stop-opacity:1" />
    </linearGradient>
  </defs>

  <rect width="1000" height="1200" fill="#ffffff" rx="20"/>

  <!-- TITLE -->
  <text x="50" y="50" font-family="sans-serif" font-size="28" font-weight="bold" fill="#0f172a">Canifa AI Platform: System Design &amp; Architecture</text>
  <text x="50" y="80" font-family="sans-serif" font-size="14" fill="#64748b">Unified Micro-modular Monolith with Agentic Orchestration</text>

  <!-- LAYER 5: CLIENT LAYER -->
  <rect x="50" y="120" width="900" height="150" class="layer-bg"/>
  <text x="70" y="150" class="layer-title">Layer 5: Client / MFE Consumption</text>
  <rect x="100" y="170" width="220" height="70" fill="#ffffff" stroke="#3b82f6" class="box"/>
  <text x="210" y="200" text-anchor="middle" class="node-label">Static Micro-frontends</text>
  <text x="210" y="220" text-anchor="middle" class="subtext">React / HTML / Tailwind</text>
  
  <rect x="390" y="170" width="220" height="70" fill="#ffffff" stroke="#3b82f6" class="box"/>
  <text x="500" y="200" text-anchor="middle" class="node-label">Canifa Web/App Shell</text>
  <text x="500" y="220" text-anchor="middle" class="subtext">Enterprise Integration</text>

  <rect x="680" y="170" width="220" height="70" fill="#ffffff" stroke="#3b82f6" class="box"/>
  <text x="790" y="200" text-anchor="middle" class="node-label">Internal Admin UI</text>
  <text x="790" y="220" text-anchor="middle" class="subtext">Cookbook &amp; Monitoring</text>

  <!-- LAYER 4: GATEWAY LAYER -->
  <rect x="50" y="300" width="900" height="150" class="layer-bg" fill="#f1f5f9"/>
  <text x="70" y="330" class="layer-title">Layer 4: API Gateway &amp; Middleware</text>
  <rect x="100" y="350" width="800" height="70" fill="url(#grad-gate)" stroke="#334155" class="box" stroke-dasharray="5"/>
  <text x="500" y="380" text-anchor="middle" class="node-label">FastAPI Router (Lifespan Managed)</text>
  <text x="500" y="400" text-anchor="middle" class="subtext">Auth | CORS | Rate Limit | Logging (Middleware Manager)</text>

  <!-- LAYER 3: AGENTIC CORE -->
  <rect x="50" y="480" width="900" height="320" class="layer-bg" fill="#f8fafc"/>
  <text x="70" y="510" class="layer-title">Layer 3: Agentic Intelligence &amp; Orchestration</text>
  
  <!-- LEFT: DETERMINISTIC ENGINES -->
  <rect x="100" y="540" width="350" height="230" rx="10" fill="#ffffff" stroke="#10b981" stroke-width="2"/>
  <text x="120" y="565" class="node-label" fill="#059669">Deterministic Engines</text>
  <text x="120" y="590" class="subtext">• Product Search Waterfall (7-Tier)</text>
  <text x="120" y="610" class="subtext">• Store Search Engine 2.0</text>
  <text x="120" y="630" class="subtext">• Promotion Priority Logic</text>
  <text x="120" y="650" class="subtext">• Fashion Match Scoring</text>
  <text x="120" y="670" class="subtext">• Stock Synchronization API</text>

  <!-- RIGHT: AGENTIC GRAPH -->
  <rect x="550" y="540" width="350" height="230" rx="10" fill="#ffffff" stroke="#7c3aed" stroke-width="2"/>
  <text x="570" y="565" class="node-label" fill="#6d28d9">LangGraph Orchestrator</text>
  <circle cx="630" cy="620" r="30" fill="#eff6ff" stroke="#3b82f6"/>
  <text x="630" y="625" text-anchor="middle" class="subtext">Classifier</text>
  
  <circle cx="725" cy="620" r="30" fill="#fdf2f8" stroke="#db2777"/>
  <text x="725" y="625" text-anchor="middle" class="subtext">Tools</text>

  <circle cx="820" cy="620" r="30" fill="#f0fdf4" stroke="#16a34a"/>
  <text x="820" y="625" text-anchor="middle" class="subtext">Stylist</text>
  
  <text x="570" y="680" class="subtext">RAG: Semantic Search Pipeline</text>
  <text x="570" y="700" class="subtext">Memory: Redis User Insight Management</text>

  <!-- LAYER 2: WORKER LAYER -->
  <rect x="50" y="830" width="900" height="120" class="layer-bg"/>
  <text x="70" y="860" class="layer-title">Layer 2: Async Background Workers</text>
  <rect x="100" y="880" width="350" height="50" fill="#ffffff" stroke="#ea580c" class="box"/>
  <text x="275" y="910" text-anchor="middle" class="node-label">Report Queue Worker</text>
  <rect x="550" y="880" width="350" height="50" fill="#ffffff" stroke="#ea580c" class="box"/>
  <text x="725" y="910" text-anchor="middle" class="node-label">Social Publish Engine</text>

  <!-- LAYER 1: DATA PERSISTENCE -->
  <rect x="50" y="980" width="900" height="180" class="layer-bg" fill="#f1f5f9"/>
  <text x="70" y="1010" class="layer-title">Layer 1: Hybrid Data Persistence</text>
  
  <rect x="100" y="1030" width="220" height="100" fill="#ffffff" stroke="#0f172a" class="box"/>
  <text x="210" y="1060" text-anchor="middle" class="node-label">OLTP (PostgreSQL)</text>
  <text x="210" y="1080" text-anchor="middle" class="subtext">User Sessions, Feedbacks,</text>
  <text x="210" y="1100" text-anchor="middle" class="subtext">System Configs</text>

  <rect x="390" y="1030" width="220" height="100" fill="#ffffff" stroke="#0f172a" class="box"/>
  <text x="500" y="1060" text-anchor="middle" class="node-label">OLAP (StarRocks)</text>
  <text x="500" y="1080" text-anchor="middle" class="subtext">Product Catalog, Vector</text>
  <text x="500" y="1100" text-anchor="middle" class="subtext">Embeddings, Analytics</text>

  <rect x="680" y="1030" width="220" height="100" fill="#ffffff" stroke="#0f172a" class="box"/>
  <text x="790" y="1060" text-anchor="middle" class="node-label">Memory (Redis)</text>
  <text x="790" y="1080" text-anchor="middle" class="subtext">Distributed Caching,</text>
  <text x="790" y="1100" text-anchor="middle" class="subtext">User Insights, Lockings</text>

  <!-- CONNECTORS -->
  <path d="M500,270 V300" class="arrow" marker-end="url(#head)"/>
  <path d="M500,450 V480" class="arrow" marker-end="url(#head)"/>
  <path d="M500,800 V830" class="arrow" marker-end="url(#head)"/>
  <path d="M500,950 V980" class="arrow" marker-end="url(#head)"/>
</svg>"""

folder_path = r'd:\cnf\chatbot-canifa-feedback\backend\static\cookbook\data\01-architecture'
if not os.path.exists(folder_path):
    os.makedirs(folder_path)

output_path = os.path.join(folder_path, 'platform_architecture_v3.svg')
with open(output_path, 'w', encoding='utf-8') as f:
    f.write(svg_content)
print(f"SVG generated at {output_path}")
