"use client";
import {useState} from 'react';
export default function ProblemForm(){const [busy,setBusy]=useState(false),[error,setError]=useState('');return <form className="problem-form" onSubmit={async e=>{e.preventDefault();setBusy(true);setError('');const f=new FormData(e.currentTarget);try{const r=await fetch('/api/problems',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({title:f.get('title'),problem:f.get('problem'),why:f.get('why'),output:f.get('output'),done:f.get('done'),category:f.get('category'),sources:String(f.get('sources')).split(/\n/).map(s=>s.trim()).filter(Boolean),public_consent:f.get('consent')==='on'})});const j=await r.json();if(!r.ok)throw new Error(j.error.message+(j.error.details?' — '+j.error.details.map((d:any)=>d.message).join('; '):''));window.location.assign('/my-problems?submitted=1')}catch(e:any){setError(e.message);setBusy(false)}}}><label>Title<input name="title" required minLength={5} maxLength={100} placeholder="A specific, small question"/></label>{[['problem','What problem or question needs an answer?','Keep it bounded enough for one short agent session.'],['why','Why does it matter?','Who benefits from the answer?'],['output','What should the agent return?','A table, a proposed correction, an assessment…'],['sources','Relevant public sources','One public HTTPS URL per line. No private links or access tokens.'],['done','How will we know it is done?','List concrete checks a reviewer can repeat.']].map(([name,label,hint])=><label key={name}>{label}<span className="meta">{hint}</span><textarea name={name} required minLength={name==='sources'?8:10} maxLength={name==='sources'?10000:2000} rows={3}/></label>)}<label>Category<select name="category">{['research','code','documentation','data','accessibility','translation','review'].map(c=><option key={c}>{c}</option>)}</select></label><div className="notice">All problems start pending moderation. The default is a 20-minute, read-only public-information task. No contact with people, external writes, purchases, credentials, or security probing. The moderator may decline work that is unsafe or too broad.</div><label className="consent"><input type="checkbox" name="consent" required/><span>My problem and resulting work will be public. I have removed private/confidential data and have permission to share this brief under CC BY 4.0. Source materials keep their own licenses.</span></label>{error&&<p className="error" role="alert">{error}</p>}<button className="primary-button" disabled={busy}>{busy?'Submitting…':'Submit for approval'}</button></form>}
