// shell.jsx — Sidebar, Topbar, Tabs (Event Plus, single-account, Meta only)

const { useState, useRef, useEffect } = React;

function fmtShort(d) {
  const M = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  return `${d.getUTCDate()} ${M[d.getUTCMonth()]} ${String(d.getUTCFullYear()).slice(-2)}`;
}

function Sidebar({ active, onChange }) {
  const items = [
    { id: 'overview',  label: 'Overview',     icon: 'Home' },
    { id: 'campaigns', label: 'Campaigns',    icon: 'Layers' },
    { id: 'creatives', label: 'Creatives',    icon: 'Image' },
    { id: 'audience',  label: 'Audience',     icon: 'Users' },
  ];
  return (
    <aside className="sb">
      <div className="sb-brand">
        <div className="sb-logo">E+</div>
        <div>
          <div className="sb-name">Event Plus</div>
          <div className="sb-sub">Meta Cockpit</div>
        </div>
      </div>
      <div className="sb-section">Reports</div>
      <div className="sb-items">
        {items.map(it => {
          const I = Icons[it.icon];
          return (
            <div key={it.id} className={`sb-item ${active === it.id ? 'active' : ''}`} onClick={() => onChange(it.id)}>
              <span className="sb-icon"><I size={16}/></span>
              {it.label}
            </div>
          );
        })}
      </div>
      <div style={{ flex: 1 }}/>
      <div style={{ padding: '12px 14px', fontSize: 10.5, color: 'var(--ink-4)', borderTop: '1px solid var(--border)' }}>
        {EPData.RAW_META() && (
          <>
            <div>Account: <b style={{ color: 'var(--ink-3)' }}>act_68436406</b></div>
            <div style={{ marginTop: 2 }}>Updated: {EPData.RAW_META().updated.slice(0,10)}</div>
          </>
        )}
      </div>
    </aside>
  );
}

