import re

path = "frontend/src/app/sessions/[id]/page.tsx"
with open(path, "r", encoding="utf-8") as f:
    content = f.read()

# 1. Add candidateSearch state after loading state
old_state = "  const [loading, setLoading] = useState(true);"
new_state = "  const [loading, setLoading] = useState(true);\n  const [candidateSearch, setCandidateSearch] = useState(\"\");"
content = content.replace(old_state, new_state, 1)

# 2. Insert search bar and filter map results
# Find the pattern for the entire results block
old_block = '<div className="space-y-3">\n                {match.results.map'
new_block = '''<div className="mb-4">
                 <input
                   type="text"
                   placeholder="Search candidate by name..."
                   value={candidateSearch}
                   onChange={e => setCandidateSearch(e.target.value)}
                   className="w-full bg-[var(--color-surface-2)] border border-[var(--color-border-strong)] focus:border-[var(--color-brand)] rounded-xl px-4 py-2.5 text-sm outline-none transition-all"
                 />
               </div>
               <div className="space-y-3">
                {match.results
                  .filter(c => !candidateSearch || (c.name || "").toLowerCase().includes(candidateSearch.toLowerCase()))
                  .map'''
content = content.replace(old_block, new_block, 1)

# 3. Fix score display - add % sign
old_score = '{(c.final_score * 100).toFixed(0)}\n                          </div>'
new_score = '{(c.final_score * 100).toFixed(0)}%\n                          </div>'
content = content.replace(old_score, new_score, 1)

with open(path, "w", encoding="utf-8") as f:
    f.write(content)

print("Patched successfully!")
print(f"candidateSearch state added: {'candidateSearch' in content}")
print(f"Search input added: {'Search candidate by name' in content}")
print(f"Filter added: {'.filter(c =>' in content}")