// Campaign detail — shown in right pane

function CampaignDetail({ campaignId, onClose, onBack, onOpenAdset }) {
  const c = window.FABCOM_DATA.campaigns.find(x => x.id === campaignId);
  if (!c) return null;
  const acc = window.FABCOM_DATA.accounts.find(a => a.id === c.account_id);
  const adsets = window.FABCOM_DATA.adsets.filter(a => a.campaign_id === c.id);

  return (
    <div className="surface rounded-xl h-full flex flex-col overflow-hidden slide-in">
      <div className="px-5 pt-5 pb-3 border-b border-soft">
        <div className="flex items-center gap-2 text-[12px]">
          <Breadcrumbs items={[
            {label: acc.name, onClick: onBack},
            {label: c.name},
          ]}/>
          <div className="ml-auto flex items-center gap-1">
            <Button icon="copy">Copy ID</Button>
            <Button icon="external">Ads Manager</Button>
            <button onClick={onClose} className="h-8 w-8 rounded-md hover:bg-[var(--surface-2)] flex items-center justify-center text-3"><Icon name="x" size={14}/></button>
          </div>
        </div>
        <div className="flex items-center gap-3 mt-3">
          <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{background:"var(--surface-2)", border:"1px solid var(--border)"}}>
            <Icon name="zap" size={18} className="accent-text"/>
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2">
              <StatusPill status={c.status}/>
              <span className="mono text-3 text-[11px]">{c.id}</span>
            </div>
            <h2 className="text-[18px] font-semibold tracking-tight mt-1 truncate">{c.name}</h2>
          </div>
        </div>

        <div className="grid grid-cols-6 gap-4 mt-4">
          <MetaStat label="Objective" value={(c.objective||"—").replace("OUTCOME_","")}/>
          <MetaStat label="Buying type" value={c.buying_type||"—"}/>
          <MetaStat label="Bid strategy" value={(c.bid_strategy||"—").replace("LOWEST_COST_","LC_")}/>
          <MetaStat label="Daily budget" value={window.fmtCCY(c.daily_budget, acc.ccy)}/>
          <MetaStat label="Start" value={new Date(c.start_time).toLocaleDateString("en-HK",{month:"short",day:"numeric"})}/>
          <MetaStat label="End" value={c.end_time ? new Date(c.end_time).toLocaleDateString("en-HK",{month:"short",day:"numeric"}) : "Ongoing"}/>
        </div>
      </div>

      <div className="flex-1 overflow-auto px-5 py-4">
        <div className="flex items-center justify-between mb-2">
          <div className="text-3 text-[11px] uppercase tracking-wide">Adsets ({adsets.length})</div>
          <Button icon="sheet" size="xs">Export</Button>
        </div>
        <table className="w-full">
          <thead>
            <tr>
              <th className="text-left">Name</th>
              <th className="text-right">Status</th>
              <th className="text-right">Budget</th>
              <th className="text-left">Targeting</th>
              <th className="text-left">Optimization</th>
              <th className="text-right">Ads</th>
            </tr>
          </thead>
          <tbody>
            {adsets.map(as => (
              <tr key={as.id} className="row cursor-pointer" onClick={() => onOpenAdset(as.id)}>
                <td className="text-left">
                  <div className="text-1 text-[12.5px]">{as.name}</div>
                  <div className="mono text-3 text-[11px]">{as.id}</div>
                </td>
                <td className="text-right"><StatusPill status={as.status}/></td>
                <td className="text-right tnum text-[12px]">
                  {as.daily_budget ? <>{window.fmtCCY(as.daily_budget, acc.ccy)}<span className="text-3">/d</span></>
                                   : <span className="text-3">LT {window.fmtCCY(as.lifetime_budget, acc.ccy)}</span>}
                </td>
                <td className="text-left">
                  <div className="flex flex-wrap gap-1">
                    <Chip>{as.age_min}–{as.age_max}</Chip>
                    <Chip>{as.gender}</Chip>
                    <Chip>{as.geo.join(", ")}</Chip>
                    <Chip tone="accent">{(as.audience||"—").split("—")[0].trim()}</Chip>
                  </div>
                </td>
                <td className="text-left mono text-[11.5px] text-2">{as.optimization_goal}</td>
                <td className="text-right tnum">{as.ad_ids.length}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { CampaignDetail });