// Mobile companion view — for when Michelle is on the train.
// Stripped to: today / burst-into-focus / quick capture.
// 4 priorities collapsed, energy check, big "start burst" CTA.

function Mobile() {
  const { state, setEnergy, startBurst, addBrainItem, toggleTask } = useStore();
  const [tab, setTab] = React.useState('today');
  const [capture, setCapture] = React.useState('');

  const energies = [
    { id: 'spent',  label: 'Spent'  },
    { id: 'steady', label: 'Steady' },
    { id: 'strong', label: 'Strong' },
    { id: 'wired',  label: 'Wired'  },
  ];

  const submit = () => {
    if (!capture.trim()) return;
    addBrainItem(capture.trim(), 'dump');
    setCapture('');
  };

  // pick first incomplete task across priorities for the big CTA
  let nextPriority = null, nextTask = null;
  for (const p of state.priorities) {
    if (nextTask) break;
    for (const t of p.tasks) {
      if (!t.done) { nextTask = t; nextPriority = p; break; }
    }
  }

  return (
    <div className="mc-app mc-m">
      <div className="mc-m-hd">
        <div className="mc-avatar avatar">{state.user.initials}</div>
        <div className="who">
          <div className="name">Hi, Michelle.</div>
          <div className="meta">Week {state.week} · day 2 of 5</div>
        </div>
        <a href="rituals.html" className="mc-m-rituals" title="Rituals">
          <span className="flame"/>
        </a>
        <Icons.Settings size={20} style={{ color: 'var(--fg-3)' }}/>
      </div>

      <div className="mc-m-body">
        {tab === 'today' && (
          <>
            <div className="mc-m-energy">
              <span>Energy</span>
              {energies.map((e) => (
                <button key={e.id}
                  className={`pill ${state.energy === e.id ? 'active' : ''}`}
                  onClick={() => setEnergy(e.id)}>
                  {e.label}
                </button>
              ))}
            </div>

            {nextTask && (
              <div className="mc-m-burst-cta" onClick={() => startBurst(nextPriority.id, nextTask.id, state.burst.length)}>
                <div>
                  <div style={{ fontSize: 11, opacity: 0.85, fontFamily: 'var(--font-mono)',
                    textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>
                    Next ⚡ burst
                  </div>
                  <div className="l">{nextTask.label}</div>
                  <div className="s">From: {nextPriority.title}</div>
                </div>
                <div className="ico"><Icons.Play size={16}/></div>
              </div>
            )}

            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div className="mc-eyebrow" style={{ padding: '4px 4px 0' }}>This week — 4 priorities</div>
              {state.priorities.slice(0, 4).map((p, i) => {
                const done = p.tasks.filter((t) => t.done).length;
                const pct  = p.tasks.length ? Math.round(done / p.tasks.length * 100) : 0;
                return (
                  <div key={p.id} className="mc-m-prio">
                    <div className="row1">
                      <div className="num">{i + 1}</div>
                      <div className="ttl">{p.title}</div>
                    </div>
                    <div className="row2">
                      <span className="bar"><i style={{ width: `${pct}%` }}/></span>
                      <span>{done}/{p.tasks.length} · {pct}%</span>
                    </div>
                  </div>
                );
              })}
            </div>

            <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
              <div className="mc-card" style={{ flex: 1, padding: '12px 14px', gap: 4 }}>
                <div className="mc-eyebrow">Money in</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900,
                  fontSize: 22, letterSpacing: '-0.02em', color: 'var(--ink-900)' }}>
                  {state.money.currency}{state.money.inMonth.toLocaleString()}
                </div>
                <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>this month</div>
              </div>
              <div className="mc-card" style={{ flex: 1, padding: '12px 14px', gap: 4 }}>
                <div className="mc-eyebrow">Admin queue</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900,
                  fontSize: 22, letterSpacing: '-0.02em', color: 'var(--danger)' }}>
                  {state.admin.length}
                </div>
                <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{state.admin.filter((a) => a.sev === 'crit').length} critical</div>
              </div>
            </div>
          </>
        )}

        {tab === 'capture' && (
          <>
            <div className="mc-eyebrow" style={{ padding: '4px 4px 0' }}>Brain zips</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <textarea
                value={capture}
                onChange={(e) => setCapture(e.target.value)}
                placeholder="One thought. Don't overthink. It'll show up on your desktop tomorrow."
                style={{
                  fontFamily: 'inherit', fontSize: 15, padding: '14px 14px',
                  border: '1px solid var(--border)', borderRadius: 'var(--radius-md)',
                  background: 'var(--bg-elev)', resize: 'none', minHeight: 120,
                  outline: 'none', color: 'var(--fg)',
                }}
              />
              <button
                onClick={submit}
                style={{
                  appearance: 'none', border: 0, cursor: 'pointer',
                  background: 'var(--grad-brand)', color: '#fff',
                  borderRadius: 'var(--radius-md)', padding: '12px 16px',
                  fontFamily: 'inherit', fontWeight: 700, fontSize: 14,
                  boxShadow: 'var(--shadow-brand)',
                }}>
                Capture
              </button>
            </div>

            <div style={{ marginTop: 8 }}>
              <div className="mc-eyebrow" style={{ padding: '4px 4px 8px' }}>Recent zips</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {state.braindump.filter((b) => !b.done).slice(0, 6).map((b) => (
                  <div key={b.id}
                       style={{
                         display: 'flex', alignItems: 'center', gap: 10,
                         padding: '10px 12px', borderRadius: 'var(--radius-md)',
                         borderLeft: b.flagged ? '3px solid var(--danger)' : '3px solid transparent',
                         background: b.kind === 'idea'
                           ? 'linear-gradient(135deg, color-mix(in oklch, var(--magenta-50) 60%, var(--bg-elev)) 0%, var(--bg-elev) 100%)'
                           : 'var(--bg-elev)',
                         border: '1px solid var(--border)',
                         fontSize: 13, color: 'var(--fg-1)',
                       }}>
                    <span style={{ color: b.kind === 'idea' ? 'var(--magenta-500)' : 'var(--fg-3)', flexShrink: 0 }}>
                      {b.kind === 'idea' ? <Icons.Lightbulb size={14}/> : <Icons.Brain size={14}/>}
                    </span>
                    <span style={{ flex: 1, minWidth: 0, fontWeight: b.flagged ? 600 : 400 }}>
                      {b.text}
                    </span>
                    {b.flagged && <Icons.Bang size={14} style={{ color: 'var(--danger)', flexShrink: 0 }}/>}
                  </div>
                ))}
              </div>
            </div>
          </>
        )}

        {tab === 'admin' && (
          <>
            <div className="mc-eyebrow" style={{ padding: '4px 4px 0' }}>Admin auto-pilot</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {state.admin.slice(0, 6).map((a) => {
                const meta = { 'invoice-overdue': 'Invoice overdue', 'invoice-send': 'Invoices to send',
                  'vat': 'VAT filing', 'expenses': 'Expenses', 'contract': 'Contract',
                  'subscriptions': 'Subscriptions', 'inbox': 'Email inbox', 'tax-q3': 'Q3 income tax' }[a.kind] || a.kind;
                return (
                  <div key={a.id} className={`mc-admin-item ${a.sev}`} style={{ padding: '12px 14px' }}>
                    <span className="pill"/>
                    <div className="top">
                      <span>{meta}</span>
                      <span className="when">{a.when}</span>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                      <div className="count" style={{ fontSize: 20 }}>{a.count}</div>
                      <div className="what">{a.who}</div>
                    </div>
                    <div className="do">{a.do} →</div>
                  </div>
                );
              })}
            </div>
          </>
        )}

        {tab === 'wins' && (
          <>
            <div className="mc-eyebrow" style={{ padding: '4px 4px 0' }}>Recent wins</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {state.wins.slice(0, 8).map((w) => (
                <div key={w.id} className="mc-card mc-win" style={{ padding: '12px 14px', gridTemplateColumns: '20px 1fr auto' }}>
                  <span className="check"><Icons.Check size={11} sw={3}/></span>
                  <span className="text">{w.text}</span>
                  <span className="when">{w.when}</span>
                </div>
              ))}
            </div>
          </>
        )}
      </div>

      <div className="mc-m-tabbar">
        <button className={`tab ${tab === 'today'   ? 'active' : ''}`} onClick={() => setTab('today')}>
          <Icons.Home size={20}/> Today
        </button>
        <button className={`tab ${tab === 'capture' ? 'active' : ''}`} onClick={() => setTab('capture')}>
          <Icons.Brain size={20}/> Capture
        </button>
        <button className={`tab ${tab === 'admin'   ? 'active' : ''}`} onClick={() => setTab('admin')}>
          <Icons.Refresh size={20}/> Admin
        </button>
        <button className={`tab ${tab === 'wins'    ? 'active' : ''}`} onClick={() => setTab('wins')}>
          <Icons.Trophy size={20}/> Wins
        </button>
      </div>

      <BurstMode/>
    </div>
  );
}

Object.assign(window, { Mobile });