/* Discovery (Module A) — scored, explainable creator candidates. */
const Screen_Discovery = ({ product, go }) => {
  const { fmt } = MITA;
  const [platform, setPlatform] = React.useState('All');
  const [q, setQ] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const rows = MITA.creators.filter((c) =>
    (platform === 'All' || c.platform === platform) &&
    (q === '' || (c.name + c.handle + c.niche).toLowerCase().includes(q.toLowerCase()))
  );

  const scoreTone = (s) => (s >= 85 ? 'success' : s >= 70 ? 'info' : 'neutral');

  const columns = [
    { key: 'name', header: 'Creator', sortable: true, sticky: true, cell: (r) => (
      <span className="mt-cluster" style={{ gap: 10 }}>
        <Avatar initials={r.initials} gradient={r.gradient} size="sm" status={r.status === 'active' ? 'online' : undefined} />
        <span><p style={{ margin: 0, fontWeight: 600, fontSize: 13 }}>{r.name}</p>
          <p style={{ margin: 0, fontSize: 12, color: 'var(--fg-muted)' }} className="mono">{r.handle}</p></span>
      </span>) },
    { key: 'platform', header: 'Platform', sortable: true },
    { key: 'followers', header: 'Followers', align: 'right', sortable: true, sortValue: (r) => r.followers, cell: (r) => <span className="mono">{fmt.k(r.followers)}</span> },
    { key: 'engagement', header: 'Eng.', align: 'right', sortable: true, sortValue: (r) => r.engagement, cell: (r) => <span className="mono">{r.engagement}%</span> },
    { key: 'niche', header: 'Niche', sortable: true, cell: (r) => <span className="mt-tag">{r.niche}</span> },
    { key: 'score', header: 'Fit score', align: 'right', sortable: true, sortValue: (r) => r.score, cell: (r) => (
      <Badge status={scoreTone(r.score)} tone="soft"><span className="mono">{r.score}</span></Badge>) },
    { key: 'status', header: 'Status', sortable: true, cell: (r) => <StatusPill status={r.status === 'active' ? 'on schedule' : r.status} label={r.status} /> },
  ];

  const renderExpanded = (r) => (
    <div className="mt-grid mt-grid--2" style={{ gap: 'var(--space-lg)' }}>
      <div>
        <p className="mt-eyebrow">Why this score</p>
        {r.factors.map((f) => (
          <div className="mt-factor" key={f.k}>
            <span className="mt-factor__k">{f.k}</span>
            <span className="mt-bar"><span className="mt-bar__fill" style={{ width: f.v + '%' }} /></span>
            <span className="mt-factor__v">{f.v}</span>
          </div>
        ))}
      </div>
      <div>
        <p className="mt-eyebrow">Profile</p>
        <p className="mt-sub" style={{ fontSize: 13 }}>Style: <b>{r.style}</b> · Location: <b>{r.location}</b> · Contactable: <b>{r.contactable ? 'yes' : 'unknown'}</b></p>
        {r.trial && <Alert variant="success" title={`Trial passed · ${r.trial.passed}/${r.trial.videos} videos`}>US${r.trial.cost} trial gate cleared — on the active roster.</Alert>}
        <div className="mt-cluster" style={{ marginTop: 'var(--space-sm)' }}>
          <Button size="sm" leadingIcon={I.arrow} onClick={() => { toastSafe('Pushed to Outreach', r.name); go('outreach'); }}>Push to outreach</Button>
          <Button size="sm" variant="secondary">Shortlist</Button>
        </div>
      </div>
    </div>
  );

  const reload = () => { setLoading(true); setTimeout(() => setLoading(false), 900); };

  return (
    <div className="mt-page">
      <ScreenHead
        eyebrow="Acquire · Module A · Creator Discovery Engine"
        question="Which creators should we source next?"
        sub="Continuously ranked candidates across TikTok, Instagram, YouTube and Threads — scored by niche fit, audience match, style and predicted performance, with the factors shown."
        actions={<><Button variant="ghost" size="sm" onClick={reload}>Re-run discovery</Button><Button size="sm" leadingIcon={I.plus}>Import list</Button></>}
      />

      <div className="mt-grid mt-grid--kpi mt-fade" style={{ marginBottom: 'var(--space-lg)' }}>
        <Kpi label="Candidates surfaced" value={fmt.n(MITA.creators.length)} delta="+9 this week" />
        <Kpi label="Shortlisted" value={MITA.creators.filter((c) => c.status === 'shortlisted').length} />
        <Kpi label="On active roster" value={MITA.activeCreators.length} delta="+3" />
        <Kpi label="Avg fit score" value={<span>{Math.round(MITA.creators.reduce((a, b) => a + b.score, 0) / MITA.creators.length)}</span>} help="Blended niche-fit, audience-match, style and predicted-performance score. Higher = source first." />
      </div>

      <Card className="mt-fade"><CardBody>
        <div className="mt-cluster" style={{ marginBottom: 'var(--space-sm)', gap: 'var(--space-sm)' }}>
          <div style={{ minWidth: 240 }}>
            <Input leadingIcon={I.discovery} aria-label="Search creators by name, handle or niche" placeholder="Search name, handle, niche…" value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
          <NativeSelect aria-label="Filter by platform" value={platform} onChange={(e) => setPlatform(e.target.value)}>
            {['All', 'TikTok', 'Instagram', 'YouTube', 'Threads'].map((p) => <option key={p}>{p}</option>)}
          </NativeSelect>
          <span className="mt-muted mono" style={{ fontSize: 13, marginLeft: 'auto' }}>{rows.length} candidates</span>
        </div>
        <DataTable
          columns={columns} data={rows} rowKey="id"
          selectable columnVisibility density="comfortable" loading={loading}
          renderExpanded={renderExpanded}
          bulkActions={[{ label: 'Push to outreach', onClick: (keys) => toastSafe('Pushed to outreach', keys.length + ' creators') }]}
          empty={{ title: 'No creators match', sub: 'Loosen the filters or re-run discovery for this product.', cta: 'Re-run discovery', onCta: reload }}
          summary={`Showing ${rows.length} of ${MITA.creators.length} scored candidates`}
        />
      </CardBody></Card>
    </div>
  );
};

/* toast is exported by FeedbackV2; guard in case the shape differs */
function toastSafe(title, desc) {
  try {
    if (window.toast && window.toast.success) window.toast.success(title, { description: desc });
    else if (typeof window.toast === 'function') window.toast({ title, description: desc, variant: 'success' });
  } catch (e) { /* no-op */ }
}
window.toastSafe = toastSafe;
window.Screen_Discovery = Screen_Discovery;