// Chat view with scripted dialog flow

const STEPS = {
  INTRO: 'intro',
  BRAND_FORM: 'brand_form',
  BRAND_DONE: 'brand_done',
  PLAN_PICK: 'plan_pick',
  PLAN_DONE: 'plan_done',
  MODE_PICK: 'mode_pick',
  MODE_DONE: 'mode_done',
  RESEARCHING: 'researching',
  SUBREDDIT_PICK: 'subreddit_pick',
  SUBREDDIT_DONE: 'subreddit_done',
  STAFF: 'staff',
  STAFF_DONE: 'staff_done',
  CALENDAR: 'calendar',
  CALENDAR_DONE: 'calendar_done',
  CONFIRM: 'confirm',
  ACTIVE: 'active',
};

function ChatView({ state, actions, campaignTab, setCampaignTab, openContentEditor, openStepModal }) {
  const scrollRef = React.useRef(null);
  const [draft, setDraft] = React.useState('');
  const [typing, setTyping] = React.useState(false);
  const [expandedSub, setExpandedSub] = React.useState(null);

  React.useEffect(() => {
    if (scrollRef.current) {
      setTimeout(() => { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, 50);
    }
  }, [state.messages.length, state.step, typing]);

  React.useEffect(() => {
    if (state.step === STEPS.RESEARCHING) {
      setTyping(true);
      const t = setTimeout(() => { setTyping(false); actions.finishResearching(); }, 2200);
      return () => clearTimeout(t);
    }
  }, [state.step]);

  const onSend = () => {
    if (!draft.trim()) return;
    actions.userMessage(draft.trim());
    setDraft('');
  };

  // Composer only available after brand submitted (so intro screen doesn't show it)
  const showComposer = state.step !== STEPS.INTRO && state.step !== STEPS.BRAND_FORM;
  const campaignActive = state.step === STEPS.ACTIVE;

  return (
    <div className="chat-surface">
      <div className="chat-header">
        <div className="title-wrap">
          <div className="title">{state.campaignName || 'New campaign'}</div>
          <div className="sub">{campaignActive ? 'Running · Day 1 of 30' : 'Draft · Setting up'}</div>
        </div>
        <div className="seg-control">
          <button data-active={campaignTab==='chat'} onClick={()=>setCampaignTab('chat')}><I.Chat /> Chat</button>
          <button data-active={campaignTab==='activity'} disabled={!campaignActive} onClick={()=>setCampaignTab('activity')}>Activity</button>
          <button data-active={campaignTab==='content'} disabled={!campaignActive} onClick={()=>setCampaignTab('content')}>Content</button>
        </div>
      </div>

      {campaignTab === 'chat' && (
        <>
          <div className="chat-scroll" ref={scrollRef}>
            <ChatMessages state={state} actions={actions} typing={typing} expandedSub={expandedSub} setExpandedSub={setExpandedSub} openContentEditor={openContentEditor} />
          </div>
          {showComposer && (
            <div className="composer-wrap">
              <div className="composer">
                <textarea rows={1}
                  placeholder={campaignActive ? "Ask about today's activity, or request a change…" : "Type a message, or use the controls above…"}
                  value={draft}
                  onChange={e => setDraft(e.target.value)}
                  onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); onSend(); } }} />
                <div className="composer-actions">
                  <div className="composer-hint">Kibie · ⌘K for shortcuts</div>
                  <button className="send-btn" disabled={!draft.trim()} onClick={onSend}><I.Send /></button>
                </div>
              </div>
            </div>
          )}
        </>
      )}
      {campaignTab === 'activity' && <ActivityView />}
      {campaignTab === 'content' && <ContentView openContentEditor={openContentEditor} />}
    </div>
  );
}

function AssistantBubble({ children, delay }) {
  return (
    <div className="msg assistant" data-delay={delay}>
      <div className="avatar-m">K</div>
      <div className="bubble">{children}</div>
    </div>
  );
}
function UserBubble({ children }) {
  return (
    <div className="msg user">
      <div className="bubble">{children}</div>
    </div>
  );
}

