// Screen: ADS DATA / CSV analyzer

const ADS_DATA_DEMO = [
  { campaign: 'Loomi_Pro_Lead_VN_Q2_v3', adset: 'A · Pain-led',     spend: 86.00, impressions: 32140, clicks: 712, leads: 41, cpl: 2.10, ctr: 2.21, roas: 4.6 },
  { campaign: 'Loomi_Pro_Lead_VN_Q2_v3', adset: 'B · Outcome-led',  spend: 84.20, impressions: 28930, clicks: 502, leads: 26, cpl: 3.24, ctr: 1.74, roas: 3.1 },
  { campaign: 'Loomi_Pro_Lead_VN_Q2_v3', adset: 'C · Social-proof', spend: 89.50, impressions: 34620, clicks: 1071,leads: 48, cpl: 1.86, ctr: 3.09, roas: 5.2 },
  { campaign: 'Loomi_Awareness_TOFU',    adset: 'Broad · 25-45',    spend: 120.0, impressions: 88200, clicks: 624, leads: 12, cpl: 10.0, ctr: 0.71, roas: 1.3 },
  { campaign: 'Loomi_Retarget_30d',      adset: 'Visitors 30d',     spend: 42.30, impressions: 9120,  clicks: 384, leads: 22, cpl: 1.92, ctr: 4.21, roas: 6.1 },
  { campaign: 'Loomi_Retarget_30d',      adset: 'Lead openers 14d', spend: 24.80, impressions: 2840,  clicks: 168, leads: 18, cpl: 1.38, ctr: 5.92, roas: 7.8 },
];

