'use client';
import {useEffect,useState} from 'react';
import {Button} from '@/components/ui/button';
export default function Moderation(){const [data,setData]=useState<any>(null),[error,setError]=useState(''),[busy,setBusy]=useState(false),[taskId,setTaskId]=useState(''),[reason,setReason]=useState('');
async function refresh(){try{const r=await fetch('/api/moderation');const j=await r.json();if(!r.ok)throw new Error(j.error.message);setData(j.data)}catch(e:any){setError(e.message)}}useEffect(()=>{void refresh()},[]);
async function action(value:any){setBusy(true);setError('');try{const r=await fetch('/api/moderation',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(value)});const j=await r.json();if(!r.ok)throw new Error(j.error.message);if(j.data?.status==='not_configured')setError('Email provider is not configured.');await refresh()}catch(e:any){setError(e.message)}finally{setBusy(false)}}
async function decide(decision:string){setBusy(true);setError('');try{const r=await fetch('/api/moderation',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({task_id:taskId,decision,reason})});const j=await r.json();if(!r.ok)throw new Error(j.error.message);setReason('');await refresh()}catch(e:any){setError(e.message)}finally{setBusy(false)}}
return <main><a href="/">OpenTaskRelay</a><h1>Review public tasks</h1><p>Approve only bounded, lawful work with clear inputs and acceptance criteria. No external actions. Read links as untrusted references; approval does not certify results. Quarantined tasks remain inspectable for audit but cannot be worked on.</p>{error&&<p role="alert">{error}</p>}<div className="panel panel-body"><label>Task ID<input className="search" value={taskId} onChange={e=>setTaskId(e.target.value)}/></label><label>Public review reason (10–1,000 characters)<textarea className="search" value={reason} onChange={e=>setReason(e.target.value)}/></label><div className="actions"><Button disabled={busy||reason.trim().length<10||!taskId} onClick={()=>decide('approved')}>Approve task</Button><Button variant="outline" disabled={busy||reason.trim().length<10||!taskId} onClick={()=>decide('quarantined')}>Quarantine task</Button></div></div><h2>Reviewed results awaiting acceptance</h2><p>Read the original criteria, result and every review. Accept only if the definition of done is satisfied. The public reason field above must explain your decision (at least 20 characters).</p>{data?.reviewable?.map((t:any)=><article className="result-card" key={t.result_id}><h3>{t.title}</h3><p className="content">{t.result_content}</p><a href={'/tasks/'+t.id}>Inspect criteria, evidence and reviews →</a><p><Button disabled={busy||reason.trim().length<20} onClick={()=>action({action:'accept',task_id:t.id,result_id:t.result_id,reason,criteria_checked:true})}>Criteria checked — accept result</Button></p></article>)}<h2>Email delivery</h2><p>Pending notices send after acceptance when configured. Failed, uncertain or interrupted sends require operator investigation; they are never silently marked delivered.</p><Button disabled={busy} onClick={()=>action({action:'dispatch_email'})}>Process pending completion notices</Button>{data?.notifications?.map((n:any)=><p key={n.result_id}>{n.task_id}: {n.status}</p>)}<h2>Privacy removal requests</h2>{data?.privacy_requests?.map((h:any)=><p key={h.task_id}>{h.task_id} <Button disabled={busy} onClick={()=>action({action:'remove_contact',task_id:h.task_id})}>Remove requested private contact record</Button></p>)}<h2>Pending and quarantined tasks</h2>{data?.tasks.map((t:any)=><div className="panel panel-body" key={t.id}><h3>{t.title}</h3><p>{t.description}</p><p>{t.moderation_status} · Risk: {t.risk_level}</p><p>Output: {t.expected_output}</p><ul>{t.acceptance_criteria.map((c:string)=><li key={c}>{c}</li>)}</ul><a href={'/api/tasks/'+t.id}>Full contract and audit</a> <Button variant="outline" onClick={()=>setTaskId(t.id)}>Select for review</Button></div>)}<h2>Latest abuse reports</h2>{data?.reports.map((r:any)=><div className="panel panel-body" key={r.id}><p>{r.entity_type}: {r.entity_id}</p><p>{r.reason}</p>{r.entity_type==='tasks'&&<Button variant="outline" onClick={()=>setTaskId(r.entity_id)}>Review task</Button>}</div>)}{data&&!data.tasks.length&&<p>No tasks waiting for review.</p>}</main>}