function ChatMessages({ state, actions, typing, expandedSub, setExpandedSub, openContentEditor }) {
  const s = state.step;
  return (
    <div className="chat-inner">
      {/* First message is ALWAYS the greeting (no hero CTA buttons) */}
      <AssistantBubble>
        <div>Welcome to Kibie. I'm your growth operator — I'll research, staff, and run full campaigns for your brand while you focus on the product.</div>
        <div style={{marginTop:10}}>Let's start with the basics. <strong>What's your brand?</strong></div>
      </AssistantBubble>

      {(s === STEPS.INTRO || s === STEPS.BRAND_FORM) && (
        <div className="msg" style={{animation:'fadeIn 0.4s 0.3s both'}}>
          <div className="avatar-m" style={{visibility:'hidden'}}>K</div>
          <div className="bubble" style={{padding:0, flex:1, maxWidth:'100%'}}>
            <BrandForm onSubmit={actions.submitBrand} initial={state.brand} />
          </div>
        </div>
      )}

      {[STEPS.BRAND_DONE, STEPS.PLAN_PICK, STEPS.PLAN_DONE, STEPS.MODE_PICK, STEPS.MODE_DONE,
        STEPS.RESEARCHING, STEPS.SUBREDDIT_PICK, STEPS.SUBREDDIT_DONE, STEPS.STAFF, STEPS.STAFF_DONE,
        STEPS.CALENDAR, STEPS.CALENDAR_DONE, STEPS.CONFIRM, STEPS.ACTIVE].includes(s) && (
        <>
          <UserBubble>
            <div><strong>{state.brand.name}</strong> — {state.brand.url}</div>
            <div style={{marginTop:4}} className="muted small">{state.brand.industry}</div>
            <div style={{marginTop:6}}>{state.brand.desc}</div>
          </UserBubble>
          <AssistantBubble>
            <div>Got it. I pulled <strong>{state.brand.name}</strong>'s site and built an initial asset library — logo, palette, 6 images and 2 videos. See the <em>Brand assets</em> panel on the right.</div>
            <div style={{marginTop:10}}>Now let's pick what I'll run for you. <strong>Which growth channels?</strong> Pick one or both.</div>
            <div style={{marginTop:14}}>
              <PlanPicker value={state.plans} onChange={actions.setPlans} />
              {state.plans?.length > 0 && s === STEPS.PLAN_PICK && (
                <button className="btn accent" style={{marginTop:14}} onClick={actions.confirmPlans}>
                  Continue with {state.plans.length} plan{state.plans.length>1?'s':''} <I.Arrow />
                </button>
              )}
            </div>
          </AssistantBubble>
        </>
      )}

      {[STEPS.PLAN_DONE, STEPS.MODE_PICK, STEPS.MODE_DONE, STEPS.RESEARCHING, STEPS.SUBREDDIT_PICK,
        STEPS.SUBREDDIT_DONE, STEPS.STAFF, STEPS.STAFF_DONE, STEPS.CALENDAR, STEPS.CALENDAR_DONE,
        STEPS.CONFIRM, STEPS.ACTIVE].includes(s) && (
        <>
          <UserBubble>{state.plans.map(id => PLANS.find(p=>p.id===id)?.name).join(' + ')}</UserBubble>
          <AssistantBubble>
            <div>Locked in. <strong>How much should I check in with you?</strong> You can tune this per-action later.</div>
            <div style={{marginTop:12}}>
              <ControlModePicker value={state.mode} onChange={actions.setMode} />
              {state.mode && s === STEPS.MODE_PICK && (
                <button className="btn accent" style={{marginTop:12}} onClick={actions.confirmMode}>
                  Use {CONTROL_MODES.find(m=>m.id===state.mode).name} <I.Arrow />
                </button>
              )}
            </div>
          </AssistantBubble>
        </>
      )}

      {[STEPS.MODE_DONE, STEPS.RESEARCHING, STEPS.SUBREDDIT_PICK, STEPS.SUBREDDIT_DONE, STEPS.STAFF,
        STEPS.STAFF_DONE, STEPS.CALENDAR, STEPS.CALENDAR_DONE, STEPS.CONFIRM, STEPS.ACTIVE].includes(s) && (
        <>
          <UserBubble>{CONTROL_MODES.find(m=>m.id===state.mode).name}</UserBubble>
          {s === STEPS.MODE_DONE && (
            <AssistantBubble>
              <div>Perfect — I have everything I need. I'll build your 30-day plan in four passes: <strong>targets → staff → calendar → content</strong>.</div>
              <button className="btn accent" style={{marginTop:10}} onClick={actions.startResearch}>
                Generate my campaign plan <I.Arrow />
              </button>
            </AssistantBubble>
          )}
        </>
      )}

      {s === STEPS.RESEARCHING && typing && (
        <AssistantBubble>
          <div className="muted">Scanning 240 subreddits against your ICP…</div>
          <div className="dots"><span/><span/><span/></div>
        </AssistantBubble>
      )}

      {[STEPS.SUBREDDIT_PICK, STEPS.SUBREDDIT_DONE, STEPS.STAFF, STEPS.STAFF_DONE, STEPS.CALENDAR,
        STEPS.CALENDAR_DONE, STEPS.CONFIRM, STEPS.ACTIVE].includes(s) && (
        <AssistantBubble>
          <div><strong>Pass 1 — Targets.</strong> I've pre-selected all <strong>7 subreddits</strong> I'd run against. Click any card to see the fit-score breakdown. Uncheck ones you want to skip (keep at least 5).</div>
          <div className="sub-list" style={{marginTop:12}}>
            {SUBREDDITS.map(sub => (
              <SubredditCard key={sub.name} sub={sub}
                selected={state.selectedSubs.includes(sub.name)}
                expanded={expandedSub === sub.name}
                onExpand={() => setExpandedSub(expandedSub === sub.name ? null : sub.name)}
                onToggle={() => actions.toggleSub(sub.name)} />
            ))}
          </div>
          <div style={{marginTop:10, padding:'10px 12px', background:'var(--bg-sunken)', border:'1px dashed var(--border-strong)', borderRadius:'var(--radius-sm)', fontSize:12.5, display:'flex', gap:8, alignItems:'center'}}>
            <I.Plus />
            <span>Want to try another subreddit? <button className="btn ghost sm" style={{padding:'2px 6px'}}>Analyze a specific r/…</button></span>
          </div>
          {s === STEPS.SUBREDDIT_PICK && (
            <button className="btn accent" style={{marginTop:12}}
              disabled={state.selectedSubs.length < 5}
              onClick={actions.confirmSubs}>
              Lock {state.selectedSubs.length} subreddits <I.Arrow />
              {state.selectedSubs.length < 5 && <span className="tiny" style={{marginLeft:6, opacity:0.8}}>(min 5)</span>}
            </button>
          )}
        </AssistantBubble>
      )}

      {[STEPS.STAFF, STEPS.STAFF_DONE, STEPS.CALENDAR, STEPS.CALENDAR_DONE, STEPS.CONFIRM, STEPS.ACTIVE].includes(s) && (
        <AssistantBubble>
          <div><strong>Pass 2 — Staff.</strong> Based on your Reddit plan I'm running <strong>6 operator accounts</strong>. They're in a 7-day warm-up phase — light, authentic activity before anything brand-adjacent.</div>
          <div style={{marginTop:12}}>
            <StaffBlock linkCount={state.linkedAccounts} onToggleLink={actions.toggleLinkedAccount} />
          </div>
          {s === STEPS.STAFF && (
            <button className="btn accent" style={{marginTop:14}} onClick={actions.confirmStaff}>
              Approve staff & continue <I.Arrow />
            </button>
          )}
        </AssistantBubble>
      )}

      {[STEPS.CALENDAR, STEPS.CALENDAR_DONE, STEPS.CONFIRM, STEPS.ACTIVE].includes(s) && (
        <AssistantBubble>
          <div><strong>Pass 3 — Calendar & content.</strong> Here's the 30-day plan. Warm-up runs days 1–7, launch push 8–14, sustain through day 30.</div>
          <div style={{marginTop:12}}>
            <CalendarAndContent onEditContent={openContentEditor} onEditCalendar={() => {}} />
          </div>
          {s === STEPS.CALENDAR && (
            <button className="btn accent" style={{marginTop:14}} onClick={actions.confirmCalendar}>
              Looks good — continue <I.Arrow />
            </button>
          )}
        </AssistantBubble>
      )}

      {[STEPS.CONFIRM, STEPS.ACTIVE].includes(s) && (
        <AssistantBubble>
          <div><strong>Ready to launch.</strong> Final summary:</div>
          <div className="msg-block" style={{marginTop:10}}>
            <div className="stack-sm">
              <Row label="Channels" value={state.plans.map(p => PLANS.find(x=>x.id===p).name).join(', ')} />
              <Row label="Budget" value={state.plans.map(p => PLANS.find(x=>x.id===p).price).join(' + ')} />
              <Row label="Control" value={CONTROL_MODES.find(m=>m.id===state.mode).name} />
              <Row label="Targets" value={`${state.selectedSubs.length} subreddits`} />
              <Row label="Staff" value={`6 operators (${state.linkedAccounts} of yours + ${6-state.linkedAccounts} fresh)`} />
              <Row label="Duration" value="30 days, starting today" />
            </div>
          </div>
          {s === STEPS.CONFIRM && (
            <div style={{display:'flex', gap:8, marginTop:12}}>
              <button className="btn accent lg" onClick={actions.launch}>Confirm & launch campaign</button>
              <button className="btn outline">Edit something</button>
            </div>
          )}
        </AssistantBubble>
      )}

      {s === STEPS.ACTIVE && (
        <>
          <UserBubble>Launch it</UserBubble>
          <AssistantBubble>
            <div>🎉 <strong>Campaign live.</strong> Warm-up sequence started across all 6 operators. First organic comment lands around 9am tomorrow.</div>
          </AssistantBubble>

          {/* Alert banner — suspension risk */}
          <div style={{animation:'fadeIn 0.4s 0.2s both'}}>
            <div className="alert-banner" data-sev="warn">
              <I.Warn className="al-icon" />
              <div className="al-body">
                <div className="al-title">u/foldernauts triggered r/Entrepreneur's mod auto-filter</div>
                <div>Account was held on its very first comment. Historical data: holding 48h and re-posting with a more personal hook recovers in 78% of cases.</div>
                <div className="al-actions">
                  <button className="btn sm">Hold 48h &amp; retry</button>
                  <button className="btn sm">Swap to different subreddit</button>
                  <button className="btn sm">Review thread</button>
                </div>
              </div>
            </div>
          </div>

          {/* Daily report */}
          <AssistantBubble>
            <div style={{marginBottom:6}}>Here's your <strong>daily report</strong> for today — I'll drop one every morning at 9am. You can change the delivery time in Campaign settings.</div>
            <div className="daily-report">
              <div className="dr-head">
                <div className="dr-title">Daily report · Day 1</div>
                <div className="dr-date">APR 17 · WARM-UP</div>
              </div>
              <div className="dr-kpis">
                <div className="dr-kpi"><div className="v">5</div><div className="k">actions</div></div>
                <div className="dr-kpi"><div className="v">114</div><div className="k">upvotes</div></div>
                <div className="dr-kpi"><div className="v">38</div><div className="k">comments</div></div>
                <div className="dr-kpi"><div className="v">12</div><div className="k">profile views</div></div>
              </div>
              <ul className="dr-list">
                <li>u/markdown_mike posted a warm-up note in r/NoteTaking — trending with 47 upvotes in 2h.</li>
                <li>u/quiet_jules organically replied to 3 threads in r/productivity. 1 drew a DM request.</li>
                <li>u/notetaker_rn answered a "quick capture" question — 22 upvotes, 5 replies.</li>
                <li>u/foldernauts held by mod filter in r/Entrepreneur (see alert above).</li>
                <li>u/wip_thoughts still warming (day 6/7) — eligible to post starting tomorrow.</li>
              </ul>
              <div style={{marginTop:12, display:'flex', gap:6}}>
                <button className="btn outline sm">View full report</button>
                <button className="btn ghost sm">Edit delivery time</button>
              </div>
            </div>
          </AssistantBubble>

          <AssistantBubble>
            <div>Switch to the <strong>Activity</strong> tab to watch actions as they happen, or <strong>Content</strong> to review drafts before they ship. I'll check in with you again tomorrow 9am.</div>
          </AssistantBubble>
        </>
      )}
    </div>
  );
}

