#!/usr/bin/env python3
fp = '/home/uroma/promptarch/components/AIAssist.tsx'
with open(fp, 'r') as f:
    lines = f.readlines()

changes = 0

# CHANGE 1: Add deviceSize state after viewMode state
for i, line in enumerate(lines):
    if 'const [viewMode, setViewMode]' in line and 'useState' in line:
        new_lines = [
            line,
            '    const [deviceSize, setDeviceSize] = useState<"full" | "desktop" | "tablet" | "mobile">("full");\n',
            '    const deviceWidths: Record<string, string> = { full: "100%", desktop: "1280px", tablet: "768px", mobile: "375px" };\n',
        ]
        lines[i:i+1] = new_lines
        changes += 1
        print('Change 1: Added deviceSize state')
        break

# CHANGE 2: Find canvas wrapper and add device-size wrapper around LiveCanvas
for i, line in enumerate(lines):
    if 'flex-1 overflow-auto relative bg-[#050505]' in line and i > 1400:
        print('Found canvas wrapper at line', i+1)
        # Find LiveCanvas line
        for j in range(i, min(i+10, len(lines))):
            if '<LiveCanvas' in lines[j]:
                # Insert wrapper div before LiveCanvas
                indent = '                                        '
                wrapper = indent + '<div className="mx-auto transition-all duration-300 h-full"\n'
                wrapper += indent + '     style={deviceSize !== "full"\n'
                wrapper += indent + '       ? { width: deviceWidths[deviceSize], maxWidth: "100%", border: "1px solid rgba(30,58,138,0.3)", borderRadius: "12px", overflow: "hidden", boxShadow: "0 20px 60px rgba(0,0,0,0.5)" }\n'
                wrapper += indent + '       : undefined}>\n'
                lines[j:j] = [wrapper]
                changes += 1
                print('Change 2: Added device wrapper before LiveCanvas')
                break
        break

with open(fp, 'w') as f:
    f.writelines(lines)

print('Applied', changes, 'changes')