/* BriefArea.jsx , Main workspace: brief header, thread, input bar. */
function BriefArea({ campaign, draft, onDraftChange }) {
 if (!campaign) {
  return (
   <main className="bf-brief">
    <div className="bf-brief__empty">
     <h2>Select a campaign</h2>
     <p>Pick a campaign from the left to see its brief, outreach, and creator replies.</p>
    </div>
   </main>
  );
 }

 return (
  <main className="bf-brief" aria-label={'Campaign ' + campaign.name}>
   <header className="bf-brief__header">
    <div>
     <span className="bf-eyebrow">{campaign.client}</span>
     <h1 className="bf-brief__title">{campaign.name}</h1>
     <div className="bf-brief__meta">
      <span className={'bf-dot bf-dot--' + campaign.dot} aria-hidden="true"></span>
      <span>{campaign.status}</span>
      <span className="bf-brief__divider" aria-hidden="true">·</span>
      <span>{campaign.creators} creators paired</span>
      <span className="bf-brief__divider" aria-hidden="true">·</span>
      <span>Last update {campaign.last}</span>
     </div>
    </div>
    <div className="bf-brief__actions">
     <button className="bf-btn bf-btn--secondary bf-btn--sm">Export</button>
     <button className="bf-btn bf-btn--primary bf-btn--sm">Approve brief</button>
    </div>
   </header>

   <section className="bf-brief__stats" aria-label="Campaign stats">
    <div className="bf-stat">
     <div className="bf-stat__label">Drafts in</div>
     <div className="bf-stat__value">7</div>
     <div className="bf-stat__delta bf-stat__delta--up">+2 today</div>
    </div>
    <div className="bf-stat">
     <div className="bf-stat__label">Awaiting approval</div>
     <div className="bf-stat__value">3</div>
     <div className="bf-stat__delta">2 due this week</div>
    </div>
    <div className="bf-stat">
     <div className="bf-stat__label">Spend to date</div>
     <div className="bf-stat__value">$14.2k</div>
     <div className="bf-stat__delta">of $24.0k</div>
    </div>
    <div className="bf-stat">
     <div className="bf-stat__label">Avg. engagement</div>
     <div className="bf-stat__value">4.6%</div>
     <div className="bf-stat__delta bf-stat__delta--up">+1.2 vs benchmark</div>
    </div>
   </section>

   {(() => { const T = window.Thread; return T ? <T campaign={campaign} /> : null; })()}

   <InputBar value={draft} onChange={onDraftChange} />
  </main>
 );
}

window.BriefArea = BriefArea;