// Dashboard, Projects, Teams, Skills pages

// ---- Sparkline helper ----
const Sparkline = ({ data, width = 100, height = 32, stroke = 'var(--accent)' }) => {
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const step = width / (data.length - 1);
  const pts = data.map((v, i) => `${i*step},${height - ((v-min)/range) * (height-4) - 2}`).join(' ');
  const area = `0,${height} ${pts} ${width},${height}`;
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{display:'block',width:'100%',overflow:'visible'}}>
      <polygon points={area} className="spark-area" style={{fill: `color-mix(in oklch, ${stroke} 16%, transparent)`}} />
      <polyline points={pts} fill="none" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
};

// ---- Dashboard ----
const Dashboard = ({ lang, onNav }) => {
  const t = I18N[lang];
  const now = new Date();
  const dateStr = now.toLocaleDateString(lang==='zh'?'zh-CN':'en-US', { weekday: 'long', month: 'short', day: 'numeric' });

  // Heatmap data
  const engines = ['claude', 'codex', 'gemini', 'human'];
  const engineNames = { claude: 'Claude Code', codex: 'Codex', gemini: 'Gemini', human: 'Humans' };
  const engineColors = { claude: '#D97757', codex: '#10A37F', gemini: '#4285F4', human: '#8B94A3' };
  const heatmap = engines.map(e => ({
    engine: e,
    cells: Array.from({length: 24}, (_, i) => {
      // realistic shape: low overnight, peak midday
      const hrOffset = Math.abs(i - 14);
      const base = Math.max(0, 1 - hrOffset/12) * 0.8 + 0.05;
      const noise = (Math.sin(i * (e==='claude'?1.3:e==='codex'?0.9:e==='gemini'?1.7:0.6) + e.length) + 1) / 2;
      return Math.min(1, base * 0.6 + noise * 0.45);
    }),
  }));

  return (
    <div className="dash fade-in">
      <div className="dash-greeting">
        <h1>{t.goodMorning}</h1>
        <div className="today">· {dateStr}</div>
      </div>

      <div className="stat-grid">
        <div className="stat">
          <div className="stat-label">{t.openIssues}</div>
          <div className="stat-value">247</div>
          <div className="stat-delta up"><Icon name="arrowDown" size={11} /> 8.2% vs last week</div>
          <div className="stat-spark"><Sparkline data={[180,198,212,220,240,232,247]} stroke="var(--status-done)" /></div>
        </div>
        <div className="stat">
          <div className="stat-label">{t.activeAgents}</div>
          <div className="stat-value">12 <span style={{fontSize:14,color:'var(--fg-3)'}}>/ 18</span></div>
          <div className="stat-delta up"><Icon name="arrowUp" size={11} /> 3 engaged now</div>
          <div className="stat-spark"><Sparkline data={[6,8,7,9,11,10,12]} stroke="var(--accent)" /></div>
        </div>
        <div className="stat">
          <div className="stat-label">{t.runsToday}</div>
          <div className="stat-value">1,418</div>
          <div className="stat-delta up"><Icon name="arrowUp" size={11} /> 24% above avg</div>
          <div className="stat-spark"><Sparkline data={[920,1020,1180,1240,1310,1380,1418]} stroke="#8B5CF6" /></div>
        </div>
        <div className="stat">
          <div className="stat-label">{t.avgCycle}</div>
          <div className="stat-value">4.2<span style={{fontSize:14,color:'var(--fg-3)'}}>m</span></div>
          <div className="stat-delta down"><Icon name="arrowDown" size={11} /> 1.3m slower</div>
          <div className="stat-spark"><Sparkline data={[5.8,5.2,4.4,4.0,3.8,4.1,4.2]} stroke="var(--status-working)" /></div>
        </div>
      </div>

      {/* Quick project entry — above live work */}
      <div className="quick-proj">
        <div className="quick-proj-head">
          <div className="card-title">Jump to project</div>
          <span className="spacer" />
          <button className="ibtn" onClick={() => onNav('projects')}>All projects <Icon name="chevRight" size={12} /></button>
        </div>
        <div className="quick-proj-grid">
          {PROJECTS.slice(0,6).map(p => {
            const pct = Math.round(p.done / p.issues * 100);
            return (
              <div key={p.id} className="quick-proj-tile" onClick={() => { window.__currentProj = p.id; onNav('project-detail'); }}>
                <div className="qp-head">
                  <div className="proj-icon" style={{background:p.color,width:32,height:32,fontSize:12,borderRadius:8}}>{p.id.slice(0,2)}</div>
                  <div style={{flex:1,minWidth:0}}>
                    <div className="qp-name">{p.name}</div>
                    <div className="qp-slug mono">{p.slug}</div>
                  </div>
                  <Icon name="chevRight" size={13} className="dim" />
                </div>
                <div className="qp-foot">
                  <div className="proj-progress" style={{flex:1,margin:0,height:3}}>
                    <div className="proj-progress-fill" style={{width:pct+'%',background:p.color}} />
                  </div>
                  <span className="mono dim" style={{fontSize:10.5}}>{p.done}/{p.issues}</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-title">{t.liveWork}</div>
          <span className="chip chip-working dot" style={{marginLeft:6}}>{ISSUES.filter(i => i.status === 'working').length} running</span>
          <span className="spacer" />
          <button className="ibtn" onClick={() => onNav('issues')}>All issues <Icon name="chevRight" size={12} /></button>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:0}}>
          {ISSUES.filter(i => i.status === 'working').map(iss => (
            <LiveWorkRow key={iss.id} iss={iss} onClick={() => { window.__currentIssue = iss.id; onNav('issue-detail'); }} />
          ))}
        </div>
      </div>
    </div>
  );
};

const LiveWorkRow = ({ iss, onClick }) => {
  const [progress, setProgress] = useState(32);
  useEffect(() => {
    const ivl = setInterval(() => setProgress(p => Math.min(92, p + (Math.random()*3))), 1500);
    return () => clearInterval(ivl);
  }, []);
  return (
    <div style={{padding: '10px 14px', borderBottom: '1px solid var(--border-subtle)', cursor: 'pointer'}}
      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
      onMouseLeave={e => e.currentTarget.style.background = ''}
      onClick={onClick}>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
        <span className="mono" style={{fontSize:10.5,color:'var(--fg-3)',fontWeight:500}}>{iss.id}</span>
        <span className="chip chip-working dot">Working</span>
        <AssigneeChip a={iss.assignee} size="sm" />
        <span className="spacer" />
        {iss.eta && <span style={{fontSize:11,color:'var(--fg-3)'}} className="mono">ETA {iss.eta}</span>}
      </div>
      <div style={{fontSize:13,fontWeight:500,marginBottom:8,lineHeight:1.35}}>{iss.title}</div>
      <div style={{display:'flex',gap:4,alignItems:'center'}}>
        <div className="proj-progress" style={{flex:1,margin:0}}>
          <div className="proj-progress-fill" style={{width: progress+'%', transition: 'width 1s ease-out'}} />
        </div>
        <span className="mono" style={{fontSize:10.5,color:'var(--fg-3)',width:36,textAlign:'right'}}>{Math.round(progress)}%</span>
      </div>
    </div>
  );
};

const AssigneeChip = ({ a, size }) => {
  if (!a) return <span className="chip" style={{borderStyle:'dashed',color:'var(--fg-4)'}}>Unassigned</span>;
  const sz = size === 'sm' ? 18 : 20;
  if (a.kind === 'agent') {
    const letter = a.engine === 'claude' ? 'C' : a.engine === 'codex' ? 'O' : 'G';
    return (
      <span style={{display:'inline-flex',alignItems:'center',gap:5}}>
        <span className={`avatar agent ${a.engine}`} style={{width:sz,height:sz,fontSize:sz*0.5,borderWidth:0}}>{letter}</span>
        <span style={{fontSize:11.5,color:'var(--fg-2)'}}>{a.handle}</span>
      </span>
    );
  }
  return (
    <span style={{display:'inline-flex',alignItems:'center',gap:5}}>
      <span className="avatar" style={{width:sz,height:sz,fontSize:sz*0.5,borderWidth:0}}>{a.avatar || a.name.slice(0,2)}</span>
      <span style={{fontSize:11.5,color:'var(--fg-2)'}}>{a.name}</span>
    </span>
  );
};

// ---- Projects ----
const Projects = ({ onNav }) => (
  <div className="fade-in">
    <div className="page-head">
      <div>
        <div className="page-title">Projects</div>
        <div className="page-sub">6 active · 2 archived</div>
      </div>
      <div className="page-actions">
        <button className="ibtn bordered"><Icon name="filter" size={13} /> Filter</button>
        <button className="ibtn primary"><Icon name="plus" size={13} /> New project</button>
      </div>
    </div>
    <div className="proj-grid">
      {PROJECTS.map(p => {
        const pct = Math.round(p.done / p.issues * 100);
        return (
          <div key={p.id} className="proj-card" onClick={() => { window.__currentProj = p.id; onNav('project-detail'); }}>
            <div className="proj-head">
              <div className="proj-icon" style={{background:p.color}}>{p.id.slice(0,2)}</div>
              <div style={{flex:1}}>
                <div className="proj-name">{p.name}</div>
                <div className="proj-slug">{p.slug}</div>
              </div>
              <Icon name="dots" size={16} className="dim" />
            </div>
            <div className="proj-desc">{p.desc}</div>
            {p.nodeId && (() => {
              const n = NODES.find(x=>x.id===p.nodeId);
              return n ? (
                <div className="proj-node-chip" onClick={(e) => { e.stopPropagation(); window.__currentNode = n.id; onNav('node-detail'); }}>
                  <Icon name={n.kind==='local'?'terminal':'cloud'} size={11} className="dim" />
                  <span className="mono" style={{fontSize:11}}>{n.name}</span>
                  <span className="dim" style={{fontSize:11}}>· {n.engines.length} engines</span>
                </div>
              ) : null;
            })()}
            <div className="proj-progress">
              <div className="proj-progress-fill" style={{width: pct+'%', background: p.color}} />
            </div>
            <div className="proj-meta">
              <span className="mono">{p.done}/{p.issues}</span>
              <span className="dim">·</span>
              <span>{p.lang}</span>
              <span className="spacer" />
              <div className="avatar-stack">
                <div className="avatar agent claude">C</div>
                <div className="avatar agent codex">O</div>
                <div className="avatar">RC</div>
                <div className="avatar">XM</div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  </div>
);

Object.assign(window, { Dashboard, Projects, LiveWorkRow, AssigneeChip, Sparkline });