// All modal overlays for the prototype.

const { useState: useStateM, useEffect: useEffectM } = React;

const Modal = ({ title, sub, onClose, children, footer, wide }) => {
  useEffectM(() => {
    const k = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', k);
    return () => document.removeEventListener('keydown', k);
  }, []);
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={ wide ? { maxWidth: 920 } : null }>
        <div className="modal-hd">
          <h3>{title}</h3>
          {sub && <span className="sub">{sub}</span>}
          <button className="x" onClick={onClose}><Icon name="x" size={16}/></button>
        </div>
        <div className="modal-bd">{children}</div>
        {footer && <div className="modal-ft">{footer}</div>}
      </div>
    </div>
  );
};

// ──────────────────────────────────────────────────────────────────────────────
// Reasoning trail expanded

const TrailModal = ({ onClose }) => {
  const D = window.OMNI_DATA;
  const [showDax, setShowDax] = useStateM(false);
  const totalMs = D.DEMO_TRAIL.reduce((s, t) => s + t.ms, 0);
  const totalTok = D.DEMO_TRAIL.reduce((s, t) => s + t.tokens, 0);

  return (
    <Modal
      title="Reasoning trail"
      sub={`Routed to MyDashboard · ${D.DEMO_TRAIL.length} steps · ${(totalMs/1000).toFixed(1)}s · ${fmtInt(totalTok)} tokens`}
      onClose={onClose}
      footer={
        <>
          <button className={'btn' + (showDax ? ' primary' : '')} onClick={() => setShowDax(v => !v)}>
            <Icon name="dax" size={12} style={{ marginRight: 6, verticalAlign:'-2px' }}/>
            {showDax ? 'Hide DAX' : 'Show DAX'}
          </button>
          <div style={{ flex: 1 }}/>
          <span style={{ fontSize: 12, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>
            $0.0144 · 2 LLM calls
          </span>
          <button className="btn primary" onClick={onClose}>Got it</button>
        </>
      }>
      <div className="trail-list">
        {D.DEMO_TRAIL.map((s, i) => (
          <div className="trail-step" key={i}>
            <div className="num">{String(i+1).padStart(2, '0')}</div>
            <div className="body">
              <div className="tool">{s.tool}</div>
              <div className="detail">{s.detail}</div>
              <div className="meta">{s.ms}ms · {s.tokens.toLocaleString()} tokens</div>
              {showDax && s.dax && <pre>{s.dax}</pre>}
            </div>
          </div>
        ))}
      </div>
    </Modal>
  );
};

// ──────────────────────────────────────────────────────────────────────────────
// Data sources picker

const SourcesModal = ({ active, onToggle, onClose, autoRoute, setAutoRoute }) => {
  const D = window.OMNI_DATA;
  return (
    <Modal
      title="Data sources"
      sub="8 connected · default is auto-route"
      onClose={onClose}
      footer={
        <>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <div className={'switch' + (autoRoute ? ' on' : '')} onClick={() => setAutoRoute(!autoRoute)}/>
            <span style={{ fontSize: 13, color: 'var(--ink-2)' }}>Auto-route based on question</span>
          </div>
          <div style={{ flex:1 }}/>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn primary" onClick={onClose}>Apply</button>
        </>
      }>
      <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 12 }}>
        Pick the dashboards OmniBuddy is allowed to query. Power users can pin specific sources;
        analysts working across domains should usually leave auto-route on.
      </div>
      <div className="src-pick-grid">
        {D.AGENTS.map(a => {
          const on = active.includes(a.id);
          return (
            <div key={a.id} className={'src-pick' + (on ? ' on' : '')} onClick={() => onToggle(a.id)}>
              <div className="glyph" style={{ background: a.tint }}>{a.icon}</div>
              <div className="info">
                <div className="name">{a.name}</div>
                <div className="desc">{a.desc}</div>
              </div>
              <div className="tog">{on && <Icon name="check" size={12}/>}</div>
            </div>
          );
        })}
      </div>
    </Modal>
  );
};

// ──────────────────────────────────────────────────────────────────────────────
// Saved questions

const SavedModal = ({ onClose, onSchedule }) => {
  const D = window.OMNI_DATA;
  return (
    <Modal title="Saved questions" sub="Reusable + scheduled" onClose={onClose}
      footer={<>
        <button className="btn">Manage permissions</button>
        <div style={{ flex:1 }}/>
        <button className="btn primary" onClick={onSchedule}><Icon name="schedule" size={12} style={{verticalAlign:'-2px', marginRight:6}}/>Schedule new</button>
      </>}>
      <div>
        {D.SAVED_QUESTIONS.map(q => {
          const A = D.AGENTS.find(a => a.id === q.agent);
          return (
            <div className="saved-row" key={q.id}>
              <div className="glyph" style={{ background: A.tint }}>{A.icon}</div>
              <div className="info">
                <div className="ttl">{q.title}</div>
                <div className="meta">
                  <span className="schedule">{q.schedule}</span>
                  &nbsp;·&nbsp;last run {q.last} &nbsp;·&nbsp; sent to {q.recipients} {q.recipients === 1 ? 'person' : 'people'}
                </div>
              </div>
              <button className="btn">Run now</button>
              <button className="btn">Edit</button>
            </div>
          );
        })}
      </div>
    </Modal>
  );
};