function Row({ label, value }) {
  return (
    <div style={{display:'flex', gap:16, fontSize:13}}>
      <div style={{minWidth:90, color:'var(--fg-subtle)', fontSize:11.5, textTransform:'uppercase', letterSpacing:'0.04em', paddingTop:2}}>{label}</div>
      <div style={{flex:1}}>{value}</div>
    </div>
  );
}

function ActivityView() {
  return (
    <div style={{flex:1, overflowY:'auto', padding:'8px 0'}}>
      <div className="activity-day">
        <div className="day-head">
          <div>
            <div className="day-title">Today · Day 1 of 30</div>
            <div className="tiny subtle">Warm-up phase</div>
          </div>
          <div className="day-stats">
            <span>5 actions</span><span>114 upvotes</span><span>38 comments</span>
          </div>
        </div>
        {ACTIVITY.map((a, i) => (
          <div key={i} className="activity-item">
            <div className="dot-col">
              <div className="dot" style={{background: a.action==='flagged' ? 'var(--warn)' : 'var(--accent)'}} />
              <div className="line" />
            </div>
            <div className="content">
              <div className="who">
                <span>{a.who}</span>
                <span className="action-tag">{a.action}</span>
                <span className="muted">in {a.where}</span>
                <span style={{flex:1}} />
                <span className="time">{a.time}</span>
              </div>
              <div className="body">{a.body}</div>
              {a.stats && (
                <div className="stats">
                  {Object.entries(a.stats).map(([k,v]) => <span key={k}>↑ {v} {k}</span>)}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
      <div className="activity-day" style={{opacity:0.5}}>
        <div className="day-head">
          <div>
            <div className="day-title">Tomorrow · Day 2 of 30</div>
            <div className="tiny subtle">Scheduled — 4 actions planned</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ContentView({ openContentEditor }) {
  return (
    <div style={{flex:1, overflowY:'auto'}}>
      <div style={{padding:'16px 20px 4px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div className="inline-seg">
          <button data-active={true}>All ({CONTENT_THEMES.length})</button>
          <button>Drafts</button>
          <button>Scheduled</button>
          <button>Published</button>
        </div>
        <button className="btn outline sm"><I.Plus /> New draft</button>
      </div>
      <div className="content-list">
        {CONTENT_THEMES.map((c, i) => {
          const statusMap = {
            published: { color: 'var(--success)', bg: 'var(--success-soft)', label: 'Published' },
            scheduled: { color: 'var(--accent-fg)', bg: 'var(--accent-soft)', label: 'Scheduled' },
            draft: { color: 'var(--fg-muted)', bg: 'var(--bg-sunken)', label: 'Draft' },
          }[c.status];
          return (
            <div key={i} className="content-card">
              <div className="c-head">
                <div className="c-sub">
                  <span className="mono tiny">Day {c.day}</span>
                  <span>·</span><span>{c.sub}</span><span>·</span><span>{c.author}</span>
                </div>
                <span style={{padding:'3px 9px', borderRadius:999, fontSize:11, fontWeight:500, background:statusMap.bg, color:statusMap.color}}>
                  {statusMap.label}
                </span>
              </div>
              <div className="c-title">{c.title}</div>
              {c.preview && <div className="c-body">{c.preview}</div>}

              {/* Reference thread */}
              <div className="ref-thread">
                <div className="rt-ico"><I.Reddit /></div>
                <div style={{flex:1}}>
                  <div className="rt-title">Reference thread: "{c.sub} · Weekly what-are-you-using"</div>
                  <div className="rt-meta">12 upvotes · 34 comments · posted 4d ago · 87% sentiment match</div>
                  <div className="rt-link">reddit.com{c.sub}/comments/1abc2/weekly_what_are_you_using</div>
                </div>
              </div>

              {c.engagement && (
                <div style={{display:'flex', gap:14, fontSize:11.5, color:'var(--fg-subtle)', fontFamily:'var(--font-mono)'}}>
                  <span>↑ {c.engagement.up} upvotes</span>
                  <span>💬 {c.engagement.comments} comments</span>
                  <span>→ {c.engagement.clicks} clicks</span>
                </div>
              )}
              <div className="c-foot">
                <span>{c.status === 'published' ? 'Live on Reddit' : c.status === 'scheduled' ? 'Ships in 2 days at 8:30 AM PT' : 'Agent will finalize 24h before scheduled time'}</span>
                <div className="c-actions">
                  <button className="btn ghost sm"><I.Eye /> Preview</button>
                  {c.status !== 'published' && <button className="btn outline sm" onClick={() => openContentEditor(i)}><I.Edit /> Edit</button>}
                </div>
              </div>
              {c.status !== 'published' && (
                <div style={{padding:'8px 10px', background:'var(--warn-soft)', borderRadius:8, fontSize:11.5, color:'oklch(0.4 0.08 75)', display:'flex', gap:6, alignItems:'flex-start'}}>
                  <I.Warn style={{flexShrink:0, marginTop:2}} />
                  <span>Heads up: edits to voice/length may reduce this post's fit score for {c.sub}. I'll re-score on save.</span>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { ChatView, STEPS });