/* Content QA (Module D) — check submitted assets against brief + brand
   before anything is published. */
const Screen_QA = ({ product, go }) => {
  const [filter, setFilter] = React.useState('all');
  const assets = MITA.assets.filter((a) => filter === 'all' || a.qa === filter);
  const cById = MITA.creatorById;

  const counts = {
    pass: MITA.assets.filter((a) => a.qa === 'pass').length,
    review: MITA.assets.filter((a) => a.qa === 'review').length,
    fail: MITA.assets.filter((a) => a.qa === 'fail').length,
  };
  const tone = { pass: 'success', review: 'warning', fail: 'error' };
  const CheckRow = ({ ok, label }) => (
    <div className={`mt-check ${ok ? 'pass' : 'fail'}`}>{ok ? I.check : I.x}<span style={{ color: 'var(--fg-default)' }}>{label}</span></div>
  );

  return (
    <div className="mt-page">
      <ScreenHead
        eyebrow="Produce · Module D · Content QA Engine"
        question="Is this ready to publish?"
        sub="Every submitted asset is checked for technical quality, brand and brief compliance. Failures return to the creator with actionable notes; only borderline or sensitive items need a human."
      />

      <div className="mt-grid mt-grid--kpi mt-fade" style={{ marginBottom: 'var(--space-lg)' }}>
        <Kpi label="QA pass rate" value={`${MITA.kpi.qaPass}%`} delta="+3 pts" help="First-time pass across the defined defect classes." />
        <Kpi label="In review" value={counts.review} help="Borderline or sensitive assets queued for a human decision." />
        <Kpi label="Returned to creator" value={counts.fail} />
        <Kpi label="Avg time in QA" value="42m" dir="down" delta="−9m" />
      </div>

      <div className="mt-cluster mt-fade" style={{ marginBottom: 'var(--space-sm)' }}>
        <ButtonGroup segmented value={filter} onChange={setFilter} options={[
          { value: 'all', label: `All (${MITA.assets.length})` },
          { value: 'review', label: `Review (${counts.review})` },
          { value: 'fail', label: `Failed (${counts.fail})` },
          { value: 'pass', label: `Passed (${counts.pass})` },
        ]} />
      </div>

      {assets.length === 0 ? (
        <Card><CardBody><Empty icon={I.qa} title="Nothing in this bucket">All caught up — no assets are waiting here.</Empty></CardBody></Card>
      ) : (
        <div className="mt-grid mt-grid--3 mt-cards-equal mt-fade">
          {assets.map((a) => {
            const cr = cById[a.creator];
            return (
              <Card key={a.id} interactive>
                <CardBody className="mt-qa__body">
                  <div className="mt-spread">
                    <span className="mt-tag">{a.id}</span>
                    <Badge status={tone[a.qa]} tone="soft" dot>{a.qa === 'pass' ? 'Passed' : a.qa === 'review' ? 'Needs review' : 'Failed'}</Badge>
                  </div>
                  <div className="mt-qa__thumb">
                    <span className="mt-qa__thumb-hook">“{a.hook}”</span>
                    <span className="mt-qa__thumb-fmt mono">{a.format} · 9:16</span>
                  </div>
                  <div className="mt-cluster" style={{ gap: 8 }}>
                    {cr && <Avatar initials={cr.initials} gradient={cr.gradient} size="sm" />}
                    <span style={{ fontSize: 13, fontWeight: 600 }}>{cr ? cr.name : '—'}</span>
                    {a.sensitive && <Badge status="warning" tone="outline" size="sm">sensitive</Badge>}
                  </div>
                  <div className="mt-qa__checks">
                    <CheckRow ok={a.checks.technical} label="Technical — format, ratio, audio" />
                    <CheckRow ok={a.checks.brand} label="Brand — logo, colours, disclaimer" />
                    <CheckRow ok={a.checks.brief} label="Brief — hook, CTA, required shots" />
                  </div>
                  {a.defects.length > 0 && (
                    <div className="mt-qa__notes">
                      <p className="mt-eyebrow" style={{ color: 'var(--error-500)', margin: 0 }}>Return notes</p>
                      <ul className="mt-sub" style={{ fontSize: 12 }}>{a.defects.map((d, i) => <li key={i}>{d}</li>)}</ul>
                    </div>
                  )}
                  <div className="mt-qa__actions">
                    {a.qa === 'pass' ? <Button size="sm" onClick={() => { toastSafe('Queued to publish', a.id); go('publishing'); }}>Publish</Button>
                      : a.qa === 'review' ? <><Button size="sm" onClick={() => toastSafe('Approved', a.id)}>Approve</Button><Button size="sm" variant="secondary">Return</Button></>
                      : <Button size="sm" variant="secondary" onClick={() => toastSafe('Returned to creator', a.id)}>Return with notes</Button>}
                  </div>
                </CardBody>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
};
window.Screen_QA = Screen_QA;