import os

svg_content = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1100">
  <style>
    .title { font: bold 24px sans-serif; fill: #1e293b; }
    .label { font: bold 14px sans-serif; fill: #334155; }
    .subtext { font: 12px sans-serif; fill: #64748b; }
    .tier-label { font: bold 13px sans-serif; fill: #ffffff; }
    .arrow { stroke: #94a3b8; stroke-width: 2; fill: none; }
    .node-bg { stroke-width: 2; }
    .highlight { fill: #fef3c7; stroke: #f59e0b; }
  </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>
  </defs>

  <rect width="1000" height="1100" fill="#f8fafc" rx="20"/>

  <text x="500" y="50" text-anchor="middle" class="title">Product Search Engine: 7-Tier Cascading Logic</text>

  <!-- INPUT AREA -->
  <rect x="250" y="80" width="500" height="100" rx="10" fill="#ffffff" stroke="#3b82f6" class="node-bg"/>
  <text x="500" y="110" text-anchor="middle" class="label">AI Input (Dual-Lane)</text>
  <text x="300" y="140" class="subtext">Lane 1: Literal (Raw Text)</text>
  <text x="300" y="160" class="subtext">Lane 2: Inferred (Filters: Category, Price, Color, Size...)</text>

  <!-- OVERRIDES -->
  <rect x="100" y="200" width="350" height="60" rx="8" fill="#fff1f2" stroke="#e11d48" class="node-bg" stroke-dasharray="4"/>
  <text x="275" y="235" text-anchor="middle" class="label" fill="#be123c">Underwear Override (Drop Gender/Age)</text>
  
  <rect x="550" y="200" width="350" height="60" rx="8" fill="#f0f9ff" stroke="#0ea5e9" class="node-bg" stroke-dasharray="4"/>
  <text x="725" y="235" text-anchor="middle" class="label" fill="#0369a1">Event Fallback (30/4, 2/9 Patterns)</text>

  <!-- WATERFALL START -->
  <text x="500" y="300" text-anchor="middle" class="label" fill="#64748b">--- THE SEARCH WATERFALL ---</text>

  <!-- TIER 1 -->
  <rect x="300" y="330" width="400" height="50" rx="5" fill="#1e40af" stroke="#1d4ed8"/>
  <text x="320" y="360" class="tier-label">Tier 1: Fixed Filters + Keywords (NGRAMBF)</text>
  
  <!-- TIER 2 -->
  <rect x="300" y="400" width="400" height="50" rx="5" fill="#1d4ed8" stroke="#2563eb"/>
  <text x="320" y="430" class="tier-label">Tier 2: Fixed Filters + Tags (BITMAP)</text>

  <!-- TIER 3 -->
  <rect x="300" y="470" width="400" height="50" rx="5" fill="#2563eb" stroke="#3b82f6"/>
  <text x="320" y="500" class="tier-label">Tier 3: Fixed Filters Only (Category/Price/Color)</text>

  <!-- TIER 4 -->
  <rect x="300" y="540" width="400" height="50" rx="5" fill="#3b82f6" stroke="#60a5fa"/>
  <text x="320" y="570" class="tier-label">Tier 4: Gender Fallback (Drop Gender Filter)</text>

  <!-- TIER 5-6 -->
  <rect x="300" y="610" width="400" height="50" rx="5" fill="#60a5fa" stroke="#93c5fd"/>
  <text x="320" y="640" class="tier-label">Tier 5-6: Price Relaxation (1.5x - 2.0x Budget)</text>

  <!-- TIER 7 -->
  <rect x="300" y="680" width="400" height="50" rx="5" fill="#93c5fd" stroke="#bfdbfe"/>
  <text x="320" y="710" class="tier-label">Tier 7: Extreme Fallback (Drop Price Completely)</text>

  <!-- STOCK API -->
  <rect x="250" y="780" width="500" height="100" rx="10" fill="#ecfdf5" stroke="#10b981" stroke-width="3" class="node-bg"/>
  <text x="500" y="810" text-anchor="middle" class="label" fill="#065f46">CANIF_STOCK_API (Real-time Verification)</text>
  <text x="500" y="840" text-anchor="middle" class="subtext">Filter out Out-of-Stock SKUs | Timeout: 1.5s</text>
  <text x="500" y="865" text-anchor="middle" class="subtext" font-weight="bold">Ensure Only "Available" Products are shown!</text>

  <!-- POST-PROCESSING -->
  <rect x="250" y="910" width="500" height="80" rx="10" fill="#ffffff" stroke="#94a3b8" class="node-bg"/>
  <text x="500" y="935" text-anchor="middle" class="label">Post-Processing</text>
  <text x="500" y="960" text-anchor="middle" class="subtext">Deduplication (Internal Code) | Description Compression</text>

  <!-- FINAL OUTPUT -->
  <rect x="400" y="1020" width="200" height="50" rx="25" fill="#ffffff" stroke="#10b981" stroke-width="2"/>
  <text x="500" y="1050" text-anchor="middle" class="label">Top 10 Products</text>

  <!-- ARROWS -->
  <path d="M500,180 V290" class="arrow" marker-end="url(#head)"/>
  <path d="M500,380 V400" class="arrow" marker-end="url(#head)"/>
  <path d="M500,450 V470" class="arrow" marker-end="url(#head)"/>
  <path d="M500,520 V540" class="arrow" marker-end="url(#head)"/>
  <path d="M500,590 V610" class="arrow" marker-end="url(#head)"/>
  <path d="M500,660 V680" class="arrow" marker-end="url(#head)"/>
  <path d="M500,730 V780" class="arrow" marker-end="url(#head)"/>
  <path d="M500,880 V910" class="arrow" marker-end="url(#head)"/>
  <path d="M500,990 V1020" class="arrow" marker-end="url(#head)"/>

  <!-- Lateral arrows for found result -->
  <path d="M700,355 Q850,355 850,780" class="arrow" stroke-dasharray="5"/>
  <path d="M700,425 Q820,425 820,780" class="arrow" stroke-dasharray="5"/>
</svg>"""

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

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