import json
import os

svg_lines = [
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 175">',
    '  <!-- Background -->',
    '  <rect width="300" height="175" fill="#fdf6e3"/>',
    '  <!-- Decoration on left -->',
    '  <circle cx="75" cy="87.5" r="60" fill="none" stroke="#eee8d5" stroke-width="4" stroke-dasharray="10,5"/>',
    '  <circle cx="75" cy="87.5" r="40" fill="none" stroke="#eee8d5" stroke-width="2" />',
    '  <text x="75" y="87.5" fill="#93a1a1" font-family="sans-serif" font-size="12" text-anchor="middle" font-weight="bold">MECHANISM</text>',
    '  <text x="75" y="102.5" fill="#93a1a1" font-family="sans-serif" font-size="10" text-anchor="middle">CLEARANCE</text>',
]

# X from 150 to 300
for row in range(9):
    y_base = 25 + row * 16
    svg_lines.append(f'  <line x1="155" y1="{y_base}" x2="295" y2="{y_base}" stroke="#e0e0e0" stroke-width="1"/>')
    svg_lines.append(f'  <line x1="155" y1="{y_base-5}" x2="295" y2="{y_base-5}" stroke="#e0e0e0" stroke-width="0.5" stroke-dasharray="2,2"/>')
    svg_lines.append(f'  <line x1="155" y1="{y_base-10}" x2="295" y2="{y_base-10}" stroke="#e0e0e0" stroke-width="1"/>')

spots = []
alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

for i, letter in enumerate(alphabet):
    col = i % 3
    row = i // 3
    
    svg_x = 175 + col * 50
    svg_y = 25 + row * 16
    
    phys_x = svg_x - 150
    phys_y = 145 - svg_y
    
    spots.append({
        "id": letter,
        "label": f"{letter.upper()}{letter.lower()}",
        "x": phys_x,
        "y": phys_y
    })
    
    text_str = f'  <text x="{svg_x}" y="{svg_y}" fill="#268bd2" font-family="cursive, \'Comic Sans MS\', sans-serif" font-size="14" font-style="italic" text-anchor="middle">{letter.upper()}{letter.lower()}</text>'
    svg_lines.append(text_str)

svg_lines.append('</svg>')

with open('web/assets/backgrounds/portrait-right/bg.svg', 'w') as f:
    f.write('\n'.join(svg_lines))
    
with open('web/assets/backgrounds/portrait-right/spots.json', 'w') as f:
    json.dump({
        "bounds": { "xMin": -150, "xMax": 150, "yMin": -30, "yMax": 145 },
        "spots": spots
    }, f, indent=2)