/* Mobile artboards — login, results list, and detail */

const MobileLogin = () => (
  <div className="phone-screen" style={{display: 'flex', flexDirection: 'column'}}>
    <div style={{height: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 18px', fontSize: 11, fontWeight: 600}}>
      <span>9:41</span>
      <span style={{display: 'flex', gap: 4, alignItems: 'center'}}>
        <span style={{width: 14, height: 8, border: '1px solid currentColor', borderRadius: 2, position: 'relative'}}>
          <span style={{position: 'absolute', inset: 1, background: 'currentColor', borderRadius: 1, width: 8}}/>
        </span>
      </span>
    </div>
    <div style={{padding: '24px 24px 16px', flex: 1, display: 'flex', flexDirection: 'column', gap: 18}}>
      <div style={{display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24}}>
        <span className="brand-mark">y</span>
        <span style={{fontWeight: 600, fontSize: 15}}>younalyse</span>
      </div>
      <div>
        <h1 style={{margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em'}}>Welcome back</h1>
        <p style={{margin: '4px 0 0', color: 'var(--fg-muted)', fontSize: 13}}>Sign in to continue.</p>
      </div>
      <div className="field">
        <label>Email</label>
        <input className="input" defaultValue="jules@younalyse.app" />
      </div>
      <div className="field">
        <label>Password</label>
        <input className="input" type="password" defaultValue="••••••••" />
      </div>
      <button className="btn primary lg" style={{width: '100%'}}>Sign in</button>
      <div style={{textAlign: 'center', fontSize: 12, color: 'var(--fg-faint)'}}>Forgot password?</div>
    </div>
    <div style={{padding: '16px 24px 24px', textAlign: 'center', fontSize: 11, color: 'var(--fg-faint)', fontFamily: 'var(--mono)'}}>v0.4.2</div>
  </div>
);

const MobileResults = () => {
  const items = window.MOCK_RESULTS.slice(0, 5);
  return (
    <div className="phone-screen" style={{display: 'flex', flexDirection: 'column'}}>
      <div style={{height: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 18px', fontSize: 11, fontWeight: 600}}>
        <span>9:41</span>
        <span style={{width: 14, height: 8, border: '1px solid currentColor', borderRadius: 2}}/>
      </div>
      <div style={{padding: '12px 16px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
        <div>
          <div style={{fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em'}}>Results</div>
          <div style={{fontSize: 11, color: 'var(--fg-faint)'}}>64 videos · 4 runs</div>
        </div>
        <button className="btn ghost sm"><Icon name="filter" size={14} /></button>
      </div>
      <div style={{padding: '4px 16px 12px'}}>
        <div className="search" style={{height: 36, fontSize: 13}}>
          <Icon name="search" size={14} />
          <input placeholder="Search…" />
        </div>
      </div>
      <div style={{flex: 1, overflow: 'auto', padding: '0 12px'}}>
        {items.map(r => (
          <div key={r.id} style={{padding: '12px 4px', borderBottom: '1px solid var(--border)'}}>
            <div style={{fontSize: 13, fontWeight: 500, lineHeight: 1.35, marginBottom: 4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden'}}>{r.title}</div>
            <div style={{fontSize: 11, color: 'var(--fg-muted)', marginBottom: 6}}>{r.channelName} · {window.fmtDate(r.publishedAt)}</div>
            <div style={{display: 'flex', gap: 10, fontSize: 11, color: 'var(--fg-faint)', fontFamily: 'var(--mono)'}}>
              <span><Icon name="eye" size={11} /> {window.fmtNum(r.views)}</span>
              <span><Icon name="thumbs-up" size={11} /> {window.fmtNum(r.likes)}</span>
              <span><Icon name="comment" size={11} /> {window.fmtNum(r.commentsCount)}</span>
              <span style={{marginLeft: 'auto', color: 'var(--accent)'}}>{r.engagementPct.toFixed(2)}%</span>
            </div>
          </div>
        ))}
      </div>
      <div className="mtabs">
        <button className="mtab"><Icon name="plus" /><span>New</span></button>
        <button className="mtab active"><Icon name="list" /><span>Results</span></button>
        <button className="mtab"><Icon name="settings" /><span>Settings</span></button>
      </div>
    </div>
  );
};

const MobileAnalysis = () => (
  <div className="phone-screen" style={{display: 'flex', flexDirection: 'column'}}>
    <div style={{height: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 18px', fontSize: 11, fontWeight: 600}}>
      <span>9:41</span>
      <span style={{width: 14, height: 8, border: '1px solid currentColor', borderRadius: 2}}/>
    </div>
    <div style={{padding: '12px 16px 8px'}}>
      <div style={{fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em'}}>New analysis</div>
      <div style={{fontSize: 11, color: 'var(--fg-faint)'}}>Configure and run</div>
    </div>
    <div style={{flex: 1, overflow: 'auto', padding: '4px 16px 16px', display: 'flex', flexDirection: 'column', gap: 14}}>
      <div className="field">
        <label>Channels</label>
        <textarea className="textarea" rows={3} defaultValue="@mkbhd&#10;@goodmythicalmorning&#10;@FT" style={{fontSize: 12}}/>
      </div>
      <div className="form-card" style={{padding: '12px 14px'}}>
        <div style={{fontSize: 12, fontWeight: 600, marginBottom: 6}}>Collect</div>
        {['Title','Tags','Views','Likes','Comments','Engagement'].map((l, i) => (
          <div key={l} className="checkbox-row" style={{padding: '4px 0'}}>
            <Check checked={true} onChange={()=>{}} label={l} />
          </div>
        ))}
      </div>
      <div className="form-card" style={{padding: '12px 14px'}}>
        <div style={{fontSize: 12, fontWeight: 600, marginBottom: 8}}>Claude AI</div>
        <div className="checkbox-row" style={{padding: '4px 0'}}><Check checked={true} onChange={()=>{}} label="Analyze comments" /></div>
        <div className="checkbox-row" style={{padding: '4px 0'}}><Check checked={true} onChange={()=>{}} label="Channel summary" /></div>
      </div>
      <button className="btn primary lg" style={{width: '100%'}}><Icon name="play" size={13} /> Run analysis</button>
    </div>
    <div className="mtabs">
      <button className="mtab active"><Icon name="plus" /><span>New</span></button>
      <button className="mtab"><Icon name="list" /><span>Results</span></button>
      <button className="mtab"><Icon name="settings" /><span>Settings</span></button>
    </div>
  </div>
);

Object.assign(window, { MobileLogin, MobileResults, MobileAnalysis });