// Teacher pages

const TeacherDashboard = ({ onNav }) => {
  const [modalOpen, setModalOpen] = React.useState(false);
  return (
    <>
      <Topbar title="Bảng điều khiển giáo viên" breadcrumb={['Trang chính']}>
        <button className="btn btn-primary btn-sm" onClick={() => setModalOpen(true)}><Icon name="plus" size={13} /> Tạo câu hỏi mới</button>
      </Topbar>
      <div className="page">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 22 }}>
          <StatCard label="Câu hỏi trong ngân hàng" value="687" sub="Cập nhật gần nhất: hôm nay" />
          <StatCard label="Học viên đang phụ trách" value="142" sub="Thuộc 3 môn khác nhau" />
          <StatCard label="Bài thi đang mở" value="2" sub="IT202, IT301" tone="accent" />
          <StatCard label="Tỉ lệ đỗ trung bình" value="87" unit="%" sub="Học kỳ hiện tại" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
          <div className="card" style={{ padding: 22 }}>
            <div className="serif" style={{ fontSize: 20, marginBottom: 14 }}>Môn phụ trách</div>
            {[
              { c: 'IT202', t: 'Cơ sở dữ liệu', s: 48, q: 312, e: 'Thi ngày 25/04' },
              { c: 'IT301', t: 'Lập trình hướng đối tượng', s: 52, q: 201, e: 'Đang giảng dạy' },
              { c: 'IT303', t: 'Mạng máy tính', s: 42, q: 174, e: 'Chuẩn bị' },
            ].map((m, i) => (
              <div key={i} style={{ padding: '14px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none', display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent-ink)', display: 'grid', placeItems: 'center', fontFamily: 'var(--serif)', fontSize: 16 }}>{m.c.slice(0,2)}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600 }}>{m.t}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>{m.c} · {m.s} học viên · {m.q} câu hỏi</div>
                </div>
                <span className="chip chip-soft">{m.e}</span>
                <button className="btn btn-ghost btn-sm">Xem</button>
              </div>
            ))}
          </div>
          <div className="card" style={{ padding: 22 }}>
            <div className="serif" style={{ fontSize: 18, marginBottom: 14 }}>Hoạt động gần đây</div>
            {[
              { ic: 'plus', t: 'Thêm 8 câu hỏi mới', s: 'Ngân hàng IT202', time: '10 phút trước' },
              { ic: 'checkCircle', t: 'Duyệt bài thi của 12 học viên', s: 'IT301 giữa kỳ', time: '2 giờ trước' },
              { ic: 'alert', t: '3 vi phạm giám sát cần xem', s: 'Thi IT202 ngày 18/04', time: 'Hôm qua' },
            ].map((a, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, padding: '10px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--bg-2)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={a.ic} size={14} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{a.t}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{a.s} · {a.time}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      {modalOpen && <AddQuestionModal onClose={() => setModalOpen(false)} />}
    </>
  );
};

const AddQuestionModal = ({ onClose, editingId }) => {
  const editing = editingId ? QUESTION_BANK.find(q => q.id === editingId) : null;
  const [questionType, setQuestionType] = React.useState(editing?.type === 'Đúng/Sai' ? 'truefalse' : 'single');
  const [subject, setSubject] = React.useState('IT202');
  const [topic, setTopic] = React.useState(editing?.topic || 'SQL cơ bản');
  const [difficulty, setDifficulty] = React.useState(editing?.diff || 'Trung bình');
  const [questionText, setQuestionText] = React.useState(editing ? QUESTION_TEXTS[editing.id] : '');
  const [explanation, setExplanation] = React.useState(editing ? 'Đáp án đúng dựa trên thứ tự chuẩn của mệnh đề SQL. Học viên cần nắm vững thứ tự SELECT → FROM → WHERE.' : '');
  const [points, setPoints] = React.useState('0.25');
  const [options, setOptions] = React.useState(editing ? [
    { id: 1, text: 'SELECT * FROM users WHERE age > 18', correct: true },
    { id: 2, text: 'SELECT * WHERE age > 18 FROM users', correct: false },
    { id: 3, text: 'FROM users SELECT * WHERE age > 18', correct: false },
    { id: 4, text: 'WHERE age > 18 SELECT * FROM users', correct: false },
  ] : [
    { id: 1, text: '', correct: false },
    { id: 2, text: '', correct: false },
    { id: 3, text: '', correct: false },
    { id: 4, text: '', correct: false },
  ]);
  const [saved, setSaved] = React.useState(false);

  const updateOption = (id, field, value) => {
    setOptions(opts => opts.map(o => {
      if (o.id !== id) {
        // For single choice, uncheck others
        if (field === 'correct' && value && questionType === 'single') return { ...o, correct: false };
        return o;
      }
      return { ...o, [field]: value };
    }));
  };
  const addOption = () => setOptions([...options, { id: Date.now(), text: '', correct: false }]);
  const removeOption = (id) => options.length > 2 && setOptions(options.filter(o => o.id !== id));

  const canSave = questionText.trim() && options.filter(o => o.text.trim()).length >= 2 && options.some(o => o.correct);

  const handleSave = (andNew) => {
    setSaved(true);
    setTimeout(() => {
      if (andNew) {
        setQuestionText(''); setExplanation('');
        setOptions([{ id: 1, text: '', correct: false }, { id: 2, text: '', correct: false }, { id: 3, text: '', correct: false }, { id: 4, text: '', correct: false }]);
        setSaved(false);
      } else {
        onClose();
      }
    }, 1200);
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(10,10,10,0.5)', backdropFilter: 'blur(4px)', display: 'grid', placeItems: 'center', padding: 32, zIndex: 1000 }} className="fadein" onClick={onClose}>
      <div className="card" style={{ width: '100%', maxWidth: 900, maxHeight: '90vh', overflow: 'auto', boxShadow: '0 40px 80px rgba(0,0,0,0.3)' }} onClick={e => e.stopPropagation()}>
        <div style={{ padding: '20px 28px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'sticky', top: 0, background: 'var(--card)', zIndex: 1 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div className="serif" style={{ fontSize: 22 }}>{editing ? 'Chỉnh sửa câu hỏi' : 'Tạo câu hỏi mới'}</div>
              {editing && <span className="mono" style={{ fontSize: 12, padding: '3px 8px', background: 'var(--bg-2)', borderRadius: 6, color: 'var(--muted)' }}>{editing.id}</span>}
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{editing ? `Đã được dùng ${editing.used} lượt · Thay đổi sẽ áp dụng cho các đề thi mới` : 'Câu hỏi sẽ được thêm vào ngân hàng và có thể dùng cho đề thi'}</div>
          </div>
          <button onClick={onClose} className="btn btn-ghost btn-sm" style={{ padding: 8 }}><Icon name="x" size={16} /></button>
        </div>

        {saved && (
          <div style={{ padding: 14, background: 'var(--green-soft)', color: 'var(--green)', margin: 20, borderRadius: 8, display: 'flex', alignItems: 'center', gap: 10, fontSize: 13 }}>
            <Icon name="checkCircle" size={16} /> <strong>{editing ? `Đã cập nhật câu ${editing.id}!` : 'Đã lưu câu hỏi!'}</strong> {editing ? 'Thay đổi đã được lưu lại.' : 'Mã Q0149 đã được thêm vào ngân hàng.'}
          </div>
        )}

        <div style={{ padding: 28 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 14, marginBottom: 22 }}>
            <FormField label="Môn học">
              <select value={subject} onChange={e => setSubject(e.target.value)} style={selectStyle}>
                <option>IT202 · Cơ sở dữ liệu</option>
                <option>IT301 · Lập trình HĐT</option>
                <option>IT303 · Mạng máy tính</option>
              </select>
            </FormField>
            <FormField label="Chủ đề">
              <select value={topic} onChange={e => setTopic(e.target.value)} style={selectStyle}>
                <option>SQL cơ bản</option>
                <option>JOIN</option>
                <option>Chuẩn hoá</option>
                <option>Transaction</option>
                <option>View/Index</option>
              </select>
            </FormField>
            <FormField label="Độ khó">
              <div style={{ display: 'flex', gap: 4 }}>
                {['Dễ', 'Trung bình', 'Khó'].map(d => (
                  <button key={d} onClick={() => setDifficulty(d)} className="btn btn-sm" style={{ flex: 1, padding: '8px 4px', fontSize: 12, background: difficulty === d ? 'var(--ink)' : 'var(--card)', color: difficulty === d ? '#fff' : 'var(--ink)', border: '1px solid var(--line-2)' }}>{d}</button>
                ))}
              </div>
            </FormField>
            <FormField label="Điểm">
              <input type="number" step="0.25" value={points} onChange={e => setPoints(e.target.value)} style={selectStyle} />
            </FormField>
          </div>

          <FormField label="Loại câu hỏi">
            <div style={{ display: 'flex', gap: 8 }}>
              {[{ v: 'single', l: 'Một đáp án đúng' }, { v: 'multi', l: 'Nhiều đáp án đúng' }, { v: 'truefalse', l: 'Đúng/Sai' }].map(t => (
                <button key={t.v} onClick={() => setQuestionType(t.v)} className="btn btn-sm" style={{ padding: '8px 14px', background: questionType === t.v ? 'var(--accent-soft)' : 'var(--card)', color: questionType === t.v ? 'var(--accent-ink)' : 'var(--ink-2)', border: `1px solid ${questionType === t.v ? 'var(--accent)' : 'var(--line-2)'}` }}>{t.l}</button>
              ))}
            </div>
          </FormField>

          <FormField label="Nội dung câu hỏi">
            <textarea value={questionText} onChange={e => setQuestionText(e.target.value)} placeholder="VD: Trong SQL, câu lệnh nào dùng để xoá toàn bộ bản ghi nhưng giữ lại cấu trúc bảng?" style={{ ...selectStyle, minHeight: 80, resize: 'vertical', fontFamily: 'inherit' }} />
          </FormField>

          <FormField label={`Các phương án trả lời (${options.filter(o => o.correct).length} đáp án đúng)`}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {options.map((o, i) => (
                <div key={o.id} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                  <button onClick={() => updateOption(o.id, 'correct', !o.correct)} style={{ width: 28, height: 28, borderRadius: questionType === 'single' ? 999 : 6, border: `1.5px solid ${o.correct ? 'var(--green)' : 'var(--line-2)'}`, background: o.correct ? 'var(--green)' : 'transparent', color: '#fff', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    {o.correct && <Icon name="check" size={14} />}
                  </button>
                  <div className="mono" style={{ width: 22, textAlign: 'center', color: 'var(--muted)', fontSize: 13, fontWeight: 600 }}>{String.fromCharCode(65 + i)}</div>
                  <input value={o.text} onChange={e => updateOption(o.id, 'text', e.target.value)} placeholder={`Phương án ${String.fromCharCode(65 + i)}`} style={{ ...selectStyle, flex: 1 }} />
                  <button onClick={() => removeOption(o.id)} disabled={options.length <= 2} className="btn btn-ghost btn-sm" style={{ padding: 8, opacity: options.length <= 2 ? 0.3 : 1 }}><Icon name="trash" size={13} /></button>
                </div>
              ))}
              <button onClick={addOption} className="btn btn-ghost btn-sm" style={{ alignSelf: 'flex-start', marginTop: 4 }}>
                <Icon name="plus" size={13} /> Thêm phương án
              </button>
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 8 }}>
              <Icon name="alert" size={11} style={{ marginRight: 4 }} /> Tick vào ô bên trái để đánh dấu đáp án đúng.
            </div>
          </FormField>

          <FormField label="Giải thích (sẽ hiển thị sau khi học viên làm xong)">
            <textarea value={explanation} onChange={e => setExplanation(e.target.value)} placeholder="Giải thích tại sao đáp án đúng, có thể thêm ví dụ hoặc tham chiếu tới bài giảng..." style={{ ...selectStyle, minHeight: 64, resize: 'vertical', fontFamily: 'inherit' }} />
          </FormField>

          <div style={{ padding: 14, background: 'var(--bg-2)', borderRadius: 10, marginTop: 22, fontSize: 12.5, color: 'var(--muted)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <Icon name="sparkle" size={14} style={{ flexShrink: 0, marginTop: 1, color: 'var(--accent)' }}/>
            <div>
              <strong style={{ color: 'var(--ink)' }}>Mẹo:</strong> Câu hỏi hay nên có 4 phương án, các phương án nhiễu phải hợp lý. Tránh dùng "Tất cả đáp án trên" hoặc "Không đáp án nào đúng". Giải thích rõ giúp học viên học tốt hơn sau khi làm.
            </div>
          </div>
        </div>

        <div style={{ padding: '16px 28px', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'sticky', bottom: 0, background: 'var(--card)' }}>
          <div style={{ fontSize: 12, color: 'var(--muted)' }}>
            {canSave ? <span style={{ color: 'var(--green)' }}><Icon name="check" size={11} /> Sẵn sàng lưu</span> : 'Vui lòng nhập câu hỏi, ≥2 phương án, ≥1 đáp án đúng'}
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={onClose} className="btn btn-ghost">Huỷ</button>
            {!editing && <button onClick={() => handleSave(true)} disabled={!canSave} className="btn btn-ghost" style={{ opacity: canSave ? 1 : 0.5, borderColor: 'var(--line-2)' }}>Lưu và thêm câu mới</button>}
            <button onClick={() => handleSave(false)} disabled={!canSave} className="btn btn-primary" style={{ opacity: canSave ? 1 : 0.5 }}><Icon name="save" size={13} /> {editing ? 'Lưu thay đổi' : 'Lưu câu hỏi'}</button>
          </div>
        </div>
      </div>
    </div>
  );
};

const FormField = ({ label, children }) => (
  <div style={{ marginBottom: 14 }}>
    <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>{label}</label>
    {children}
  </div>
);

const selectStyle = {
  width: '100%',
  padding: '9px 12px',
  border: '1px solid var(--line-2)',
  borderRadius: 8,
  background: 'var(--card)',
  color: 'var(--ink)',
  outline: 'none',
  fontSize: 13.5,
};

const QUESTION_TEXTS = {
  'Q0142': 'Cú pháp SELECT ... FROM ... WHERE nào sau đây đúng?',
  'Q0143': 'INNER JOIN và LEFT JOIN khác nhau ở điểm nào?',
  'Q0144': 'Bảng có 3NF nhưng không 2NF là có thể không?',
  'Q0145': 'Trong ACID, "Isolation" đảm bảo điều gì?',
  'Q0146': 'Kết quả của câu SELECT DISTINCT là gì?',
  'Q0147': 'View trong SQL có thể cập nhật không?',
  'Q0148': 'Subquery tương quan khác non-correlated như nào?'
};

const TeacherBank = () => {
  const [sel, setSel] = React.useState(new Set());
  const [modalOpen, setModalOpen] = React.useState(false);
  const [editingId, setEditingId] = React.useState(null);
  const [previewingId, setPreviewingId] = React.useState(null);
  const [confirmDelete, setConfirmDelete] = React.useState(null);
  const [hiddenIds, setHiddenIds] = React.useState(new Set());
  const [toast, setToast] = React.useState(null);
  const showToast = (msg, tone) => { setToast({ msg, tone }); setTimeout(() => setToast(null), 2200); };
  const toggle = (id) => { const s = new Set(sel); s.has(id) ? s.delete(id) : s.add(id); setSel(s); };
  const visibleBank = QUESTION_BANK.filter(q => !hiddenIds.has(q.id));
  return (
    <>
      <Topbar title="Ngân hàng câu hỏi" breadcrumb={['Giảng dạy', 'Cơ sở dữ liệu']}>
        <button className="btn btn-ghost btn-sm"><Icon name="upload" size={13} /> Import Excel</button>
        <button className="btn btn-primary btn-sm" onClick={() => setModalOpen(true)}><Icon name="plus" size={13} /> Thêm câu hỏi</button>
      </Topbar>
      <div className="page">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 20 }}>
          <StatCard label="Tổng câu hỏi" value="312" sub="Môn IT202 — Cơ sở dữ liệu" />
          <StatCard label="Dễ / Trung bình / Khó" value="86/158/68" sub="Phân bố độ khó" />
          <StatCard label="Chủ đề" value="9" sub="SQL, Chuẩn hoá, Transaction..." />
          <StatCard label="Đã sử dụng cho đề" value="248" sub="79% câu đang được dùng" />
        </div>

        <div className="card">
          <div style={{ padding: 16, display: 'flex', gap: 10, alignItems: 'center', borderBottom: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 12px', border: '1px solid var(--line-2)', borderRadius: 8, flex: 1, maxWidth: 320 }}>
              <Icon name="search" size={14} style={{ color: 'var(--muted)' }}/>
              <input placeholder="Tìm theo mã câu, nội dung, chủ đề..." style={{ border: 'none', outline: 'none', background: 'transparent', flex: 1 }} />
            </div>
            <button className="btn btn-ghost btn-sm"><Icon name="filter" size={13} /> Chủ đề</button>
            <button className="btn btn-ghost btn-sm"><Icon name="filter" size={13} /> Độ khó</button>
            <div style={{ flex: 1 }}/>
            {sel.size > 0 && <span style={{ fontSize: 12, color: 'var(--muted)' }}>Đã chọn {sel.size} câu</span>}
            <button className="btn btn-ghost btn-sm" disabled={sel.size === 0}><Icon name="send" size={13} /> Thêm vào đề</button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '40px 96px 1fr 110px 96px 68px 70px 90px 48px', padding: '12px 16px', fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.08em', borderBottom: '1px solid var(--line)' }}>
            <div></div><div>Mã</div><div>Nội dung tóm tắt</div><div>Chủ đề</div><div>Độ khó</div><div>Loại</div><div>Lượt dùng</div><div>Cập nhật</div><div></div>
          </div>
          {visibleBank.map((q, i) => (
            <div key={q.id} style={{ display: 'grid', gridTemplateColumns: '40px 96px 1fr 110px 96px 68px 70px 90px 48px', padding: '14px 16px', borderBottom: i < visibleBank.length - 1 ? '1px solid var(--line)' : 'none', alignItems: 'center', fontSize: 13, minWidth: 0 }}>
              <div onClick={() => toggle(q.id)} style={{ cursor: 'pointer' }}><input type="checkbox" checked={sel.has(q.id)} onChange={() => {}} /></div>
              <div className="mono" style={{ color: 'var(--muted)' }}>{q.id}</div>
              <div style={{ minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', paddingRight: 12 }}>{QUESTION_TEXTS[q.id]}</div>
              <div style={{ minWidth: 0 }}><span className="chip chip-soft" style={{ maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'inline-block' }}>{q.topic}</span></div>
              <div><span className={`chip ${q.diff === 'Dễ' ? 'chip-green' : q.diff === 'Trung bình' ? 'chip-gold' : 'chip-rose'}`}>{q.diff}</span></div>
              <div style={{ fontSize: 12, color: 'var(--muted)' }}>{q.type}</div>
              <div className="mono" style={{ fontSize: 12 }}>{q.used}</div>
              <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{q.updated}</div>
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <RowMenu
                  onPreview={() => setPreviewingId(q.id)}
                  onEdit={() => setEditingId(q.id)}
                  onDuplicate={() => showToast(`Đã nhân bản ${q.id} → Q0${150 + i}`, 'green')}
                  onDelete={() => setConfirmDelete(q)}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
      {modalOpen && <AddQuestionModal onClose={() => setModalOpen(false)} />}
      {editingId && <AddQuestionModal editingId={editingId} onClose={() => setEditingId(null)} />}
      {previewingId && <QuestionPreviewModal qid={previewingId} onEdit={() => { setEditingId(previewingId); setPreviewingId(null); }} onClose={() => setPreviewingId(null)} />}
      {confirmDelete && (
        <ConfirmDialog
          question={confirmDelete}
          onConfirm={() => { setHiddenIds(new Set([...hiddenIds, confirmDelete.id])); showToast(`Đã xoá câu ${confirmDelete.id}`, 'rose'); setConfirmDelete(null); }}
          onCancel={() => setConfirmDelete(null)}
        />
      )}
      {toast && (
        <div className="fadein" style={{ position: 'fixed', bottom: 28, left: '50%', transform: 'translateX(-50%)', background: 'var(--ink)', color: '#fff', padding: '11px 18px', borderRadius: 10, fontSize: 13, display: 'flex', alignItems: 'center', gap: 10, boxShadow: '0 12px 30px rgba(0,0,0,0.25)', zIndex: 999 }}>
          <div style={{ width: 8, height: 8, borderRadius: 999, background: toast.tone === 'rose' ? 'var(--rose)' : 'var(--green)' }}/>
          {toast.msg}
        </div>
      )}
    </>
  );
};

const IconBtn = ({ icon, title, onClick, tone }) => (
  <button
    onClick={onClick}
    title={title}
    style={{
      width: 30, height: 30, borderRadius: 7, display: 'grid', placeItems: 'center',
      border: '1px solid var(--line-2)', background: 'var(--card)',
      color: tone === 'danger' ? 'var(--rose)' : 'var(--ink-2)',
      cursor: 'pointer', transition: 'all 0.15s',
    }}
    onMouseEnter={e => { e.currentTarget.style.background = tone === 'danger' ? 'var(--rose-soft)' : 'var(--bg-2)'; e.currentTarget.style.borderColor = tone === 'danger' ? 'var(--rose)' : 'var(--ink-3)'; }}
    onMouseLeave={e => { e.currentTarget.style.background = 'var(--card)'; e.currentTarget.style.borderColor = 'var(--line-2)'; }}
  >
    <Icon name={icon} size={13} />
  </button>
);

const RowMenu = ({ onPreview, onEdit, onDuplicate, onDelete }) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [open]);
  const items = [
    { ic: 'eye', label: 'Xem trước', onClick: onPreview },
    { ic: 'edit', label: 'Chỉnh sửa', onClick: onEdit },
    { ic: 'copy', label: 'Nhân bản', onClick: onDuplicate },
    { ic: 'send', label: 'Thêm vào đề thi', onClick: () => {} },
    { sep: true },
    { ic: 'trash', label: 'Xoá câu hỏi', onClick: onDelete, danger: true },
  ];
  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button
        onClick={e => { e.stopPropagation(); setOpen(!open); }}
        title="Thao tác"
        style={{
          width: 30, height: 30, borderRadius: 7, display: 'grid', placeItems: 'center',
          border: '1px solid ' + (open ? 'var(--ink-3)' : 'transparent'),
          background: open ? 'var(--bg-2)' : 'transparent',
          color: 'var(--ink-2)', cursor: 'pointer', transition: 'all 0.15s',
        }}
        onMouseEnter={e => { if (!open) e.currentTarget.style.background = 'var(--bg-2)'; }}
        onMouseLeave={e => { if (!open) e.currentTarget.style.background = 'transparent'; }}
      >
        <Icon name="more" size={15} />
      </button>
      {open && (
        <div className="fadein" style={{
          position: 'absolute', top: 36, right: 0, minWidth: 200,
          background: 'var(--card)', border: '1px solid var(--line-2)', borderRadius: 10,
          boxShadow: '0 12px 36px rgba(0,0,0,0.16)', padding: 6, zIndex: 50,
        }}>
          {items.map((it, i) => it.sep ? (
            <div key={i} style={{ height: 1, background: 'var(--line)', margin: '4px 2px' }}/>
          ) : (
            <button
              key={i}
              onClick={() => { setOpen(false); it.onClick(); }}
              style={{
                width: '100%', display: 'flex', alignItems: 'center', gap: 10,
                padding: '9px 12px', borderRadius: 7, border: 'none',
                background: 'transparent', cursor: 'pointer', fontSize: 13,
                color: it.danger ? 'var(--rose)' : 'var(--ink)', textAlign: 'left',
              }}
              onMouseEnter={e => e.currentTarget.style.background = it.danger ? 'var(--rose-soft)' : 'var(--bg-2)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <Icon name={it.ic} size={14} /> {it.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

const QuestionPreviewModal = ({ qid, onEdit, onClose }) => {
  const q = QUESTION_BANK.find(x => x.id === qid);
  const text = QUESTION_TEXTS[qid];
  // Mock answers for preview
  const mockOptions = {
    'Q0142': [
      { t: 'SELECT * FROM users WHERE age > 18', correct: true },
      { t: 'SELECT * WHERE age > 18 FROM users', correct: false },
      { t: 'FROM users SELECT * WHERE age > 18', correct: false },
      { t: 'WHERE age > 18 SELECT * FROM users', correct: false },
    ],
    'Q0143': [
      { t: 'INNER JOIN chỉ trả về bản ghi khớp ở cả 2 bảng', correct: true },
      { t: 'LEFT JOIN trả về tất cả bản ghi bên trái và bản ghi khớp bên phải', correct: true },
      { t: 'INNER JOIN nhanh hơn LEFT JOIN trong mọi trường hợp', correct: false },
      { t: 'LEFT JOIN chỉ dùng được với 2 bảng', correct: false },
    ],
  }[qid] || [
    { t: 'Phương án A (đáp án đúng mẫu)', correct: true },
    { t: 'Phương án B (mẫu)', correct: false },
    { t: 'Phương án C (mẫu)', correct: false },
    { t: 'Phương án D (mẫu)', correct: false },
  ];
  const correctCount = mockOptions.filter(o => o.correct).length;

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(10,10,10,0.5)', backdropFilter: 'blur(4px)', display: 'grid', placeItems: 'center', padding: 32, zIndex: 1000 }} className="fadein" onClick={onClose}>
      <div className="card" style={{ width: '100%', maxWidth: 720, maxHeight: '90vh', overflow: 'auto', boxShadow: '0 40px 80px rgba(0,0,0,0.3)' }} onClick={e => e.stopPropagation()}>
        <div style={{ padding: '18px 26px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{qid}</span>
            <span className="chip chip-soft">{q.topic}</span>
            <span className={`chip ${q.diff === 'Dễ' ? 'chip-green' : q.diff === 'Trung bình' ? 'chip-gold' : 'chip-rose'}`}>{q.diff}</span>
            <span style={{ fontSize: 11.5, color: 'var(--muted)' }}>{q.type} · {correctCount} đáp án đúng</span>
          </div>
          <button onClick={onClose} className="btn btn-ghost btn-sm" style={{ padding: 8 }}><Icon name="x" size={16} /></button>
        </div>

        <div style={{ padding: 26 }}>
          <div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 10 }}>Nội dung câu hỏi</div>
          <div className="serif" style={{ fontSize: 19, lineHeight: 1.5, marginBottom: 22 }}>{text}</div>

          <div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 10 }}>Các phương án</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {mockOptions.map((o, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '12px 14px', border: `1px solid ${o.correct ? 'var(--green)' : 'var(--line)'}`, background: o.correct ? 'var(--green-soft)' : 'var(--card)', borderRadius: 10 }}>
                <div style={{ width: 26, height: 26, borderRadius: 6, display: 'grid', placeItems: 'center', background: o.correct ? 'var(--green)' : 'var(--bg-2)', color: o.correct ? '#fff' : 'var(--muted)', fontSize: 12, fontWeight: 600, flexShrink: 0 }}>
                  {o.correct ? <Icon name="check" size={14} /> : String.fromCharCode(65 + i)}
                </div>
                <div style={{ flex: 1, fontSize: 14, color: o.correct ? 'var(--green)' : 'var(--ink)' }}>{o.t}</div>
                {o.correct && <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--green)' }}>ĐÁP ÁN ĐÚNG</span>}
              </div>
            ))}
          </div>

          <div style={{ marginTop: 20, padding: 14, background: 'var(--bg-2)', borderRadius: 10, fontSize: 13, lineHeight: 1.5 }}>
            <div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 6 }}>Giải thích</div>
            Đáp án đúng dựa trên thứ tự chuẩn của mệnh đề SQL. Học viên cần nắm vững thứ tự SELECT → FROM → WHERE và phân biệt với thứ tự thực thi logic của truy vấn.
          </div>

          <div style={{ display: 'flex', gap: 24, marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--line)', fontSize: 12.5, color: 'var(--muted)' }}>
            <div><strong style={{ color: 'var(--ink-2)' }}>{q.used}</strong> lượt dùng</div>
            <div>Cập nhật: <strong style={{ color: 'var(--ink-2)' }}>{q.updated}</strong></div>
            <div>Điểm: <strong style={{ color: 'var(--ink-2)' }}>0.25</strong></div>
          </div>
        </div>

        <div style={{ padding: '14px 26px', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button onClick={onClose} className="btn btn-ghost">Đóng</button>
          <button onClick={onEdit} className="btn btn-primary"><Icon name="edit" size={13} /> Chỉnh sửa</button>
        </div>
      </div>
    </div>
  );
};

const ConfirmDialog = ({ question, onConfirm, onCancel }) => (
  <div style={{ position: 'fixed', inset: 0, background: 'rgba(10,10,10,0.55)', backdropFilter: 'blur(4px)', display: 'grid', placeItems: 'center', padding: 32, zIndex: 1100 }} className="fadein" onClick={onCancel}>
    <div className="card" style={{ width: '100%', maxWidth: 440, padding: 24 }} onClick={e => e.stopPropagation()}>
      <div style={{ display: 'flex', gap: 14, marginBottom: 16 }}>
        <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--rose-soft)', color: 'var(--rose)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
          <Icon name="alert" size={20} />
        </div>
        <div>
          <div className="serif" style={{ fontSize: 18, marginBottom: 4 }}>Xoá câu hỏi {question.id}?</div>
          <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.5 }}>
            Câu này đã được dùng <strong style={{ color: 'var(--ink-2)' }}>{question.used} lượt</strong> trong các đề thi. Việc xoá không ảnh hưởng tới các đề đã giao nhưng sẽ không thể chọn lại.
          </div>
        </div>
      </div>
      <div style={{ padding: 12, background: 'var(--bg-2)', borderRadius: 8, fontSize: 13, marginBottom: 18 }}>{QUESTION_TEXTS[question.id]}</div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
        <button onClick={onCancel} className="btn btn-ghost">Huỷ</button>
        <button onClick={onConfirm} className="btn" style={{ background: 'var(--rose)', color: '#fff', border: '1px solid var(--rose)' }}><Icon name="trash" size={13} /> Xoá vĩnh viễn</button>
      </div>
    </div>
  </div>
);

Object.assign(window, { TeacherDashboard, TeacherBank, AddQuestionModal });