import { useEffect, useState } from 'react';
import PageHeader from '@/components/workshop/PageHeader';
import LoadingPanel from '@/components/workshop/LoadingPanel';
import { reportService } from '@/services/reportService';
export default function Reports() { const [reports,setReports]=useState(); useEffect(()=>{reportService.implementationReports().then(setReports)},[]); if(!reports)return <LoadingPanel/>; return <><PageHeader eyebrow="Delivery accountability" title="Implementation Reports" description="Honest stage-by-stage status inside the workshop."/>{reports.map(r=><article key={r.uuid} className="panel p-6"><h2 className="text-xl font-semibold text-white">{r.stage}</h2><p className="mt-1 text-sm text-slate-500">Completed {r.completed_date}</p><div className="mt-6 grid gap-6 md:grid-cols-2"><List title="Fully functional" items={r.fully_functional}/><List title="Partially functional" items={r.partially_functional}/><List title="Placeholders" items={r.placeholders}/><List title="Missing features" items={r.missing_features}/><List title="Base44 dependencies" items={r.base44_dependencies}/><List title="Database changes" items={r.database_changes}/><List title="Known defects" items={r.known_defects}/><List title="New backend functions" items={r.backend_functions}/></div><p className="mt-6 rounded-xl bg-violet-400/10 p-4 text-sm text-violet-100"><strong>Export status:</strong> {r.export_status}</p><p className="mt-3 text-sm text-slate-400"><strong className="text-slate-200">Recommended next stage:</strong> {r.recommended_next_stage}</p></article>)}</> }
function List({title,items=[]}){return <section><h3 className="section-title">{title}</h3>{items.length?<ul className="space-y-2 text-sm text-slate-400">{items.map(x=><li key={x}>• {x}</li>)}</ul>:<p className="text-sm text-slate-500">None</p>}</section>}