// shell.jsx — Sri Sri Plywoods BI shell

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: 'meta',     label: 'Meta Ads', icon: 'Layers' },
    { id: 'google',   label: 'Google Ads', icon: 'Google' },
    { id: 'creative', label: 'Creative', icon: 'Funnel' },
  ];
  return (
    <aside className="sb">
      <div className="sb-brand">
        <div className="sb-logo">श</div>
        <div>
          <div className="sb-name">Sri Sri Plywoods</div>
          <div className="sb-sub">BI 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>
    </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: '90d', label: 'Last 90 days' },
    { 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 = SriSriData.RAW_META ? SriSriData.RAW_META() : null;
  const minDate = meta?.minDate || '';
  const maxDate = meta?.maxDate || '';
  const apply = () => {
    if (!draftStart || !draftEnd || 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 Topbar({ tab, range, setRange, customStart, customEnd, ctx }) {
  const TITLES = {
    overview: { t: 'Overview',     s: 'Combined performance — Meta Lead Gen + Google Local Store Visits' },
    meta:     { t: 'Meta Ads',     s: 'Facebook & Instagram lead gen · Advantage+ included' },
    google:   { t: 'Google Ads',   s: 'PMax local store visits + Brand & Generic Search' },
    creative: { t: 'Creative',     s: 'Ad-level Meta performance with thumbnails' },
  };
  const cur = TITLES[tab];
  const b = SriSriData.rangeBounds(range, customStart, customEnd);
  return (
    <div className="tb">
      <div className="tb-left">
        <div>
          <div className="tb-crumb">Sri Sri Plywoods · Dashboards · {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" onClick={() => location.reload()}><Icons.Refresh size={14}/></div>
        <DateRange range={range} customStart={customStart} customEnd={customEnd} onChange={setRange}/>
      </div>
    </div>
  );
}

function TabBar({ granularity, setGranularity }) {
  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 }}>View</span>
        <GranularityToggle value={granularity} onChange={setGranularity}/>
      </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>
  );
}

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