// ──────────────────────────────────────────────────────────────────────────────
// Schedule modal

const ScheduleModal = ({ onClose, defaultQ }) => {
  const [q,  setQ ] = useStateM(defaultQ || 'FY27 secured sales — Americas, exact figures');
  const [freq, setFreq] = useStateM('weekly');
  const [day,  setDay ] = useStateM('Monday');
  const [time, setTime] = useStateM('08:00');
  const [emails, setEmails] = useStateM('priya.k@omniactive.com, exec-team@omniactive.com');

  const field = { display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 };
  const lbl   = { fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--muted-2)', fontWeight: 600 };
  const input = { padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 10, background: 'transparent',
    color: 'var(--ink)', font: '13.5px var(--font-sans)', outline: 'none' };

  return (
    <Modal title="Schedule a question" sub="Auto-runs and emails the answer" onClose={onClose}
      footer={<>
        <button className="btn" onClick={onClose}>Cancel</button>
        <div style={{ flex:1 }}/>
        <button className="btn primary" onClick={onClose}>
          <Icon name="schedule" size={12} style={{verticalAlign:'-2px', marginRight:6}}/>
          Save schedule
        </button>
      </>}>

      <div style={field}>
        <span style={lbl}>Question</span>
        <textarea style={{ ...input, minHeight: 64, resize:'vertical', fontFamily:'var(--font-sans)' }}
                  value={q} onChange={e => setQ(e.target.value)}/>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 12 }}>
        <div style={field}>
          <span style={lbl}>Frequency</span>
          <select style={input} value={freq} onChange={e => setFreq(e.target.value)}>
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
            <option value="custom">Custom (cron)</option>
          </select>
        </div>
        <div style={field}>
          <span style={lbl}>{freq === 'weekly' ? 'Day' : freq === 'monthly' ? 'Day of month' : 'Every day'}</span>
          <select style={input} value={day} onChange={e => setDay(e.target.value)} disabled={freq === 'daily'}>
            {['Monday','Tuesday','Wednesday','Thursday','Friday'].map(d => <option key={d}>{d}</option>)}
          </select>
        </div>
        <div style={field}>
          <span style={lbl}>Time (IST)</span>
          <input style={input} type="time" value={time} onChange={e => setTime(e.target.value)}/>
        </div>
      </div>

      <div style={field}>
        <span style={lbl}>Send to (comma-separated emails)</span>
        <input style={input} value={emails} onChange={e => setEmails(e.target.value)}/>
      </div>

      <div style={field}>
        <span style={lbl}>Delivery format</span>
        <div style={{ display:'flex', gap: 6 }}>
          {['Inline summary', 'Excel attachment', 'PowerPoint', 'PDF report'].map((o, i) => (
            <button key={o} className={'chip' + (i === 0 ? ' on' : '')}
                    style={ i === 0 ? { background:'var(--ink)', color:'var(--paper)', borderColor:'var(--ink)' } : null }>
              {o}
            </button>
          ))}
        </div>
      </div>

      <div style={{
        padding: 12, background: 'var(--verified-bg)',
        border: '1px solid color-mix(in oklab, var(--verified) 25%, transparent)',
        borderRadius: 10, fontSize: 12.5, color: 'var(--verified)' }}>
        <Icon name="schedule" size={12} style={{ verticalAlign:'-2px', marginRight: 6 }}/>
        Next run: <b>{freq === 'daily' ? 'tomorrow' : day}</b> at <b>{time} IST</b> · using cached MyDashboard model
      </div>
    </Modal>
  );
};

// ──────────────────────────────────────────────────────────────────────────────
// Compare across dashboards (multi-agent answer)

