// Interactive cards rendered inline in chat

const INDUSTRIES = [
  'Productivity · Note-taking',
  'SaaS · Developer tools',
  'AI · ML tools',
  'DTC · Consumer brand',
  'Health & wellness',
  'Fintech',
  'Education · EdTech',
  'E-commerce',
  'Creator tools',
  'Marketplace',
  'Other',
];

function BrandForm({ onSubmit, initial }) {
  const [name, setName] = React.useState(initial?.name || '');
  const [url, setUrl] = React.useState(initial?.url || '');
  const [industry, setIndustry] = React.useState(initial?.industry || '');
  const [desc, setDesc] = React.useState(initial?.desc || '');
  const ready = name && url && industry && desc;
  return (
    <div className="inline-form-wide">
      <div className="form-row">
        <label>Brand name</label>
        <input value={name} onChange={e => setName(e.target.value)} placeholder="e.g. Loomly" autoFocus />
      </div>
      <div className="form-row">
        <label>Website</label>
        <input value={url} onChange={e => setUrl(e.target.value)} placeholder="loomly.app" />
      </div>
      <div className="form-row">
        <label>Industry</label>
        <select value={industry} onChange={e => setIndustry(e.target.value)}>
          <option value="">Select an industry…</option>
          {INDUSTRIES.map(i => <option key={i} value={i}>{i}</option>)}
        </select>
      </div>
      <div className="form-row">
        <label>Primary region</label>
        <select defaultValue="us">
          <option value="us">United States</option>
          <option value="eu">Europe</option>
          <option value="apac">Asia-Pacific</option>
          <option value="global">Global</option>
        </select>
      </div>
      <div className="form-row full">
        <label>One-line brand description</label>
        <textarea rows={3} value={desc} onChange={e => setDesc(e.target.value)}
          placeholder="Who it's for and what it does in 1–2 sentences." />
      </div>
      <div className="form-row full" style={{flexDirection:'row', justifyContent:'flex-end', alignItems:'center', gap:10}}>
        <span className="tiny subtle">We'll scrape public pages only. Private data stays local.</span>
        <button className="btn accent" disabled={!ready}
          onClick={() => onSubmit({ name, url, industry, desc })}>
          Share with Kibie <I.Arrow />
        </button>
      </div>
    </div>
  );
}

