function QualityControl({ snapshot }) {
  const qcItems = (snapshot.workItems || []).filter((item) => ["qc", "punch"].includes(item.type) || ["blocked", "review"].includes(item.status));
  const pending = qcItems.filter((item) => !["done", "approved"].includes(item.status));

  return (
    <div className="fade-in">
      <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-3">
        <StatCard title="Pending QC" value={pending.length} trend="Needs review" icon={<Icons.quality/>} tone="warning"/>
        <StatCard title="Risk-linked Work" value={snapshot.rollups.risk} trend="From task variance" icon={<Icons.alert/>} tone="danger"/>
        <StatCard title="Evidence Captured" value={snapshot.rollups.evidence} trend="Photos + checklists" icon={<Icons.camera/>} tone="info"/>
      </div>

      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_.9fr]">
        <Card>
          <SectionTitle title="QC / Punch Queue" subtitle="Generated from work item type and status." />
          <div className="space-y-3">
            {qcItems.map((item) => (
              <div key={item.id} className="rounded-xl border border-border-light p-4">
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <h3 className="font-bold">{item.title}</h3>
                    <p className="text-sm text-text-muted">{item.type} · {item.assigneeRole} · {item.dueDate || "No due date"}</p>
                  </div>
                  <Badge tone={item.status === "approved" || item.status === "done" ? "success" : item.status === "blocked" ? "danger" : "warning"}>{item.status}</Badge>
                </div>
                <div className="mt-3 flex flex-wrap gap-2">
                  <Button variant="secondary" onClick={() => window.ConstructProData.addEvidence({ workItemId: item.id, by: "Admin", type: "QC Checklist", note: "Admin reviewed checklist.", checklistComplete: true })}>Open Checklist</Button>
                  <Button onClick={() => window.ConstructProData.updateWorkStatus({ workItemId: item.id, status: "approved", progressPct: 100, note: "QC gate approved. Downstream work can proceed.", role: "Admin" })}>Approve & Unlock</Button>
                  <Button variant="ghost" onClick={() => window.ConstructProData.triggerAlert({ workItemId: item.id, roles: [item.assigneeRole], severity: "high" })}>Request Field Proof</Button>
                </div>
              </div>
            ))}
            {!qcItems.length && <p className="text-sm text-text-muted">No QC gates or punch items yet. Create them from Work Management.</p>}
          </div>
        </Card>

        <AlertPanel snapshot={snapshot}/>
      </div>
    </div>
  );
}

Object.assign(window, { QualityControl });