const CompareModal = ({ onClose }) => {
  const D = window.OMNI_DATA;
  return (
    <Modal title="Cross-dashboard answer" sub="3 agents synthesized" onClose={onClose} wide
      footer={<>
        <button className="btn"><Icon name="download" size={12} style={{verticalAlign:'-2px', marginRight:6}}/>Export combined</button>
        <div style={{ flex:1 }}/>
        <button className="btn primary" onClick={onClose}>Done</button>
      </>}>

      <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55, marginBottom: 16 }}>
        <b>Q: </b>Compare FY27 Americas sales vs inventory levels vs OTIF performance.
      </div>

      <div className="compare-grid">
        {D.COMPARE_PANELS.map((p, i) => {
          const A = D.AGENTS.find(a => a.id === p.agent);
          const down = p.delta.startsWith('−');
          return (
            <div key={i} className="cmp-panel">
              <div className="agent-chip">
                <span className="glyph" style={{ background: A.tint }}>{A.icon}</span>
                <span className="name">{A.name}</span>
              </div>
              <div className="head">{p.headline}</div>
              <div className="sub">{p.sub}</div>
              <div className={'delta' + (down ? ' down' : '')}>{p.delta}</div>
              <div className="note">{p.note}</div>
            </div>
          );
        })}
      </div>

      <div style={{ padding: 16, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10, fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55 }}>
        <div style={{ fontFamily:'var(--font-serif)', fontSize: 18, marginBottom: 6, color:'var(--ink)' }}>Synthesis</div>
        Americas is <b>tracking 12.4% ahead of FY26</b> on secured sales, but inventory
        coverage is <b>3.1 weeks heavy</b> against plan — three SKUs are doing most of the damage.
        OTIF dipped <b>1.8 pts</b> in the Chicago lane after the carrier swap; if you can resolve that,
        the inventory overhang largely resolves itself in Q3.
      </div>

      <div className="drill-row" style={{ marginTop: 14 }}>
        <span className="lbl">Drill into</span>
        <button className="chip">The 3 overhang SKUs <span className="arr">→</span></button>
        <button className="chip">Chicago lane shipments <span className="arr">→</span></button>
        <button className="chip">By customer <span className="arr">→</span></button>
      </div>
    </Modal>
  );
};

// ──────────────────────────────────────────────────────────────────────────────
// Settings / admin (with legacy kill switch)

const SettingsModal = ({ onClose, tweaks, setTweak }) => {
  const [legacy, setLegacy] = useStateM(false);
  const [verbose, setVerbose] = useStateM(false);

  const Row = ({ title, sub, on, set, danger }) => (
    <div className="set-row">
      <div className="info">{title}<small>{sub}</small></div>
      <div className={'switch' + (on ? ' on' : '') + (danger ? ' danger' : '')} onClick={() => set(!on)}/>
    </div>
  );

  return (
    <Modal title="Settings" sub="Display + admin" onClose={onClose}
      footer={<>
        <span style={{ fontSize: 12, color: 'var(--muted)' }}>
          v2.4.1 · API: <span style={{ color: 'var(--verified)', fontFamily:'var(--font-mono)' }}>healthy</span>
        </span>
        <div style={{ flex:1 }}/>
        <button className="btn primary" onClick={onClose}>Done</button>
      </>}>

      <div className="set-section">
        <h4>Default response density</h4>
        <p>What shows on every answer by default. You can always toggle individual pieces per response.</p>
        <Row title="Auto-generated charts" sub="Render a chart above numeric tables"
             on={tweaks.showChart} set={(v) => setTweak('showChart', v)}/>
        <Row title="Data table" sub="Show full table; toggle off for chart-only answers"
             on={tweaks.showTable} set={(v) => setTweak('showTable', v)}/>
        <Row title="Citation chips" sub="Show RAG sources when documents were pulled"
             on={tweaks.showCitations} set={(v) => setTweak('showCitations', v)}/>
        <Row title="Drill-down suggestions" sub='"Drill into: By Region / Customer / …"'
             on={tweaks.showDrills} set={(v) => setTweak('showDrills', v)}/>
        <Row title="Cost + iteration counter" sub="Calls, tokens, latency, $ per response"
             on={tweaks.showCost} set={(v) => setTweak('showCost', v)}/>
        <Row title="Honesty banners" sub="Warn when data is partial, dataset doesn't cover the ask, etc."
             on={tweaks.showHonesty} set={(v) => setTweak('showHonesty', v)}/>
      </div>

      <div className="set-section">
        <h4>Engineering</h4>
        <p>For debugging and rollbacks. Not visible to most users.</p>
        <Row title="Verbose trace" sub="Stream every tool call to the UI as it happens"
             on={verbose} set={setVerbose}/>
        <Row title="Use legacy planner" sub="Reverts to the pre-agent ASK pipeline. USE_LEGACY_ASK=1"
             on={legacy} set={setLegacy} danger/>
      </div>

      <div className="set-section">
        <h4>Account</h4>
        <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
          <div style={{ width: 40, height: 40, borderRadius: 99, background: 'linear-gradient(135deg, var(--accent), var(--accent-2))' }}/>
          <div>
            <div style={{ fontSize: 14, color: 'var(--ink)', fontWeight: 500 }}>Priya Kothari</div>
            <div style={{ fontSize: 12, color: 'var(--muted)' }}>priya.k@omniactive.com · Executive persona</div>
          </div>
          <div style={{ flex:1 }}/>
          <button className="btn">Switch persona</button>
        </div>
      </div>
    </Modal>
  );
};

Object.assign(window, { Modal, TrailModal, SourcesModal, SavedModal, ScheduleModal, CompareModal, SettingsModal });