/* Survey Templates screen */
const TemplatesScreen = () => {
  const [filter, setFilter] = React.useState('All');
  const tabs = ['All', '360 Feedback', 'Peer Review', 'Manager Review', 'Pulse Survey', 'Engagement Survey', 'Department Survey'];
  const filtered = TEMPLATES.filter(t => filter === 'All' || t.type === filter);

  return (
    <div className="fade-in">
      <div className="page-header">
        <div>
          <h1>Survey Templates</h1>
          <div className="subtitle">Reusable question sets — assignable to any evaluation cycle.</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><Icon name="upload" size={15}/> Import</button>
          <button className="btn btn-primary"><Icon name="plus" size={15}/> New Template</button>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 20 }}>
        {tabs.map(t => (
          <button key={t} className={`chip ${filter === t ? 'active' : ''}`} onClick={() => setFilter(t)}>{t}</button>
        ))}
      </div>

      <div className="grid grid-3">
        {filtered.map(t => (
          <div key={t.name} className="card" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div style={{
              height: 96,
              background: t.tint === 'tint-indigo' ? 'linear-gradient(135deg, #EEF0FF, #DCE0FF)' :
                          t.tint === 'tint-violet' ? 'linear-gradient(135deg, #F3EBFF, #E9D5FF)' :
                          t.tint === 'tint-mint'   ? 'linear-gradient(135deg, #E6FCF5, #CCFBF1)' :
                          t.tint === 'tint-sky'    ? 'linear-gradient(135deg, #E0F2FE, #BAE6FD)' :
                          t.tint === 'tint-amber'  ? 'linear-gradient(135deg, #FFFBEB, #FEF3C7)' :
                          t.tint === 'tint-emerald'? 'linear-gradient(135deg, #ECFDF5, #D1FAE5)' :
                                                     'linear-gradient(135deg, #FEF2F2, #FECACA)',
              position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 16
            }}>
              <div className={`stat-icon ${t.tint}`} style={{ width: 38, height: 38, marginBottom: 0, background: 'rgba(255,255,255,0.7)' }}>
                <Icon name="template" size={17}/>
              </div>
              <div style={{ position: 'absolute', top: 12, right: 12 }}>
                <Badge status={t.status}/>
              </div>
            </div>
            <div style={{ padding: 16, display: 'flex', flexDirection: 'column', flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--ink-900)', marginBottom: 2 }}>{t.name}</div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-500)' }}>{t.type} · {t.dept}</div>

              <div style={{ display: 'flex', gap: 16, marginTop: 14, marginBottom: 12, fontSize: 12 }}>
                <div>
                  <div style={{ fontWeight: 700, color: 'var(--ink-900)' }}>{t.questions}</div>
                  <div style={{ color: 'var(--ink-500)', fontSize: 11 }}>Questions</div>
                </div>
                <div>
                  <div style={{ fontWeight: 700, color: 'var(--ink-900)' }}>{t.coverage}</div>
                  <div style={{ color: 'var(--ink-500)', fontSize: 11 }}>Competencies</div>
                </div>
                <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
                  <div style={{ fontWeight: 600, color: 'var(--ink-700)', fontSize: 11.5 }}>{t.updated}</div>
                  <div style={{ color: 'var(--ink-500)', fontSize: 10.5 }}>Last updated</div>
                </div>
              </div>

              <div style={{ display: 'flex', gap: 6, marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--border)' }}>
                <button className="btn btn-sm btn-secondary" style={{ flex: 1 }}><Icon name="eye" size={13}/> Preview</button>
                <button className="btn btn-sm btn-secondary" style={{ flex: 1 }}><Icon name="edit" size={13}/> Edit</button>
                <button className="btn btn-icon btn-sm btn-ghost"><Icon name="copy" size={14}/></button>
                <button className="btn btn-icon btn-sm btn-ghost"><Icon name="more" size={14}/></button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

window.TemplatesScreen = TemplatesScreen;