// Step modals & content edit modal

function Modal({ title, subtitle, onClose, children, footer }) {
  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="m-title">{title}</div>
            {subtitle && <div className="m-sub">{subtitle}</div>}
          </div>
          <button className="close-btn" onClick={onClose}><I.X /></button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </div>
  );
}

function SubredditsStepModal({ state, actions, onClose }) {
  return (
    <Modal title="Edit target subreddits" subtitle={`${state.selectedSubs.length} selected · min 5`} onClose={onClose}
      footer={<>
        <button className="btn outline" onClick={onClose}>Cancel</button>
        <button className="btn accent" onClick={onClose} disabled={state.selectedSubs.length < 5}>Save changes</button>
      </>}>
      <div className="stack-sm">
        {SUBREDDITS.map(sub => {
          const selected = state.selectedSubs.includes(sub.name);
          return (
            <div key={sub.name} className="sub-card" data-selected={selected}
              onClick={() => actions.toggleSub(sub.name)}
              style={{cursor:'pointer'}}>
              <div className="sub-head">
                <div style={{display:'flex', gap:12, alignItems:'center'}}>
                  <FitRing score={sub.score} tier={sub.tier} />
                  <div>
                    <div className="sub-name"><span>{sub.name}</span><span className="sub-size">{sub.size}</span></div>
                    <div className="tiny subtle" style={{marginTop:2}}>{sub.desc.slice(0, 70)}…</div>
                  </div>
                </div>
                <div className="check-box" data-selected={selected} style={{width:20, height:20, background: selected?'var(--accent)':'', borderColor: selected?'var(--accent)':'', color:'white'}}>
                  {selected && <I.Check />}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </Modal>
  );
}

function StaffStepModal({ state, actions, onClose }) {
  return (
    <Modal title="Edit operator staff" subtitle="6 operators · Reddit plan"
      onClose={onClose}
      footer={<>
        <button className="btn outline" onClick={onClose}>Cancel</button>
        <button className="btn accent" onClick={onClose}>Save</button>
      </>}>
      <StaffBlock linkCount={state.linkedAccounts} onToggleLink={actions.toggleLinkedAccount} />
    </Modal>
  );
}

function CalendarStepModal({ onClose }) {
  return (
    <Modal title="Edit 30-day calendar" subtitle="Shift, skip, or add actions"
      onClose={onClose}
      footer={<>
        <button className="btn outline" onClick={onClose}>Cancel</button>
        <button className="btn accent" onClick={onClose}>Save</button>
      </>}>
      <div className="cal-timeline" style={{padding:0}}>
        {[
          { day: 1, phase: 'warm-up', events: [
            { type: 'browse', who: 'All 6 operators', body: 'Browse & upvote 8-12 threads each across target subs', time: '09:00–11:00' },
            { type: 'comment', who: 'u/quiet_jules', body: 'Organic comment on r/productivity weekly thread', time: '14:00' },
          ]},
          { day: 2, phase: 'warm-up', events: [
            { type: 'comment', who: 'u/notetaker_rn', body: 'Reply to r/NoteTaking question — no link', time: '10:30' },
          ]},
          { day: 5, phase: 'warm-up', events: [
            { type: 'post', who: 'u/markdown_mike', body: 'Personal workflow post in r/productivity', time: '08:30' },
            { type: 'reply', who: 'u/markdown_mike', body: 'Active reply window (2h after post)', time: '08:45–11:00' },
          ]},
          { day: 8, phase: 'launch', events: [
            { type: 'post', who: 'u/foldernauts', body: 'Show & tell post in r/NoteTaking', time: '09:00' },
          ]},
        ].map((d, i) => (
          <div key={i} className="cal-tl-day">
            <div className="cal-tl-label">
              <span className="day-n">Day {d.day}</span>
              {d.phase}
            </div>
            <div className="cal-tl-events">
              {d.events.map((e, j) => (
                <div key={j} className="cal-tl-event" data-type={e.type}>
                  <span className="ev-dot" />
                  <div className="ev-body">
                    <div style={{display:'flex', gap:8, alignItems:'center', flexWrap:'wrap'}}>
                      <span className="ev-type">{e.type}</span>
                      <span className="ev-who">{e.who}</span>
                    </div>
                    <div style={{marginTop:3}}>{e.body}</div>
                  </div>
                  <span className="ev-time">{e.time}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </Modal>
  );
}

function BudgetStepModal({ state, actions, onClose }) {
  const [plans, setPlans] = React.useState(state.plans);
  const [mode, setMode] = React.useState(state.mode);
  return (
    <Modal title="Edit budget & control" subtitle="Change channels or control mode"
      onClose={onClose}
      footer={<>
        <button className="btn outline" onClick={onClose}>Cancel</button>
        <button className="btn accent" onClick={onClose}>Save</button>
      </>}>
      <div className="tiny subtle" style={{textTransform:'uppercase', letterSpacing:'0.04em', marginBottom:8}}>Channels</div>
      <PlanPicker value={plans} onChange={setPlans} />
      <div className="tiny subtle" style={{textTransform:'uppercase', letterSpacing:'0.04em', margin:'20px 0 8px'}}>Control mode</div>
      <ControlModePicker value={mode} onChange={setMode} />
    </Modal>
  );
}

function ContentEditModal({ index, onClose, onSave }) {
  const c = CONTENT_THEMES[index];
  const [body, setBody] = React.useState(c?.preview || `Around month 3 of consulting I noticed I had the same idea 4 times across 4 tabs. Here's the workflow that finally stuck, and the scratchpad I built after realizing Notion was overkill for 80% of what I wrote.\n\nThe core insight: I didn't need a second brain. I needed a 30-second capture tool.`);
  const [title, setTitle] = React.useState(c?.title || '');
  if (!c) return null;
  return (
    <Modal
      title="Edit content"
      subtitle={`${c.sub} · Day ${c.day} · ${c.author}`}
      onClose={onClose}
      footer={<>
        <button className="btn outline" onClick={onClose}>Discard</button>
        <button className="btn accent" onClick={() => { onSave(); onClose(); }}><I.Check style={{width:14, height:14}} /> Save & re-score</button>
      </>}>
      <div className="stack-sm">
        <div>
          <div className="tiny subtle" style={{textTransform:'uppercase', letterSpacing:'0.04em', marginBottom:4}}>Post title</div>
          <input value={title} onChange={e => setTitle(e.target.value)} style={{width:'100%', padding:'10px 12px', border:'1px solid var(--border)', borderRadius:'var(--radius-sm)', fontSize:14, fontFamily:'inherit', outline:'none'}} />
        </div>
        <div>
          <div className="tiny subtle" style={{textTransform:'uppercase', letterSpacing:'0.04em', marginBottom:4}}>Body</div>
          <textarea value={body} onChange={e => setBody(e.target.value)} rows={8} style={{width:'100%', padding:'10px 12px', border:'1px solid var(--border)', borderRadius:'var(--radius-sm)', fontSize:13, fontFamily:'inherit', outline:'none', resize:'vertical'}} />
        </div>
        <div className="ref-thread">
          <div className="rt-ico"><I.Reddit /></div>
          <div style={{flex:1}}>
            <div className="rt-title">Reference thread · grounds this post's angle</div>
            <div className="rt-meta">{c.sub} "Weekly what are you using" · 87% sentiment match · 34 comments</div>
            <div className="rt-link">reddit.com{c.sub}/comments/1abc2/weekly_what_are_you_using</div>
          </div>
          <button className="btn ghost sm">Change</button>
        </div>
        <div className="alert-banner" data-sev="warn">
          <I.Warn className="al-icon" />
          <div className="al-body">
            <div className="al-title">Editing this post may lower its fit score</div>
            <div>I'll re-run the community-fit model on save. Current score: <strong>{c.sub === 'r/NoteTaking' ? '91' : '82'}/100</strong>. Posts below 70 auto-convert to drafts for review.</div>
          </div>
        </div>
      </div>
    </Modal>
  );
}

function Toast({ toast, onDismiss }) {
  const Icon = I[toast.icon || 'Warn'];
  return (
    <div className="toast" data-sev={toast.sev}>
      <div className="t-icon"><Icon /></div>
      <div className="t-body">
        <div className="t-title">{toast.title}</div>
        <div className="muted small">{toast.body}</div>
      </div>
      <span className="t-close" onClick={onDismiss}><I.X /></span>
    </div>
  );
}

Object.assign(window, { Modal, SubredditsStepModal, StaffStepModal, CalendarStepModal, BudgetStepModal, ContentEditModal, Toast });