// shell.jsx — Thrsty BI shell: Sidebar, Topbar, Tabs, Date Range, Campaign filter

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" style={{ background: 'linear-gradient(135deg,#FF7A45,#F03E3E)' }}>T</div>
        <div>
          <div className="sb-name">Thrsty</div>
          <div className="sb-sub">Meta Ads Cockpit</div>
        </div>
      </div>
      <div className="sb-section">Reports</div>
      <div className="sb-items">
        {items.map(it => {
          const I = Icons[it.icon] || Icons.Layers;
          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>
    </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: '30d', label: 'Last 30 days' },
    { id: '60d', label: 'Last 60 days' },
    { id: 'ytd', label: 'Since Mar 1' },
  ];
  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 = ThrstyData.RAW_META ? ThrstyData.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 CampaignFilter({ value, onChange }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, [open]);
  const campaigns = ThrstyData.listCampaigns();
  const label = value === 'all' ? 'All campaigns' : value;
  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <div className="btn" onClick={() => setOpen(!open)} title={label}>
        <Icons.Layers size={14}/>
        <span style={{ maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
        <Icons.Chevron size={13}/>
      </div>
      {open && (
        <div className="pop" style={{ minWidth: 260 }}>
          <div className={`pop-item ${value === 'all' ? 'active' : ''}`} onClick={() => { onChange('all'); setOpen(false); }}>
            All campaigns
            {value === 'all' && <Icons.Check size={14}/>}
          </div>
          <div className="pop-divider"/>
          {campaigns.map(c => (
            <div key={c} className={`pop-item ${value === c ? 'active' : ''}`} onClick={() => { onChange(c); setOpen(false); }}>
              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c}</span>
              {value === c && <Icons.Check size={14}/>}
            </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 }) {
  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>
    </div>
  );
}

function Topbar({ tab, range, setRange, customStart, customEnd, campaign, setCampaign, ctx }) {
  const TITLES = {
    overview:  { t: 'Overview',  s: `Meta Ads performance · ${ThrstyData.RAW_META()?.adAccount || ''}` },
    campaigns: { t: 'Campaigns', s: 'Campaign-level performance and trend' },
    creatives: { t: 'Creatives', s: 'Ad-level creative performance · lifetime' },
    audience:  { t: 'Audience',  s: 'Demographics + location breakdown · lifetime snapshot' },
  };
  const cur = TITLES[tab] || { t: tab, s: '' };
  const b = ThrstyData.rangeBounds(range, undefined, customStart, customEnd);
  return (
    <div className="tb">
      <div className="tb-left">
        <div>
          <div className="tb-crumb">Thrsty · Meta Ads · {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>
        <CampaignFilter value={campaign} onChange={setCampaign}/>
        <DateRange range={range} customStart={customStart} customEnd={customEnd} onChange={setRange}/>
      </div>
    </div>
  );
}

function TabBar({ tab, granularity, setGranularity, compare, setCompare }) {
  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>
        {tab !== 'creatives' && tab !== 'audience' && (
          <>
            <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, CampaignFilter, GranularityToggle });