function PlanPicker({ value, onChange }) {
  return (
    <div className="plan-grid-v2">
      {PLANS.map(p => {
        const Icon = I[p.icon];
        const selected = value?.includes(p.id);
        return (
          <div key={p.id} className="plan-card-v2" data-selected={selected || undefined}
            onClick={() => {
              const next = selected ? value.filter(x => x !== p.id) : [...(value||[]), p.id];
              onChange(next);
            }}>
            <div className="plan-banner">
              <div className="plan-banner-icon"><Icon /></div>
              <div>
                <div className="plan-banner-title">{p.name}</div>
                <div className="tiny subtle" style={{marginTop:1}}>{p.tag}</div>
              </div>
              <div className="plan-banner-check">{selected && <I.Check />}</div>
            </div>
            <div className="plan-body-v2">
              <div className="plan-section-label">What's included</div>
              <ul className="plan-features">
                {p.features.map((f, i) => <li key={i}>{f}</li>)}
              </ul>
              <div className="plan-outcome-v2">
                <I.Spark /> {p.outcome}
              </div>
            </div>
            <div className="plan-foot">
              <div>
                <div className="price-big">{p.price}</div>
                <div className="price-note">{p.priceNote}</div>
              </div>
              <button className="btn sm" style={{
                background: selected ? 'var(--accent)' : 'var(--fg)',
                color: 'white',
                pointerEvents: 'none'
              }}>
                {selected ? 'Selected' : 'Select plan'}
              </button>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function ControlModePicker({ value, onChange }) {
  return (
    <div className="mode-stack">
      {CONTROL_MODES.map(m => (
        <div key={m.id} className="mode-card" data-selected={value === m.id}
          onClick={() => onChange(m.id)}>
          <div className="mode-radio" />
          <div style={{flex:1}}>
            <div className="mode-name">{m.name}
              {m.recommended && <span style={{marginLeft:8, fontSize:10.5, padding:'2px 7px', borderRadius:999, background:'var(--accent-soft)', color:'var(--accent-fg)', fontWeight:500}}>RECOMMENDED</span>}
            </div>
            <div className="mode-desc">{m.desc}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function FitRing({ score, tier }) {
  const color = tier === 'high' ? 'var(--success)' : tier === 'med' ? 'var(--warn)' : 'var(--danger)';
  const pct = score;
  const C = 2 * Math.PI * 15;
  return (
    <div className="fit-score-ring">
      <svg width="36" height="36" viewBox="0 0 36 36">
        <circle cx="18" cy="18" r="15" fill="none" stroke="var(--border)" strokeWidth="2.5" />
        <circle cx="18" cy="18" r="15" fill="none" stroke={color} strokeWidth="2.5"
          strokeDasharray={`${C * pct / 100} ${C}`} strokeLinecap="round" />
      </svg>
      <span className="val">{score}</span>
    </div>
  );
}

function SubredditCard({ sub, selected, onToggle, expanded, onExpand }) {
  return (
    <div className="sub-card expandable" data-selected={selected}>
      <div className="sub-head" onClick={onExpand} style={{cursor:'pointer'}}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <FitRing score={sub.score} tier={sub.tier} />
          <div>
            <div className="sub-name">
              <span>{sub.name}</span>
              <span className="sub-size">{sub.size} members</span>
            </div>
            <div className="tiny subtle" style={{marginTop:2}}>
              {sub.tier === 'high' ? 'Strong fit' : sub.tier === 'med' ? 'Moderate fit' : 'Weak fit'} · {sub.cases} past case{sub.cases !== 1 ? 's' : ''}
            </div>
          </div>
        </div>
        <div style={{display:'flex', gap:8, alignItems:'center'}}>
          <button className="btn sm" onClick={(e) => { e.stopPropagation(); onToggle(); }}
            style={{
              background: selected ? 'var(--accent)' : 'transparent',
              color: selected ? 'white' : 'var(--fg)',
              border: '1px solid ' + (selected ? 'var(--accent)' : 'var(--border-strong)')
            }}>
            {selected ? <><I.Check />Selected</> : 'Select'}
          </button>
          <I.Arrow style={{transform: expanded ? 'rotate(90deg)' : 'rotate(0)', transition:'transform 0.2s', color:'var(--fg-subtle)'}} />
        </div>
      </div>
      {expanded && (
        <>
          <div className="sub-desc">{sub.desc}</div>
          <div className="sub-meta-row">
            {sub.chips.map((c, i) => <span key={i} className="sub-chip">{c}</span>)}
            <span className="sub-chip"><I.Spark /> {sub.cases} past wins</span>
          </div>
          <div className="radar-pop">
            <Radar dims={sub.dims} size={200} />
            <div className="radar-dims">
              {sub.dims.map((d, i) => (
                <div key={i} className="radar-dim">
                  <span style={{minWidth: 95}}>{d[0]}</span>
                  <div className="bar"><span style={{ width: d[1] + '%' }} /></div>
                  <span className="val">{d[1]}</span>
                </div>
              ))}
            </div>
          </div>
        </>
      )}
    </div>
  );
}

function StaffBlock({ linkCount, onToggleLink }) {
  return (
    <div>
      <div className="staff-grid">
        {STAFF.map((s, i) => {
          const linked = i < linkCount;
          const letter = s.handle.replace('u/', '').charAt(0).toUpperCase();
          return (
            <div key={i} className="staff-card">
              <Avatar label={letter} hue={s.hue} size={42} />
              <div className="staff-name">{s.handle}</div>
              <div className="staff-role">{s.role}</div>
              <div className="staff-status" data-linked={linked || undefined}>
                {linked ? 'Linked · live' : `Warming · day ${s.days}/7`}
              </div>
            </div>
          );
        })}
      </div>

      <div className="link-account-card">
        <div className="link-account-head">
          <div className="ico"><I.Paperclip /></div>
          <div style={{flex:1}}>
            <div className="title">Or host your own Reddit account</div>
            <div className="sub">
              Existing accounts with karma and history usually hit 2–3x higher acceptance than fresh ones. You'll install a small browser extension so we act through your session — no password stored.
            </div>
          </div>
        </div>
        <div className="link-account-warn">
          <I.Warn />
          <div>
            <strong>Risk of suspension.</strong> Reddit may flag any account engaged in automated activity, including yours. We throttle aggressively, but we can't guarantee zero risk.
          </div>
        </div>
        <div className="link-account-foot">
          <div className="status">
            {linkCount > 0
              ? <><span style={{width:6, height:6, borderRadius:'50%', background:'var(--success)'}} /> 1 account linked: u/foldernauts</>
              : <><span style={{width:6, height:6, borderRadius:'50%', background:'var(--fg-subtle)'}} /> Using 6 fresh accounts</>}
          </div>
          <button className="btn outline sm" onClick={onToggleLink}>
            {linkCount > 0 ? 'Unlink account' : 'Link my Reddit account'}
          </button>
        </div>
      </div>
    </div>
  );
}

// Calendar & content — segmented tabs
function CalendarAndContent({ onEditContent, onEditCalendar }) {
  const [tab, setTab] = React.useState('calendar');
  return (
    <div>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10}}>
        <div className="inline-seg">
          <button data-active={tab==='calendar'} onClick={()=>setTab('calendar')}><I.Calendar /> Calendar</button>
          <button data-active={tab==='content'} onClick={()=>setTab('content')}><I.Edit /> Content ({CONTENT_THEMES.length})</button>
        </div>
        <button className="btn ghost sm" onClick={tab === 'calendar' ? onEditCalendar : null}>
          <I.Edit /> Edit {tab}
        </button>
      </div>

      {tab === 'calendar' && (
        <div className="slide-in">
          <div className="cal-wrap">
            <div className="cal-head">
              {['M','T','W','T','F','S','S'].map((d,i)=><div key={i}>{d}</div>)}
            </div>
            <div className="cal-body">
              {CALENDAR.map(d => (
                <div key={d.day} className="cal-day" data-phase={d.phase}>
                  <span>{d.day}</span>
                  {d.posts > 0 && <span className="cal-count">{d.posts}</span>}
                </div>
              ))}
              {Array.from({length: 5}, (_,i)=><div key={'pad'+i} className="cal-day" style={{opacity:0.4}} />)}
            </div>
          </div>
          <div className="cal-legend">
            <span><i style={{background:'oklch(0.97 0.02 75)'}} /> Warm-up (days 1–7)</span>
            <span><i style={{background:'oklch(0.96 0.04 45)'}} /> Launch push (8–14)</span>
            <span><i style={{background:'oklch(0.96 0.03 60)'}} /> Sustain (15–30)</span>
          </div>
        </div>
      )}

      {tab === 'content' && (
        <div className="slide-in stack-sm">
          {CONTENT_THEMES.slice(0,5).map((c, i) => (
            <div key={i} className="cal-tl-event" data-type="post" style={{padding:'12px 14px'}}>
              <span className="ev-dot" />
              <div className="ev-body">
                <div style={{display:'flex', gap:8, alignItems:'center', flexWrap:'wrap'}}>
                  <span className="ev-type">{c.status}</span>
                  <span className="mono subtle tiny">Day {c.day} · {c.sub}</span>
                  <span className="mono subtle tiny">{c.author}</span>
                </div>
                <div style={{marginTop:4, fontWeight:500, fontSize:13}}>{c.title}</div>
              </div>
              <button className="btn ghost sm" onClick={() => onEditContent(i)}><I.Edit /> Edit</button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { BrandForm, PlanPicker, ControlModePicker, SubredditCard, StaffBlock, CalendarAndContent, FitRing });