// Applications tracker

function AppsView() {
  const { state, update } = useStore();
  const data = window.PLAN_DATA;
  const STATUSES = ['Not Applied', 'Applied', 'Recruiter Call', 'Phone Screen', 'Onsite', 'Offer', 'Rejected'];

  const setApp = (num, patch) => {
    update(prev => ({
      ...prev,
      apps: { ...prev.apps, [num]: { ...prev.apps[num], ...patch } }
    }));
  };

  // Group by tier
  const byTier = { 'Tier 1': [], 'Tier 2': [], 'Tier 3': [] };
  data.apps.forEach(a => {
    if (byTier[a.tier]) byTier[a.tier].push(a);
  });

  const totalApplied = data.apps.filter(a => {
    const s = state.apps[a.num] || {};
    return s.status && s.status !== 'Not Applied';
  }).length;

  return (
    <div className="fade-in">
      <div className="section-h">
        <div>
          <div className="kicker">Application tracker · launches Aug 12</div>
          <h1 className="h-title">The <em>shortlist</em>.</h1>
        </div>
        <div style={{textAlign:'right'}}>
          <div className="mono" style={{fontSize:'11px',color:'var(--ink-2)'}}>APPLIED</div>
          <div style={{fontFamily:'var(--serif)',fontSize:'36px',letterSpacing:'-0.02em',marginTop:'2px'}}>
            <CountUp to={totalApplied} /> / {data.apps.length}
          </div>
        </div>
      </div>

      {Object.entries(byTier).map(([tier, items]) => items.length > 0 && (
        <div key={tier} style={{marginBottom:'28px'}}>
          <div style={{display:'flex',alignItems:'baseline',gap:'12px',marginBottom:'14px'}}>
            <span style={{fontFamily:'var(--serif)',fontSize:'24px',letterSpacing:'-0.015em'}}>{tier}</span>
            <span className="mono muted" style={{fontSize:'10px',letterSpacing:'0.1em'}}>· {items.length} TARGETS</span>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))',gap:'10px'}}>
            {items.map((a, i) => {
              const s = state.apps[a.num] || {};
              const status = s.status || 'Not Applied';
              const applied = status !== 'Not Applied';
              return (
                <div key={a.num} className="card" style={{
                  padding:'16px',
                  borderColor: applied ? 'var(--accent)' : 'var(--line-soft)',
                  animation: `fadeUp 0.3s ${i*20}ms cubic-bezier(0.2,0.8,0.2,1) both`,
                }}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:'8px'}}>
                    <div>
                      <div style={{fontSize:'15px',fontWeight:600,letterSpacing:'-0.005em'}}>{a.company}</div>
                      <div className="mono" style={{fontSize:'10px',color:'var(--ink-3)',letterSpacing:'0.06em',marginTop:'2px'}}>
                        {a.role}
                      </div>
                    </div>
                    <span className="mono" style={{fontSize:'10px',color:'var(--ink-3)'}}>#{a.num.padStart(2,'0')}</span>
                  </div>
                  <select
                    className="select"
                    value={status}
                    onChange={e => setApp(a.num, { status: e.target.value })}
                    style={{marginTop:'10px', fontSize:'12px', padding:'7px 10px'}}
                  >
                    {STATUSES.map(st => <option key={st} value={st}>{st}</option>)}
                  </select>
                  {applied && (
                    <input
                      className="input"
                      placeholder="Date applied · source · note"
                      value={s.notes || ''}
                      onChange={e => setApp(a.num, { notes: e.target.value })}
                      style={{marginTop:'8px',fontSize:'11px',padding:'7px 10px'}}
                    />
                  )}
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

window.AppsView = AppsView;