lines = []
lines.append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600">')
lines.append('  <style>')
lines.append('    text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }')
lines.append('  </style>')
lines.append('  <defs>')
lines.append('    <marker id="arrow-claude" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">')
lines.append('      <polygon points="0 0, 8 4, 0 8" fill="#5a5a5a"/>')
lines.append('    </marker>')
lines.append('    <filter id="shadow-soft">')
lines.append('      <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000000" flood-opacity="0.05"/>')
lines.append('    </filter>')
lines.append('  </defs>')
lines.append('  <rect width="960" height="600" fill="#f8f6f3"/>')
lines.append('  <text x="480" y="40" text-anchor="middle" fill="#1a1a1a" font-size="22" font-weight="700">Authentication &amp; RBAC Flow</text>')

# Participants
# Browser
lines.append('  <rect x="100" y="100" width="200" height="400" rx="12" fill="none" stroke="#4a4a4a" stroke-width="1" stroke-dasharray="5,5"/>')
lines.append('  <text x="200" y="125" text-anchor="middle" fill="#6a6a6a" font-size="14" font-weight="600">Browser / Frontend</text>')

# Backend
lines.append('  <rect x="380" y="100" width="200" height="400" rx="12" fill="none" stroke="#4a4a4a" stroke-width="1" stroke-dasharray="5,5"/>')
lines.append('  <text x="480" y="125" text-anchor="middle" fill="#6a6a6a" font-size="14" font-weight="600">FastAPI Backend</text>')

# Database
lines.append('  <rect x="660" y="100" width="200" height="400" rx="12" fill="none" stroke="#4a4a4a" stroke-width="1" stroke-dasharray="5,5"/>')
lines.append('  <text x="760" y="125" text-anchor="middle" fill="#6a6a6a" font-size="14" font-weight="600">PostgreSQL DB</text>')

# Nodes
# Auth.js Guard
lines.append('  <rect x="120" y="160" width="160" height="60" rx="10" fill="#a8c5e6" stroke="#4a4a4a" stroke-width="2" filter="url(#shadow-soft)"/>')
lines.append('  <text x="200" y="195" text-anchor="middle" fill="#1a1a1a" font-size="14" font-weight="600">auth.js Guard</text>')

# API Login
lines.append('  <rect x="400" y="160" width="160" height="60" rx="10" fill="#9dd4c7" stroke="#4a4a4a" stroke-width="2" filter="url(#shadow-soft)"/>')
lines.append('  <text x="480" y="195" text-anchor="middle" fill="#1a1a1a" font-size="14" font-weight="600">POST /api/auth/login</text>')

# Admin Users Table
lines.append('  <rect x="680" y="160" width="160" height="60" rx="10" fill="#e8e6e3" stroke="#4a4a4a" stroke-width="2" filter="url(#shadow-soft)"/>')
lines.append('  <text x="760" y="195" text-anchor="middle" fill="#1a1a1a" font-size="14" font-weight="600">admin_users table</text>')

# Middleware
lines.append('  <rect x="400" y="300" width="160" height="60" rx="10" fill="#f4e4c1" stroke="#4a4a4a" stroke-width="2" filter="url(#shadow-soft)"/>')
lines.append('  <text x="480" y="335" text-anchor="middle" fill="#1a1a1a" font-size="14" font-weight="600">get_current_user</text>')

# LocalStorage
lines.append('  <rect x="120" y="300" width="160" height="60" rx="10" fill="#e8e6e3" stroke="#4a4a4a" stroke-width="2" filter="url(#shadow-soft)"/>')
lines.append('  <text x="200" y="335" text-anchor="middle" fill="#1a1a1a" font-size="14" font-weight="600">localStorage</text>')

# Arrows
lines.append('  <line x1="280" y1="180" x2="400" y2="180" stroke="#5a5a5a" stroke-width="1.5" marker-end="url(#arrow-claude)"/>')
lines.append('  <text x="340" y="175" text-anchor="middle" fill="#5a5a5a" font-size="11">Credentials</text>')

lines.append('  <line x1="560" y1="190" x2="680" y2="190" stroke="#5a5a5a" stroke-width="1.5" marker-end="url(#arrow-claude)"/>')
lines.append('  <text x="620" y="185" text-anchor="middle" fill="#5a5a5a" font-size="11">Verify</text>')

lines.append('  <line x1="400" y1="210" x2="280" y2="210" stroke="#5a5a5a" stroke-width="1.5" marker-end="url(#arrow-claude)"/>')
lines.append('  <text x="340" y="205" text-anchor="middle" fill="#5a5a5a" font-size="11">JWT Token</text>')

lines.append('  <line x1="200" y1="220" x2="200" y2="300" stroke="#5a5a5a" stroke-width="1.5" marker-end="url(#arrow-claude)"/>')
lines.append('  <text x="140" y="260" text-anchor="middle" fill="#5a5a5a" font-size="11">Store Token</text>')

lines.append('  <line x1="280" y1="330" x2="400" y2="330" stroke="#5a5a5a" stroke-width="1.5" marker-end="url(#arrow-claude)"/>')
lines.append('  <text x="340" y="325" text-anchor="middle" fill="#5a5a5a" font-size="11">Auth Header</text>')

lines.append('  <line x1="560" y1="330" x2="680" y2="190" stroke="#5a5a5a" stroke-width="1.5" marker-end="url(#arrow-claude)"/>')
lines.append('  <text x="630" y="270" text-anchor="middle" fill="#5a5a5a" font-size="11" transform="rotate(-30 630 270)">Check Role</text>')

lines.append('</svg>')

output_path = "backend/static/cookbook/data/01c-auth-routing/diagram.svg"
with open(output_path, "w", encoding="utf-8") as f:
    f.write("\n".join(lines))
print(f"SVG generated at {output_path}")