function DateRange({ range, customStart, customEnd, onChange }) {
  const [open, setOpen] = useState(false);
  const [showCustom, setShowCustom] = useState(false);
  const [draftStart, setDraftStart] = useState(customStart || '');
  const [draftEnd, setDraftEnd] = useState(customEnd || '');
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) { setOpen(false); setShowCustom(false); } };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, [open]);
  useEffect(() => { setDraftStart(customStart || ''); setDraftEnd(customEnd || ''); }, [customStart, customEnd]);

  const opts = [
    { id: '7d',  label: 'Last 7 days' },
    { id: '14d', label: 'Last 14 days' },
    { id: '30d', label: 'Last 30 days' },
    { id: '90d', label: 'Last 90 days' },
    { id: 'mtd', label: 'Month to date' },
    { id: 'all', label: 'All time' },
  ];
  const fmt = (iso) => {
    if (!iso) return '';
    const [y,m,d] = iso.split('-');
    return `${parseInt(d,10)}/${parseInt(m,10)}/${y.slice(-2)}`;
  };
  const label = range === 'custom' && customStart && customEnd
    ? `${fmt(customStart)} – ${fmt(customEnd)}`
    : (opts.find(o => o.id === range) || { label: 'Custom' }).label;
  const meta = EPData.RAW_META ? EPData.RAW_META() : null;
  const minDate = meta?.minDate || '';
  const maxDate = meta?.maxDate || '';
  const apply = () => {
    if (!draftStart || !draftEnd) return;
    if (draftStart > draftEnd) return;
    onChange('custom', draftStart, draftEnd);
    setOpen(false); setShowCustom(false);
  };
  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <div className="btn" onClick={() => { setOpen(!open); setShowCustom(false); }}>
        <Icons.Calendar size={14}/>
        {label}
        <Icons.Chevron size={13}/>
      </div>
      {open && !showCustom && (
        <div className="pop">
          <div className="pop-label">Quick ranges</div>
          {opts.map(o => (
            <div key={o.id} className={`pop-item ${o.id === range ? 'active' : ''}`} onClick={() => { onChange(o.id); setOpen(false); }}>
              {o.label}
              {o.id === range && <Icons.Check size={14}/>}
            </div>
          ))}
          <div className="pop-divider"/>
          <div className={`pop-item ${range === 'custom' ? 'active' : ''}`} onClick={() => setShowCustom(true)}>
            Custom range… <Icons.ChevronRight size={13}/>
          </div>
        </div>
      )}
      {open && showCustom && (
        <div className="pop" style={{ minWidth: 240, padding: 12 }}>
          <div className="pop-label" style={{ marginBottom: 8 }}>Custom range</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <label style={{ fontSize: 11, color: 'var(--ink-3)' }}>From
              <input type="date" value={draftStart} min={minDate} max={maxDate}
                     onChange={(e) => setDraftStart(e.target.value)}
                     style={{ display: 'block', marginTop: 4, width: '100%', padding: '6px 8px', background: 'var(--surface-2)', color: 'var(--ink)', border: '1px solid var(--border)', borderRadius: 6, fontSize: 12 }}/>
            </label>
            <label style={{ fontSize: 11, color: 'var(--ink-3)' }}>To
              <input type="date" value={draftEnd} min={minDate} max={maxDate}
                     onChange={(e) => setDraftEnd(e.target.value)}
                     style={{ display: 'block', marginTop: 4, width: '100%', padding: '6px 8px', background: 'var(--surface-2)', color: 'var(--ink)', border: '1px solid var(--border)', borderRadius: 6, fontSize: 12 }}/>
            </label>
            <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>Available: {minDate} → {maxDate}</div>
            <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
              <button className="btn" style={{ flex: 1, justifyContent: 'center' }} onClick={() => setShowCustom(false)}>Back</button>
              <button className="btn" style={{ flex: 1, justifyContent: 'center', background: 'var(--accent)', color: '#fff', border: 'none' }} onClick={apply}>Apply</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function GranularityToggle({ value, onChange }) {
  const opts = [
    { id: 'daily', label: 'Daily' },
    { id: 'weekly', label: 'Weekly' },
    { id: 'monthly', label: 'Monthly' },
  ];
  return (
    <div className="seg">
      {opts.map(o => (
        <div key={o.id} className={`seg-item ${value === o.id ? 'active' : ''}`} onClick={() => onChange(o.id)}>{o.label}</div>
      ))}
    </div>
  );
}

function AIBanner({ insights, accent = 'var(--accent)' }) {
  const [expanded, setExpanded] = useState(false);
  const main = insights[0];
  return (
    <div className="ai-banner">
      <div className="ai-icon"><Icons.Sparkle size={16}/></div>
      <div className="ai-content">
        <div className="ai-title row"><span>AI Insight</span><span className="ai-pulse"/></div>
        <div className="ai-text" dangerouslySetInnerHTML={{ __html: main }}/>
        {expanded && insights.slice(1).map((t, i) => (
          <div key={i} className="ai-text" style={{ marginTop: 8, paddingTop: 8, borderTop: '1px solid rgba(91,91,240,0.12)' }} dangerouslySetInnerHTML={{ __html: t }}/>
        ))}
      </div>
      <div className="ai-actions">
        {insights.length > 1 && (
          <div className="btn btn-ghost" onClick={() => setExpanded(!expanded)} style={{ color: 'var(--accent)' }}>
            {expanded ? 'Collapse' : `+${insights.length - 1} more`}
            {expanded ? <Icons.ChevronUp size={13}/> : <Icons.Chevron size={13}/>}
          </div>
        )}
        <div className="btn btn-ghost btn-icon" title="Dismiss"><Icons.Close size={14}/></div>
      </div>
    </div>
  );
}

function Topbar({ tab, range, setRange, customStart, customEnd, granularity, setGranularity, ctx }) {
  const TITLES = {
    overview:  { t: 'Overview',  s: 'Account-level Meta performance · spend, leads, CPL trend' },
    campaigns: { t: 'Campaigns', s: 'Campaign-level performance and lead delivery' },
    creatives: { t: 'Creatives', s: 'Ad-level breakdown — Wedding & Corporate creatives' },
    audience:  { t: 'Audience',  s: 'Location · demographics · device · placement (all-time snapshot)' },
  };
  const cur = TITLES[tab];
  const meta = EPData.RAW_META();
  return (
    <>
      <div className="tb">
        <div className="tb-left">
          <div>
            <div className="tb-crumb">Event Plus · Meta · {meta && (() => { const b = EPData.rangeBounds(range, undefined, customStart, customEnd); return `${fmtShort(b.start)}–${fmtShort(b.end)}`; })()}</div>
            <div className="tb-title">{cur.t}</div>
          </div>
        </div>
        <div className="tb-right">
          <div className="btn btn-ghost btn-icon" title="Refresh"><Icons.Refresh size={14}/></div>
          <DateRange range={range} customStart={customStart} customEnd={customEnd} onChange={setRange}/>
        </div>
      </div>
    </>
  );
}

function TabBar({ tab, granularity, setGranularity, compare, setCompare }) {
  const showGran = tab !== 'creatives' && tab !== 'audience';
  return (
    <div className="tabs">
      <div className="spacer"/>
      <div className="row" style={{ paddingRight: 0, gap: 8 }}>
        <span style={{ fontSize: 11, color: 'var(--ink-4)', fontWeight: 500 }}>Compare</span>
        <div className="seg">
          <div className={`seg-item ${compare === 'prev' ? 'active' : ''}`} onClick={() => setCompare('prev')}>Previous</div>
          <div className={`seg-item ${compare === 'none' ? 'active' : ''}`} onClick={() => setCompare('none')}>Off</div>
        </div>
        {showGran && (
          <>
            <span style={{ fontSize: 11, color: 'var(--ink-4)', fontWeight: 500, marginLeft: 8 }}>View</span>
            <GranularityToggle value={granularity} onChange={setGranularity}/>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, TabBar, AIBanner, DateRange, GranularityToggle });