// mkt-drawers.jsx — Marketing drill-down drawer component

const CH_META_DRW = {
  google:  { name: 'Google',  color: '#4285F4', icon: 'G' },
  meta:    { name: 'Meta',    color: '#1877F2', icon: 'M' },
  tiktok:  { name: 'TikTok',  color: '#111111', icon: 'TT' },
  organic: { name: 'Organic', color: '#16A34A', icon: 'O' },
  direct:  { name: 'Direct',  color: '#64748B', icon: 'D' },
};

function ChDot({ ch }) {
  const m = CH_META_DRW[ch] || { name: ch, color: '#888' };
  return <span className="md-chdot"><span className="md-chdot-bullet" style={{ background: m.color }}></span>{m.name}</span>;
}

function MultiAxisChart({ days = 14, spend, roas, conv, markers = [] }) {
  const w = 432, h = 160, pad = { l: 28, r: 28, t: 14, b: 22 };
  const sMax = Math.max(...spend) * 1.15;
  const rMax = Math.max(...roas) * 1.1;
  const innerW = w - pad.l - pad.r;
  const innerH = h - pad.t - pad.b;
  const xFor = (i) => pad.l + (i / (days - 1)) * innerW;
  const ySpend = (v) => pad.t + (1 - v / sMax) * innerH;
  const yRoas = (v) => pad.t + (1 - v / rMax) * innerH;
  const barW = (innerW / days) * 0.55;
  const roasPath = roas.map((v, i) => `${i === 0 ? 'M' : 'L'}${xFor(i).toFixed(1)},${yRoas(v).toFixed(1)}`).join(' ');

  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} className="md-chart">
      {[0.25, 0.5, 0.75].map((p, i) => (
        <line key={i} x1={pad.l} x2={w - pad.r} y1={pad.t + p * innerH} y2={pad.t + p * innerH} stroke="var(--border)" strokeDasharray="2 3" />
      ))}
      {markers.map((m, i) => {
        const x = xFor(m.day);
        return (
          <g key={i}>
            <line x1={x} x2={x} y1={pad.t} y2={h - pad.b} stroke="var(--text-3)" strokeDasharray="3 3" strokeWidth="1" />
            <text x={x} y={pad.t - 4} fontSize="9" textAnchor="middle" fill="var(--text-2)">{m.label}</text>
          </g>
        );
      })}
      {spend.map((v, i) => (
        <rect key={i} x={xFor(i) - barW / 2} y={ySpend(v)} width={barW} height={(h - pad.b) - ySpend(v)} fill="var(--text-3)" opacity="0.30" rx="1" />
      ))}
      <path d={roasPath} fill="none" stroke="var(--chart-1, #4285F4)" strokeWidth="2" />
      {conv.map((c, i) => c > 0 ? <circle key={i} cx={xFor(i)} cy={yRoas(roas[i])} r={2 + c * 1.5} fill="var(--chart-1, #4285F4)" /> : null)}
      <line x1={pad.l} x2={pad.l} y1={pad.t} y2={h - pad.b} stroke="var(--border)" />
      <line x1={w - pad.r} x2={w - pad.r} y1={pad.t} y2={h - pad.b} stroke="var(--border)" />
      <line x1={pad.l} x2={w - pad.r} y1={h - pad.b} y2={h - pad.b} stroke="var(--border)" />
      <text x={pad.l - 4} y={pad.t + 4} fontSize="9" textAnchor="end" fill="var(--text-3)">€{Math.round(sMax)}</text>
      <text x={pad.l - 4} y={h - pad.b} fontSize="9" textAnchor="end" fill="var(--text-3)">0</text>
      <text x={w - pad.r + 4} y={pad.t + 4} fontSize="9" fill="var(--chart-1, #4285F4)">{rMax.toFixed(0)}x</text>
      <text x={w - pad.r + 4} y={h - pad.b} fontSize="9" fill="var(--chart-1, #4285F4)">0</text>
    </svg>
  );
}

function Stats({ stats }) {
  return (
    <div className="md-stats">
      {stats.map((s, i) => (
        <div key={i} className="md-stat">
          <div className="md-stat-lbl">{s.label}</div>
          <div className="md-stat-val">{s.value}</div>
          <div className="md-stat-meta">
            {s.delta && <span className={`md-stat-delta ${s.sign}`}>{s.delta}</span>}
            {s.sub && <span className="md-stat-sub">{s.sub}</span>}
          </div>
        </div>
      ))}
    </div>
  );
}