const ScreenData = ({ section, onUpdateSection, lang = 'vi' }) => {
  const T = (vi, en) => lang === 'en' ? en : vi;
  const [draft, setDraft] = React.useState('');
  const [running, setRunning] = React.useState(false);
  const [submitError, setSubmitError] = React.useState(null);
  const [hasData, setHasData] = React.useState(false);
  const [filename] = React.useState('meta_ads_export_2026-05-13.csv');
  const [aiResult, setAiResult] = React.useState(null);

  const submit = async (attachments = []) => {
    if (!draft.trim()) return;
    setRunning(true);
    setSubmitError(null);
    try {
      const tableContext = ADS_DATA_DEMO.map(r =>
        `${r.adset}: spend=$${r.spend} cpl=$${r.cpl} ctr=${r.ctr}% roas=${r.roas}x leads=${r.leads}`
      ).join('\n');
      const attCtx = window.buildAttachmentContext(attachments);
      const result = await window._aiCall(draft, 'data', section.styleId, `CSV data:\n${tableContext}${attCtx}`);
      setAiResult({ query: draft, text: result });
      const ts = new Date().toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit' });
      const newVer = {
        id: `d-ai-${Date.now()}`,
        ts,
        label: draft.slice(0, 28) + (draft.length > 28 ? '…' : ''),
        output: { _text: result },
      };
      onUpdateSection({ versions: [...section.versions, newVer], activeId: newVer.id });
    } catch (e) {
      console.error(e);
      setSubmitError(e.message || 'Lỗi kết nối AI Agent');
    } finally {
      setRunning(false);
      setDraft('');
    }
  };

  const toggleSource = (k) => {
    const cur = section.linkedSources || [];
    onUpdateSection({ linkedSources: cur.includes(k) ? cur.filter(x => x !== k) : [...cur, k] });
  };

  // Aggregate
  const total = ADS_DATA_DEMO.reduce((a, r) => ({
    spend: a.spend + r.spend,
    impressions: a.impressions + r.impressions,
    clicks: a.clicks + r.clicks,
    leads: a.leads + r.leads,
  }), { spend: 0, impressions: 0, clicks: 0, leads: 0 });
  const avgCPL = total.spend / total.leads;
  const avgCTR = (total.clicks / total.impressions) * 100;

  // Best / worst
  const sortedByCPL = [...ADS_DATA_DEMO].sort((a, b) => a.cpl - b.cpl);
  const best = sortedByCPL[0];
  const worst = sortedByCPL[sortedByCPL.length - 1];

  return (
    <div className="screen-body" data-screen-label="05 Ads data">
      <div className="screen-canvas">
        <div className="screen-section-label">{T('ADS DATA', 'ADS DATA')}</div>

        <PromptInput
          placeholder="VD: Tìm winner trong tuần qua, gợi ý scaling và pause adset CPL > $4…"
          value={draft}
          onChange={setDraft}
          onSubmit={submit}
          running={running}
          runLabel="Generate"
          currentKind="data"
          model={section.model} onModelChange={(v) => onUpdateSection({ model: v })}
          styleId={section.styleId} onStyleChange={(v) => onUpdateSection({ styleId: v })}
          linkedSources={section.linkedSources || []} onToggleSource={toggleSource}
          suggestions={[
            { icon: 'trending-up', label: 'Tìm winner để scale' },
            { icon: 'alert-octagon', label: 'Pause adset CPL > $4' },
            { icon: 'pie-chart', label: 'Breakdown theo placement' },
            { icon: 'sparkles', label: 'Đề xuất Tuần tới' },
          ]}
        />

        <div style={{ height: 22 }} />

        {/* Upload zone */}
        <div className="csv-upload">
          <div className="csv-upload-left">
            <div className="csv-upload-icon">
              <Icon name="file-spreadsheet" size={20} color="var(--success)" />
            </div>
            <div>
              <div className="csv-upload-name">{filename}</div>
              <div className="csv-upload-sub">
                {ADS_DATA_DEMO.length} adsets · 6 ngày · Meta Ads Manager export
              </div>
            </div>
          </div>
          <div className="btn-row">
            <Btn variant="ghost" size="sm" icon="refresh-ccw">Re-sync</Btn>
            <Btn variant="ghost" size="sm" icon="upload">Replace CSV</Btn>
            <Btn variant="ghost" size="sm" icon="link">Connect Meta API</Btn>
          </div>
        </div>

        <div style={{ height: 18 }} />

        {submitError && (
          <div style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            padding: '12px 16px', borderRadius: 10, marginBottom: 16,
            background: 'rgba(248,113,113,0.08)',
            border: '1px solid rgba(248,113,113,0.3)',
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F87171" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 1 }}>
              <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: '#F87171', marginBottom: 3 }}>Lỗi khi gọi AI Agent</div>
              <div style={{ fontSize: 12, color: 'var(--fg-secondary)', lineHeight: 1.5 }}>{submitError}</div>
            </div>
            <button onClick={() => setSubmitError(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--fg-muted)', flexShrink: 0 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
          </div>
        )}

        {running ? (
          <LoadingSkeleton label="Analyzing 6 adsets · 7-day window…" lines={5} />
        ) : hasData && (
          <React.Fragment>
            {/* KPIs summary */}
            <OutputCard icon="bar-chart-3" title="Tổng quan 7 ngày" sub={`${ADS_DATA_DEMO.length} adsets analyzed`}>
              <div className="ads-budget-grid" style={{ gridTemplateColumns: 'repeat(5, 1fr)' }}>
                <KPI label="Spend"       val={`$${total.spend.toFixed(0)}`} />
                <KPI label="Impressions" val={`${(total.impressions / 1000).toFixed(1)}k`} />
                <KPI label="Clicks"      val={total.clicks.toString()} />
                <KPI label="Leads"       val={total.leads.toString()}     color="var(--success)" />
                <KPI label="Avg CPL"     val={`$${avgCPL.toFixed(2)}`}   color="var(--accent-cyan)" />
              </div>
            </OutputCard>

            {/* Per-row table */}
            <OutputCard icon="table-2" title="Performance theo adset" sub="Sorted by CPL ↑">
              <div className="data-table-wrap">
                <table className="data-table">
                  <thead>
                    <tr>
                      <th>Campaign</th>
                      <th>Adset</th>
                      <th style={{ textAlign: 'right' }}>Spend</th>
                      <th style={{ textAlign: 'right' }}>Impr.</th>
                      <th style={{ textAlign: 'right' }}>Clicks</th>
                      <th style={{ textAlign: 'right' }}>Leads</th>
                      <th style={{ textAlign: 'right' }}>CTR</th>
                      <th style={{ textAlign: 'right' }}>CPL</th>
                      <th style={{ textAlign: 'right' }}>ROAS</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {sortedByCPL.map((r, i) => {
                      const isBest = r === best;
                      const isWorst = r === worst;
                      return (
                        <tr key={i} className={isBest ? 'row-best' : (isWorst ? 'row-worst' : '')}>
                          <td>
                            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-secondary)' }}>{r.campaign}</span>
                          </td>
                          <td>{r.adset}</td>
                          <td className="num">${r.spend.toFixed(2)}</td>
                          <td className="num">{r.impressions.toLocaleString()}</td>
                          <td className="num">{r.clicks}</td>
                          <td className="num" style={{ color: 'var(--success)' }}>{r.leads}</td>
                          <td className="num">{r.ctr.toFixed(2)}%</td>
                          <td className="num" style={{ fontWeight: 600, color: r.cpl < 2 ? 'var(--success)' : (r.cpl > 4 ? 'var(--error)' : 'var(--fg-primary)') }}>
                            ${r.cpl.toFixed(2)}
                          </td>
                          <td className="num" style={{ color: r.roas > 4 ? 'var(--accent-cyan)' : 'var(--fg-primary)' }}>{r.roas.toFixed(1)}x</td>
                          <td>
                            {isBest && <Badge label="Best" color="var(--success)" bg="rgba(74,222,128,0.10)" />}
                            {isWorst && <Badge label="Pause?" color="var(--error)" bg="rgba(248,113,113,0.10)" />}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </OutputCard>

            {/* AI insights */}
            <OutputCard icon="sparkles" title="AI insights" sub="AI Agent · Auto-analyzed từ CSV">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <InsightRow
                  kind="win"
                  title="Scale adset C (Social-proof) +50%"
                  body={`CPL $${best.cpl.toFixed(2)} · ROAS ${best.roas.toFixed(1)}x — vượt mục tiêu CPL $3.5 và đang trong learning phase ổn định. Đề xuất tăng budget từ $20 → $30/ngày trong 3 ngày.`}
                />
                <InsightRow
                  kind="warn"
                  title="Pause Loomi_Awareness_TOFU"
                  body={`CPL $${worst.cpl.toFixed(2)} (5x target). CTR chỉ 0.71% — broad audience không match được hook. Pause adset, redirect $120/ngày → retargeting funnel.`}
                />
                <InsightRow
                  kind="info"
                  title="Retargeting outperform 4x prospecting"
                  body="Visitors 30d và Lead openers 14d cho CPL $1.38–$1.92. Đề xuất tăng budget retargeting +$25/ngày và build LAL 1% từ lead openers."
                />
                <InsightRow
                  kind="info"
                  title="Linh Minh persona match Social-proof angle"
                  body="Adset C dùng hook testimonial — đang trùng với objection chính của persona Considering tier (Linh Minh). Đề xuất generate thêm 2 social-proof variant cho tuần tới."
                />
              </div>
            </OutputCard>

            <div className="btn-row" style={{ justifyContent: 'flex-end', marginTop: 6 }}>
              <Btn variant="secondary" size="md" icon="git-fork">Send to Canvas</Btn>
              <Btn variant="primary" size="md" icon="save">Save as file</Btn>
              <Btn variant="accent" size="md" icon="zap">Apply recommendations</Btn>
            </div>
          </React.Fragment>
        )}
      </div>

      <VersionRail
        versions={section.versions}
        activeId={section.activeId}
        onPick={(id) => onUpdateSection({ activeId: id })}
      />
    </div>
  );
};

const KPI = ({ label, val, color }) => (
  <div className="ads-stat-tile">
    <span className="label">{label}</span>
    <span className="val" style={color ? { color } : null}>{val}</span>
  </div>
);

const InsightRow = ({ kind, title, body }) => {
  const cfg = {
    win:  { icon: 'trending-up',  color: 'var(--success)', bg: 'rgba(74,222,128,0.08)',  border: 'rgba(74,222,128,0.22)' },
    warn: { icon: 'alert-octagon', color: 'var(--error)',  bg: 'rgba(248,113,113,0.08)', border: 'rgba(248,113,113,0.22)' },
    info: { icon: 'info',         color: 'var(--accent-blue)', bg: 'rgba(46,157,247,0.08)', border: 'rgba(46,157,247,0.22)' },
  }[kind];
  return (
    <div style={{
      display: 'flex', gap: 12, alignItems: 'flex-start',
      padding: 12,
      background: cfg.bg,
      border: `1px solid ${cfg.border}`,
      borderRadius: 8,
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: 6,
        background: 'var(--bg-surface)',
        color: cfg.color,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <Icon name={cfg.icon} size={14} />
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 600, color: 'var(--fg-primary)', marginBottom: 4, letterSpacing: '-0.01em' }}>
          {title}
        </div>
        <div style={{ fontSize: 12, color: 'var(--fg-secondary)', lineHeight: 1.55 }}>{body}</div>
      </div>
      <Btn variant="ghost" size="sm" icon="more-horizontal" />
    </div>
  );
};

Object.assign(window, { ScreenData, ADS_DATA_DEMO });