/* Outreach (Module B) — turn candidates into onboarded creators. */
const Screen_Outreach = ({ product, go }) => {
  const { fmt } = MITA;
  const [tab, setTab] = React.useState('sequence');

  const templates = [
    { id: 'T-01', name: 'First touch · TikTok', channel: 'TikTok DM', status: 'Approved', body: 'Hey {name} — love your {niche} content. We run paid UGC for fitness apps and think your {style} style is a great fit. Open to a paid trial (10 videos, US$150)?' },
    { id: 'T-02', name: 'Follow-up · Day 3', channel: 'Email', status: 'Approved', body: 'Circling back {name} — the brief is ready whenever you are. Quick 10-video trial, fast payment, clear shot list.' },
    { id: 'T-03', name: 'Instagram opener', channel: 'IG DM', status: 'Draft', body: 'Hi {name}! We brief + pay creators to make short-form for fitness apps. Interested in a trial run?' },
  ];
  const responses = MITA.creators.filter((c) => ['contacted', 'shortlisted', 'onboarded'].includes(c.status)).slice(0, 8).map((c, i) => ({
    ...c, klass: ['Interested', 'Question', 'Interested', 'Needs human', 'Not now'][i % 5],
  }));
  const klassTone = { Interested: 'success', Question: 'info', 'Needs human': 'warning', 'Not now': 'neutral' };
  const onboarding = MITA.creators.filter((c) => c.status === 'contacted' || c.status === 'onboarded').slice(0, 6);

  const tabs = [
    { value: 'sequence', label: 'Sequence' },
    { value: 'responses', label: 'Responses' },
    { value: 'onboarding', label: 'Onboarding queue' },
  ];

  return (
    <div className="mt-page">
      <ScreenHead
        eyebrow="Acquire · Module B · Outreach & Conversion Agent"
        question="Who's ready to onboard?"
        sub="Personalised first-touch and follow-ups from approved templates, responses auto-classified, and only the edge cases routed to a human. In Phase 1 no message sends without an approved template."
        actions={<Button size="sm" leadingIcon={I.plus}>New template</Button>}
      />

      <div className="mt-grid mt-grid--kpi mt-fade" style={{ marginBottom: 'var(--space-lg)' }}>
        <Kpi label="Reply rate" value="38%" delta="+4 pts" help="Share of first-touch messages that get any reply." />
        <Kpi label="Qualification rate" value="61%" delta="+2 pts" />
        <Kpi label="Time to onboard" value="2.4d" delta="−0.6d" />
        <Kpi label="Human-touch rate" value="17%" dir="down" delta="−5 pts" help="Share of conversations that needed a human. Lower is better over time — it means the agent is handling more." />
      </div>

      <Card className="mt-fade"><CardBody>
        <Tabs tabs={tabs} value={tab} onValueChange={setTab} variant="pills" />

        {tab === 'sequence' && (
          <div className="mt-stack" style={{ marginTop: 'var(--space-md)' }}>
            {templates.map((t) => (
              <div key={t.id} className="mt-cardpad" style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
                <div className="mt-spread">
                  <div className="mt-cluster"><span className="mt-tag">{t.id}</span><b>{t.name}</b><span className="mt-tag">{t.channel}</span></div>
                  <Badge status={t.status === 'Approved' ? 'success' : 'warning'} tone="soft" dot>{t.status}</Badge>
                </div>
                <p className="mt-sub" style={{ marginTop: 8, fontSize: 13, fontFamily: 'var(--font-mono)', color: 'var(--fg-default)' }}>{t.body}</p>
              </div>
            ))}
          </div>
        )}

        {tab === 'responses' && (
          <div className="mt-rows" style={{ marginTop: 'var(--space-sm)' }}>
            {responses.map((r) => (
              <div className="mt-row" key={r.id}>
                <Avatar initials={r.initials} gradient={r.gradient} size="sm" />
                <div className="mt-row__main">
                  <p className="mt-row__title">{r.name} <span className="mono mt-muted" style={{ fontWeight: 400 }}>{r.handle}</span></p>
                  <p className="mt-row__meta">{r.platform} · {r.niche}</p>
                </div>
                <Badge status={klassTone[r.klass]} tone="soft">{r.klass}</Badge>
                {r.klass === 'Needs human' ? <Button size="sm" variant="secondary">Take over</Button>
                  : <Button size="sm" variant="ghost" onClick={() => toastSafe('Auto-replied', r.name)}>Auto-reply</Button>}
              </div>
            ))}
          </div>
        )}

        {tab === 'onboarding' && (
          <div style={{ marginTop: 'var(--space-sm)' }}>
            <Alert variant="info" title="Trial gate · US$150 for 10 videos">Every new creator runs a paid trial before joining the roster. Monthly retention keeps quality high.</Alert>
            <div className="mt-rows" style={{ marginTop: 'var(--space-sm)' }}>
              {onboarding.map((r) => (
                <div className="mt-row" key={r.id}>
                  <Avatar initials={r.initials} gradient={r.gradient} size="sm" />
                  <div className="mt-row__main">
                    <p className="mt-row__title">{r.name}</p>
                    <p className="mt-row__meta">{r.platform} · {r.style} · {r.location}</p>
                  </div>
                  <span className="mono mt-muted" style={{ fontSize: 12 }}>trial 0/10</span>
                  <Button size="sm" onClick={(e) => { toastSafe('Onboarding approved', r.name); if (window.adButtonSuccess) window.adButtonSuccess(e.currentTarget, { label: 'Approved' }); }}>Approve & brief</Button>
                </div>
              ))}
            </div>
          </div>
        )}
      </CardBody></Card>
    </div>
  );
};
window.Screen_Outreach = Screen_Outreach;