function SectionHead({ title }) {
  return <div className="md-section-h">{title}</div>;
}

function Insight({ text }) {
  return <div className="md-insight"><span>↳</span>{text}</div>;
}

/* -------- Drawer 1: Channel -------- */
function ChannelDrawer({ d, onCampaign, onClose }) {
  return (
    <DrawerShell d={d} onClose={onClose}>
      <Stats stats={d.stats} />

      <SectionHead title={`${d.path[2]} ${d.period.split('·')[0].trim()}`} />
      <Insight text={d.insight} />
      <div className="md-card"><MultiAxisChart {...d.series} /></div>

      <SectionHead title={d.campaigns.title} />
      <div className="md-card md-tbl-card">
        <table className="md-tbl">
          <thead><tr><th>Кампания</th><th>Status</th><th className="r">Spend</th><th className="r">ROAS</th><th className="r">CR</th><th className="r">Δ</th></tr></thead>
          <tbody>
            {d.campaigns.rows.map((r, i) => (
              <tr key={i} onClick={() => onCampaign && onCampaign(r.name)}>
                <td>{r.name}</td>
                <td><span className={`md-statusdot ${r.status}`}></span>{r.status}</td>
                <td className="r">{r.spend}</td>
                <td className="r"><strong>{r.roas}</strong></td>
                <td className="r">{r.cr}</td>
                <td className={`r md-delta ${r.trend}`}>{r.trend === 'up' ? '↑' : r.trend === 'down' ? '↓' : '·'}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <button className="md-link" onClick={onClose}>{d.campaigns.more}</button>
      </div>

      <SectionHead title={d.funnel.title} />
      <Insight text={d.funnel.bench} />
      <div className="md-card md-funnel">
        {d.funnel.stages.map((s, i) => {
          const max = d.funnel.stages[0].value;
          const w = (s.value / max) * 100;
          return (
            <div key={i} className="md-fn-row">
              <div className="md-fn-lbl">{s.name}</div>
              <div className="md-fn-bar-wrap"><div className="md-fn-bar" style={{ width: w + '%' }}></div></div>
              <div className="md-fn-val">{s.value.toLocaleString()}{s.rate && <span className="md-fn-rate"> · {s.rate}</span>}</div>
            </div>
          );
        })}
      </div>

      <SectionHead title={d.bestworst.title} />
      <div className="md-bw">
        {[
          { kind: 'best', icon: '🟢', data: d.bestworst.best },
          { kind: 'worst', icon: '🔴', data: d.bestworst.worst },
        ].map((blk) => (
          <div key={blk.kind} className={`md-card md-bw-card ${blk.kind}`}>
            <div className="md-bw-head"><span>{blk.icon}</span>{blk.kind === 'best' ? 'Best' : 'Worst'}</div>
            <div className="md-bw-crea">
              <div className="md-bw-thumb" style={{ background: blk.data.creative.color }}>
                <svg viewBox="0 0 80 60" width="100%" height="100%"><rect x="6" y="14" width="68" height="32" rx="3" fill="rgba(255,255,255,0.6)"/><circle cx="40" cy="30" r="8" fill="rgba(0,0,0,0.18)"/></svg>
              </div>
              <div>
                <div className="md-bw-title">{blk.data.creative.title}</div>
                <div className="md-bw-meta">{blk.data.creative.meta}</div>
              </div>
            </div>
            <div className="md-bw-aud">{blk.data.aud}</div>
          </div>
        ))}
      </div>

      <SectionHead title={d.role.title} />
      <div className="md-card md-role">
        <div className="md-role-row">
          <div className="md-role-num">{d.role.last.val}</div>
          <div className="md-role-lbl"><strong>Last-click</strong><br/>{d.role.last.lbl}</div>
        </div>
        <div className="md-role-row">
          <div className="md-role-num assist">{d.role.assist.val}</div>
          <div className="md-role-lbl"><strong>Assisted</strong><br/>{d.role.assist.lbl}</div>
        </div>
        <div className="md-role-note">{d.role.note}</div>
      </div>

      <SectionHead title={d.bench.title} />
      <div className="md-card md-tbl-card">
        <table className="md-tbl md-bench-tbl">
          <thead><tr><th></th>{d.bench.cols.map((c, i) => <th key={i} className={`r ${i === 0 ? 'self' : ''}`}>{c}</th>)}</tr></thead>
          <tbody>
            {d.bench.rows.map((r, i) => (
              <tr key={i}>
                <td>{r.metric}</td>
                {r.vals.map((v, j) => <td key={j} className={`r md-bench-cell ${r.tone[j]} ${j === 0 ? 'self' : ''}`}>{v}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </DrawerShell>
  );
}

/* -------- Drawer 2: Campaign -------- */
function CampaignDrawer({ d, onAudience, onClose }) {
  return (
    <DrawerShell d={d} onClose={onClose}>
      <Stats stats={d.stats} />
      <div className="md-statusbar"><span className="md-statusdot active"></span>{d.status}</div>

      <SectionHead title="Динамика кампании" />
      <div className="md-card"><MultiAxisChart {...d.series} /></div>

      <SectionHead title="Креативы кампании" />
      <div className="md-crea-grid">
        {d.creatives.map((c) => (
          <div key={c.id} className={`md-crea ${c.warn ? 'warn' : ''}`}>
            {c.warn && <div className="md-crea-warn">⚠</div>}
            <div className="md-crea-thumb" style={{ background: c.color }}>
              <svg viewBox="0 0 80 60" width="100%" height="100%"><rect x="8" y="14" width="64" height="32" rx="3" fill="rgba(255,255,255,0.65)"/><circle cx="40" cy="30" r="7" fill="rgba(0,0,0,0.2)"/><polygon points="38,27 38,33 44,30" fill="rgba(255,255,255,0.95)"/></svg>
            </div>
            <div className="md-crea-body">
              <div className="md-crea-title">{c.title}</div>
              <div className="md-crea-stats">{c.stats}</div>
            </div>
          </div>
        ))}
      </div>

      <SectionHead title="Аудитории кампании" />
      <div className="md-card md-tbl-card">
        <table className="md-tbl">
          <thead><tr><th>Аудитория</th><th className="r">Spend</th><th className="r">Impr.</th><th className="r">CTR</th><th className="r">ROAS</th></tr></thead>
          <tbody>
            {d.audiences.map((a, i) => (
              <tr key={i} onClick={() => onAudience && onAudience(a.name)}>
                <td>{a.name}</td>
                <td className="r">{a.spend}</td>
                <td className="r">{a.impr}</td>
                <td className="r">{a.ctr}</td>
                <td className="r"><strong>{a.roas}</strong></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <SectionHead title={d.placement.title} />
      <div className="md-card md-place">
        <div className="md-place-col">
          <div className="md-place-h">Placement</div>
          {d.placement.place.map((p, i) => (
            <div key={i} className="md-place-row">
              <span className="md-place-lbl">{p.lbl}</span>
              <div className="md-place-bar-wrap"><div className="md-place-bar" style={{ width: p.pct + '%' }}></div></div>
              <span className="md-place-val">{p.pct}%</span>
            </div>
          ))}
        </div>
        <div className="md-place-col">
          <div className="md-place-h">Device</div>
          {d.placement.device.map((p, i) => (
            <div key={i} className="md-place-row">
              <span className="md-place-lbl">{p.lbl}</span>
              <div className="md-place-bar-wrap"><div className="md-place-bar" style={{ width: p.pct + '%' }}></div></div>
              <span className="md-place-val">{p.pct}%</span>
            </div>
          ))}
        </div>
      </div>

      <div className="md-reco">
        <div className="md-reco-h">💡 {d.reco.title}</div>
        <div className="md-reco-body">{d.reco.body}</div>
      </div>
    </DrawerShell>
  );
}

/* -------- Drawer 3: Audience -------- */
function AudienceDrawer({ d, onCampaign, onClose }) {
  return (
    <DrawerShell d={d} onClose={onClose}>
      <Stats stats={d.stats} />
      <div className="md-metabar">
        {d.meta.map((m, i) => <div key={i} className="md-metabar-row">{m}</div>)}
      </div>

      <SectionHead title="Динамика аудитории" />
      <Insight text={d.insight} />
      <div className="md-card"><MultiAxisChart {...d.series} /></div>

      <SectionHead title="Кампании с этой аудиторией" />
      <div className="md-card md-tbl-card">
        <table className="md-tbl">
          <thead><tr><th>Кампания</th><th>Channel</th><th className="r">Spend</th><th className="r">ROAS</th><th className="r">Conv.</th></tr></thead>
          <tbody>
            {d.campaigns.map((c, i) => (
              <tr key={i} onClick={() => onCampaign && onCampaign(c.name)}>
                <td>{c.name}</td>
                <td><ChDot ch={c.ch} /></td>
                <td className="r">{c.spend}</td>
                <td className="r"><strong>{c.roas}</strong></td>
                <td className="r">{c.conv}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <SectionHead title="Demographic breakdown" />
      <div className="md-card md-demo">
        {[{ key: 'age', lbl: 'Age' }, { key: 'gender', lbl: 'Gender' }, { key: 'region', lbl: 'Region' }].map((g) => (
          <div key={g.key} className="md-demo-col">
            <div className="md-demo-h">{g.lbl}</div>
            {d.demo[g.key].map((row, i) => (
              <div key={i} className="md-demo-row">
                <span className="md-demo-lbl">{row.lbl}</span>
                <div className="md-demo-bar-wrap"><div className="md-demo-bar" style={{ width: row.pct + '%' }}></div></div>
                <span className="md-demo-val">{row.pct}%</span>
              </div>
            ))}
          </div>
        ))}
        <div className="md-demo-tags">
          {d.demo.interests.map((t, i) => <span key={i} className="md-tag">{t}</span>)}
        </div>
      </div>

      <SectionHead title="Похожие аудитории" />
      <div className="md-card md-tbl-card">
        <table className="md-tbl">
          <thead><tr><th>Аудитория</th><th>Channel</th><th className="r">ROAS</th><th>Status</th></tr></thead>
          <tbody>
            {d.similar.map((s, i) => (
              <tr key={i}>
                <td>{s.name}</td>
                <td><ChDot ch={s.ch} /></td>
                <td className="r"><strong>{s.roas}</strong></td>
                <td><span className={`md-statusdot ${s.status}`}></span>{s.status}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="md-reco">
        <div className="md-reco-h">💡 {d.reco.title}</div>
        <div className="md-reco-body">{d.reco.body}</div>
      </div>
    </DrawerShell>
  );
}

/* -------- Drawer 4: Journey -------- */
function JourneyDrawer({ d, onClose }) {
  return (
    <DrawerShell d={d} onClose={onClose}>
      <Stats stats={d.stats} />

      <SectionHead title={d.anatomy.title} />
      <div className="md-anatomy">
        {d.anatomy.steps.map((s, i) => (
          <React.Fragment key={i}>
            <div className={`md-step ${s.done ? 'done' : ''}`}>
              <div className="md-step-day">{s.day}</div>
              <div className="md-step-ch"><ChDot ch={s.ch} /></div>
              <div className="md-step-action">{s.action}</div>
              <div className="md-step-count">{s.count}</div>
            </div>
            {i < d.anatomy.steps.length - 1 && <div className="md-step-arrow">↓</div>}
          </React.Fragment>
        ))}
      </div>

      <SectionHead title={d.gaps.title} />
      <div className="md-card md-gaps">
        {[d.gaps.a, d.gaps.b, d.gaps.c].map((row, i) => (
          <div key={i} className="md-gap-row">
            <div className="md-gap-lbl">{row.lbl}</div>
            <div className="md-gap-bars">
              {row.vals.map((v, j) => (
                <div key={j} className="md-gap-col">
                  <div className="md-gap-bar-wrap"><div className="md-gap-bar" style={{ height: (v / 50) * 100 + '%' }}></div></div>
                  <div className="md-gap-bin">{d.gaps.bins[j]}</div>
                  <div className="md-gap-pct">{v}%</div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <SectionHead title={d.cohort.title} />
      <div className="md-card md-empty">
        <div className="md-empty-icon">○</div>
        <div className="md-empty-text">{d.cohort.empty}</div>
      </div>

      <SectionHead title={d.cost.title} />
      <div className="md-card md-cost">
        {d.cost.rows.map((r, i) => (
          <div key={i} className={`md-cost-row ${r.strong ? 'strong' : ''} ${r.compare ? 'compare' : ''}`}>
            <div className="md-cost-lbl">{r.lbl}</div>
            <div className={`md-cost-val ${r.accent || ''}`}>
              {r.val}
              {r.compare === 'cheaper' && <span className="md-cost-badge pos">↓ дешевле</span>}
            </div>
          </div>
        ))}
      </div>
    </DrawerShell>
  );
}

/* -------- Shell with header / footer -------- */
function DrawerShell({ d, onClose, children }) {
  return (
    <div className="md-drawer">
      <div className="md-head">
        <div className="md-head-main">
          {d.ch && <span className="md-head-ch"><ChDot ch={d.ch} /></span>}
          <div className="md-head-title">{d.header}</div>
          <div className="md-head-path">{d.path.join(' › ')}</div>
          <div className="md-head-period">{d.period}</div>
        </div>
        <button className="md-close" onClick={onClose}>×</button>
      </div>

      <div className="md-body">
        {children}
      </div>

      <div className="md-actions">
        {d.actions.primary && (
          <button className="md-btn primary">
            {d.actions.primary.label}
            <span className="md-ext">↗</span>
          </button>
        )}
        {d.actions.secondary && (
          <button className="md-btn">{d.actions.secondary}</button>
        )}
        {d.actions.export && (
          <button className="md-btn ghost">{d.actions.export}</button>
        )}
      </div>
    </div>
  );
}

/* -------- Skeleton -------- */
function MktDrawerSkeleton({ onClose }) {
  return (
    <div className="md-drawer">
      <div className="md-head">
        <div className="md-head-main">
          <div className="sk" style={{ width: 80, height: 18, borderRadius: 10, marginBottom: 6 }}></div>
          <div className="sk" style={{ width: 200, height: 18, marginBottom: 6 }}></div>
          <div className="sk" style={{ width: 240, height: 12 }}></div>
        </div>
        <button className="md-close" onClick={onClose}>×</button>
      </div>
      <div className="md-body">
        <div className="md-stats">
          {[0, 1, 2].map((i) => (
            <div key={i} className="md-stat">
              <div className="sk" style={{ width: 50, height: 10, marginBottom: 8 }}></div>
              <div className="sk" style={{ width: 80, height: 22, marginBottom: 6 }}></div>
              <div className="sk" style={{ width: 60, height: 12 }}></div>
            </div>
          ))}
        </div>
        {[0, 1, 2].map((i) => (
          <React.Fragment key={i}>
            <div className="sk" style={{ width: 160, height: 12, margin: '20px 0 10px' }}></div>
            <div className="sk" style={{ width: '100%', height: 140, borderRadius: 10 }}></div>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

/* -------- Empty state for Placement (used as separate showcase) -------- */
function MktDrawerHost({ openKey, onClose, lang }) {
  const [stack, setStack] = React.useState([]); // ['channel'] | ['channel','campaign'] etc
  React.useEffect(() => {
    if (openKey) setStack([openKey]);
  }, [openKey]);

  if (!openKey || !stack.length) return null;
  const top = stack[stack.length - 1];
  const data = (window.MKT_DRAWERS[lang] || window.MKT_DRAWERS.ru)[top];
  if (!data) return null;

  const close = () => { setStack([]); onClose && onClose(); };
  // Drill: clicking a campaign inside Channel closes it then opens Campaign
  const goCampaign = () => setStack(['campaign']);
  const goAudience = () => setStack(['audience']);

  return (
    <>
      <div className="md-overlay" onClick={close}></div>
      {top === 'skeleton' ? (
        <MktDrawerSkeleton onClose={close} />
      ) : top === 'channel' ? (
        <ChannelDrawer d={data} onCampaign={goCampaign} onClose={close} />
      ) : top === 'campaign' ? (
        <CampaignDrawer d={data} onAudience={goAudience} onClose={close} />
      ) : top === 'audience' ? (
        <AudienceDrawer d={data} onCampaign={goCampaign} onClose={close} />
      ) : top === 'journey' ? (
        <JourneyDrawer d={data} onClose={close} />
      ) : null}
    </>
  );
}

window.MktDrawerHost = MktDrawerHost;