/* Question Bank screen */
const QuestionsScreen = () => {
  const [filters, setFilters] = React.useState({
    competency: 'All', dept: 'All', rater: 'All', type: 'All', status: 'All', lang: 'All'
  });

  const setF = (k, v) => setFilters(s => ({ ...s, [k]: v }));

  const filtered = QUESTIONS.filter(q => (
    (filters.competency === 'All' || q.competency === filters.competency) &&
    (filters.dept === 'All' || q.dept === filters.dept || q.dept === 'All') &&
    (filters.rater === 'All' || q.rater === filters.rater || q.rater === 'All') &&
    (filters.type === 'All' || q.type === filters.type) &&
    (filters.lang === 'All' || q.lang === filters.lang)
  ));

  const ratorColor = (r) =>
    r === 'Peer' ? 'tint-sky' : r === 'Manager' ? 'tint-violet' : r === 'Self' ? 'tint-indigo' :
    r === 'Direct Report' ? 'tint-mint' : r === 'Internal Customer' ? 'tint-amber' : 'tint-slate';

  return (
    <div className="fade-in">
      <div className="page-header">
        <div>
          <h1>Question Bank</h1>
          <div className="subtitle">Centralized library of all evaluation questions — multilingual, tagged and reusable.</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><Icon name="upload" size={15}/> Import CSV</button>
          <button className="btn btn-primary"><Icon name="plus" size={15}/> New Question</button>
        </div>
      </div>

      {/* Filter panel */}
      <div className="card" style={{ marginBottom: 18 }}>
        <div className="card-body" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12, alignItems: 'end' }}>
          {[
            ['Competency', 'competency', ['All', ...COMPETENCIES.map(c => c.name)]],
            ['Department', 'dept', ['All', ...DEPARTMENTS]],
            ['Rater Type', 'rater', ['All', 'Self', 'Manager', 'Peer', 'Direct Report', 'Internal Customer', 'External Customer', 'Matrix Manager']],
            ['Question Type', 'type', ['All', '1–5 Likert', 'Open-ended', 'Yes / No', 'Multiple choice', '0–10 NPS', 'Short text']],
            ['Status', 'status', ['All', 'Active', 'Passive']],
            ['Language', 'lang', ['All', 'EN', 'TR']],
          ].map(([label, key, opts]) => (
            <div className="field" style={{ marginBottom: 0 }} key={key}>
              <label>{label}</label>
              <select className="select" value={filters[key]} onChange={e => setF(key, e.target.value)}>
                {opts.map(o => <option key={o}>{o}</option>)}
              </select>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, color: 'var(--ink-500)' }}>Showing <b style={{ color: 'var(--ink-800)' }}>{filtered.length}</b> of {QUESTIONS.length} questions</div>
        <div style={{ display: 'flex', gap: 6 }}>
          <button className="btn btn-sm btn-secondary"><Icon name="filter" size={13}/> Saved views</button>
          <button className="btn btn-sm btn-secondary"><Icon name="download" size={13}/> Export</button>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {filtered.map((q, i) => (
          <div key={i} className="card" style={{ padding: 16, display: 'flex', gap: 16, alignItems: 'flex-start' }}>
            <div className={`stat-icon ${ratorColor(q.rater)}`} style={{ width: 36, height: 36, marginBottom: 0, flexShrink: 0 }}>
              <Icon name="message" size={15}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1.45 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, padding: '2px 6px', background: 'var(--ink-100)', borderRadius: 4, color: 'var(--ink-600)', marginRight: 8, verticalAlign: 2 }}>Q-{(1000 + i)}</span>
                {q.text}
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
                <span className="badge badge-info"><span className="dot"></span>{q.competency}</span>
                <span className="badge badge-soft"><span className="dot" style={{ background: 'var(--ink-400)' }}></span>{q.dept}</span>
                <span className="badge badge-soft"><span className="dot" style={{ background: 'var(--accent-violet)' }}></span>Rater: {q.rater}</span>
                <span className="badge badge-soft"><span className="dot" style={{ background: 'var(--accent-sky)' }}></span>{q.type}</span>
                <span className="badge badge-soft"><span className="dot" style={{ background: 'var(--ink-400)' }}></span>Scale: {q.scale}</span>
                {q.required && <span className="badge badge-warning"><span className="dot"></span>Required</span>}
                <span className="badge badge-soft" style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }}><span className="dot" style={{ background: 'var(--ink-300)' }}></span>{q.lang}</span>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 }}>
              <Badge kind={q.active ? 'active' : 'archived'}>{q.active ? 'Active' : 'Passive'}</Badge>
              <div style={{ display: 'flex', gap: 4 }}>
                <button className="btn btn-icon btn-sm btn-ghost"><Icon name="eye" size={13}/></button>
                <button className="btn btn-icon btn-sm btn-ghost"><Icon name="edit" size={13}/></button>
                <button className="btn btn-icon btn-sm btn-ghost"><Icon name="copy" size={13}/></button>
                <button className="btn btn-icon btn-sm btn-ghost"><Icon name="more" size={13}/></button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

window.QuestionsScreen = QuestionsScreen;