// 答题页组件
function ExamPage({ questions, answers, setAnswers, onSubmit, onBackToHome, userName, startTime }) {
  const [currentIndex, setCurrentIndex] = React.useState(0);
  const [showSubmitConfirm, setShowSubmitConfirm] = React.useState(false);
  const [elapsed, setElapsed] = React.useState(0);

  // 计时器
  React.useEffect(() => {
    const tick = () => {
      const now = Date.now();
      setElapsed(Math.floor((now - startTime) / 1000));
    };
    tick();
    const timer = setInterval(tick, 1000);
    return () => clearInterval(timer);
  }, [startTime]);

  const formatTime = (secs) => {
    const h = Math.floor(secs / 3600);
    const m = Math.floor((secs % 3600) / 60);
    const s = secs % 60;
    const pad = (n) => String(n).padStart(2, '0');
    if (h > 0) return `${h}:${pad(m)}:${pad(s)}`;
    return `${pad(m)}:${pad(s)}`;
  };

  const currentQ = questions[currentIndex];
  const total = questions.length;
  const answeredCount = Object.keys(answers).filter((k) => {
    const v = answers[k];
    if (v === undefined || v === null) return false;
    if (Array.isArray(v)) return v.length > 0;
    if (typeof v === 'object' && v !== null) return Object.keys(v).length > 0;
    if (typeof v === 'string') return v.trim().length > 0;
    return true;
  }).length;

  const progress = (answeredCount / total) * 100;

  const goPrev = () => {
    if (currentIndex > 0) setCurrentIndex(currentIndex - 1);
  };

  const goNext = () => {
    if (currentIndex < total - 1) setCurrentIndex(currentIndex + 1);
  };

  // 处理单选
  const handleSingleSelect = (qid, key) => {
    setAnswers({ ...answers, [qid]: key });
  };

  // 处理多选
  const handleMultiSelect = (qid, key) => {
    const current = (answers[qid] && Array.isArray(answers[qid]))
      ? [...answers[qid]]
      : [];
    const idx = current.indexOf(key);
    if (idx > -1) {
      current.splice(idx, 1);
    } else {
      current.push(key);
    }
    setAnswers({ ...answers, [qid]: current });
  };

  // 处理判断
  const handleJudge = (qid, val) => {
    setAnswers({ ...answers, [qid]: val });
  };

  // 处理匹配题
  const handleMatch = (qid, brandKey, keywordKey) => {
    const current = (answers[qid] && typeof answers[qid] === 'object')
      ? { ...answers[qid] }
      : {};
    current[brandKey] = keywordKey;
    setAnswers({ ...answers, [qid]: current });
  };

  // 处理开放题
  const handleOpen = (qid, text) => {
    setAnswers({ ...answers, [qid]: text });
  };

  const isAnswered = (qid) => {
    const v = answers[qid];
    if (v === undefined || v === null) return false;
    if (Array.isArray(v)) return v.length > 0;
    if (typeof v === 'object' && v !== null && !Array.isArray(v))
      return Object.keys(v).length > 0;
    if (typeof v === 'string') return v.trim().length > 0;
    return true;
  };

  const getCategoryBadgeColor = (type) => {
    const colors = {
      single: { bg: '#f5efe0', text: '#8b6914' },
      multiple: { bg: '#eef0f5', text: '#5a6a8a' },
      judge: { bg: '#e8f0e8', text: '#4a7a4a' },
      match: { bg: '#f5e8ec', text: '#9a5a70' },
      open: { bg: '#f0ebe0', text: '#7a6a50' },
    };
    return colors[type] || colors.single;
  };

  const badgeColor = getCategoryBadgeColor(currentQ.type);

  return (
    <div style={examStyles.wrapper}>
      {/* 顶部栏 */}
      <div style={examStyles.header}>
        <div style={examStyles.headerLeft}>
          <button
            style={examStyles.backBtn}
            onClick={onBackToHome}
            className="gy-back-btn"
          >
            <svg
              viewBox="0 0 24 24"
              width="18"
              height="18"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M19 12H5M12 19l-7-7 7-7" />
            </svg>
            返回
          </button>
        </div>
        <div style={examStyles.headerCenter}>
          <img
            src="assets/group_y_logo.png"
            alt="Group y"
            style={examStyles.headerLogo}
          />
          <span style={examStyles.headerSep}>·</span>
          <span style={examStyles.headerTitle}>入职考核</span>
        </div>
        <div style={examStyles.headerRight}>
          <span style={examStyles.userNameBadge}>
            <svg
              viewBox="0 0 24 24"
              width="14"
              height="14"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              style={{ marginRight: '4px' }}
            >
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
              <circle cx="12" cy="7" r="4" />
            </svg>
            {userName}
          </span>
          <span style={examStyles.timerBadge}>
            <svg
              viewBox="0 0 24 24"
              width="14"
              height="14"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              style={{ marginRight: '4px' }}
            >
              <circle cx="12" cy="12" r="10" />
              <polyline points="12 6 12 12 16 14" />
            </svg>
            {formatTime(elapsed)}
          </span>
        </div>
      </div>

      {/* 进度条 */}
      <div style={examStyles.progressBar}>
        <div
          style={{
            ...examStyles.progressFill,
            width: `${progress}%`,
          }}
        ></div>
      </div>

      {/* 主内容区 */}
      <div style={examStyles.mainArea}>
        {/* 左侧题目卡 */}
        <div style={examStyles.questionCard}>
          {/* 题目标签 */}
          <div style={examStyles.qHeader}>
            <div
              style={{
                ...examStyles.qCategoryBadge,
                background: badgeColor.bg,
                color: badgeColor.text,
              }}
            >
              {currentQ.category}
            </div>
            <div style={examStyles.qScore}>
              {currentQ.score > 0 ? `${currentQ.score} 分` : '不计分'}
            </div>
          </div>

          {/* 题号 + 题干 */}
          <div style={examStyles.qBody}>
            <div style={examStyles.qNum}>
              <span style={examStyles.qNumText}>第 {currentQ.id} 题</span>
              <span style={examStyles.qNumTotal}> / {total}</span>
            </div>
            <div style={examStyles.qTitle}>{currentQ.question}</div>
          </div>

          {/* 选项区 — 按题型渲染 */}
          <div style={examStyles.optionsArea}>
            {currentQ.type === 'single' && (
              <OptionList
                options={currentQ.options}
                selected={answers[currentQ.id]}
                multi={false}
                onSelect={(k) => handleSingleSelect(currentQ.id, k)}
              />
            )}

            {currentQ.type === 'multiple' && (
              <OptionList
                options={currentQ.options}
                selected={answers[currentQ.id] || []}
                multi={true}
                onSelect={(k) => handleMultiSelect(currentQ.id, k)}
              />
            )}

            {currentQ.type === 'judge' && (
              <JudgeOptions
                value={answers[currentQ.id]}
                onChange={(v) => handleJudge(currentQ.id, v)}
              />
            )}

            {currentQ.type === 'match' && (
              <MatchGroup
                brands={currentQ.brands}
                keywords={currentQ.keywords}
                value={answers[currentQ.id] || {}}
                onChange={(bk, vk) => handleMatch(currentQ.id, bk, vk)}
              />
            )}

            {currentQ.type === 'open' && (
              <div style={examStyles.openArea}>
                <textarea
                  style={examStyles.openTextarea}
                  placeholder="请在此写下你的想法……"
                  value={answers[currentQ.id] || ''}
                  onChange={(e) => handleOpen(currentQ.id, e.target.value)}
                  rows={6}
                />
                <div style={examStyles.openHint}>开放题，不计入总分</div>
              </div>
            )}
          </div>

          {/* 底部导航 */}
          <div style={examStyles.qFooter}>
            <button
              style={{
                ...examStyles.navBtn,
                ...(currentIndex === 0 ? examStyles.navBtnDisabled : {}),
              }}
              onClick={goPrev}
              disabled={currentIndex === 0}
              className="gy-nav-btn"
            >
              <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M15 18l-6-6 6-6" />
              </svg>
              上一题
            </button>

            {currentIndex === total - 1 ? (
              <button
                style={examStyles.submitBtn}
                onClick={() => setShowSubmitConfirm(true)}
                className="gy-submit-btn"
              >
                提交试卷
              </button>
            ) : (
              <button
                style={examStyles.nextBtn}
                onClick={goNext}
                className="gy-next-btn"
              >
                下一题
                <svg
                  viewBox="0 0 24 24"
                  width="16"
                  height="16"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M9 18l6-6-6-6" />
                </svg>
              </button>
            )}
          </div>
        </div>


      </div>

      {/* 提交确认弹窗 */}
      {showSubmitConfirm && (
        <div style={examStyles.modalMask} onClick={() => setShowSubmitConfirm(false)}>
          <div
            style={examStyles.modalBox}
            onClick={(e) => e.stopPropagation()}
          >
            <div style={examStyles.modalTitle}>确认提交试卷？</div>
            <div style={examStyles.modalText}>
              你已完成 <strong style={{ color: '#8b6914' }}>{answeredCount}</strong> /{' '}
              {total} 道题
              {answeredCount < total - 1 && (
                <span style={{ display: 'block', marginTop: '8px', color: '#b8860b' }}>
                  还有 {total - answeredCount} 道题未作答
                </span>
              )}
            </div>
            <div style={examStyles.modalActions}>
              <button
                style={examStyles.modalCancel}
                onClick={() => setShowSubmitConfirm(false)}
                className="gy-modal-cancel"
              >
                继续答题
              </button>
              <button
                style={examStyles.modalConfirm}
                onClick={() => onSubmit(elapsed)}
                className="gy-modal-confirm"
              >
                确认提交
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// 选项列表（单选/多选通用）
function OptionList({ options, selected, multi, onSelect }) {
  const isSelected = (key) => {
    if (multi) {
      return Array.isArray(selected) && selected.includes(key);
    }
    return selected === key;
  };

  return (
    <div style={optionStyles.list}>
      {options.map((opt) => {
        const sel = isSelected(opt.key);
        return (
          <div
            key={opt.key}
            style={{
              ...optionStyles.item,
              ...(sel ? optionStyles.itemSelected : {}),
            }}
            onClick={() => onSelect(opt.key)}
            className={`gy-option ${sel ? 'gy-option-selected' : ''}`}
          >
            <div
              style={{
                ...optionStyles.indicator,
                ...(sel ? optionStyles.indicatorSelected : {}),
                borderRadius: multi ? '3px' : '50%',
              }}
            >
              {sel && (
                multi ? (
                  <svg
                    viewBox="0 0 24 24"
                    width="14"
                    height="14"
                    fill="none"
                    stroke="#fff"
                    strokeWidth="3"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <polyline points="20 6 9 17 4 12" />
                  </svg>
                ) : (
                  <div style={optionStyles.radioDot}></div>
                )
              )}
            </div>
            <div style={optionStyles.optKey}>{opt.key}.</div>
            <div style={optionStyles.optText}>{opt.text}</div>
          </div>
        );
      })}
    </div>
  );
}

// 判断题选项
function JudgeOptions({ value, onChange }) {
  return (
    <div style={judgeStyles.row}>
      <div
        style={{
          ...judgeStyles.item,
          ...(value === true ? judgeStyles.itemTrue : {}),
        }}
        onClick={() => onChange(true)}
        className={`gy-judge ${value === true ? 'gy-judge-true' : ''}`}
      >
        <div style={judgeStyles.iconWrap}>
          <svg
            viewBox="0 0 24 24"
            width="28"
            height="28"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </div>
        <div style={judgeStyles.label}>正确</div>
      </div>
      <div
        style={{
          ...judgeStyles.item,
          ...(value === false ? judgeStyles.itemFalse : {}),
        }}
        onClick={() => onChange(false)}
        className={`gy-judge ${value === false ? 'gy-judge-false' : ''}`}
      >
        <div style={judgeStyles.iconWrap}>
          <svg
            viewBox="0 0 24 24"
            width="28"
            height="28"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </div>
        <div style={judgeStyles.label}>错误</div>
      </div>
    </div>
  );
}

// 匹配题
function MatchGroup({ brands, keywords, value, onChange }) {
  const [selectedBrand, setSelectedBrand] = React.useState(null);

  const handleBrandClick = (bkey) => {
    setSelectedBrand(bkey);
  };

  const handleKeywordClick = (kkey) => {
    if (selectedBrand) {
      onChange(selectedBrand, kkey);
      setSelectedBrand(null);
    }
  };

  // 找出哪些关键字已被占用
  const usedKeywords = new Set(Object.values(value));

  return (
    <div style={matchStyles.wrapper}>
      <div style={matchStyles.col}>
        <div style={matchStyles.colTitle}>品牌</div>
        {brands.map((b) => {
          const isActive = selectedBrand === b.key;
          const matched = value[b.key];
          return (
            <div
              key={b.key}
              style={{
                ...matchStyles.brandItem,
                ...(isActive ? matchStyles.brandActive : {}),
                ...(matched ? matchStyles.brandMatched : {}),
              }}
              onClick={() => handleBrandClick(b.key)}
              className={`gy-match-brand ${isActive ? 'gy-brand-active' : ''}`}
            >
              <span style={matchStyles.brandNum}>{b.key}.</span>
              <span style={matchStyles.brandName}>{b.text}</span>
              {matched && (
                <span style={matchStyles.brandMatchTag}>{matched}</span>
              )}
            </div>
          );
        })}
      </div>

      <div style={matchStyles.col}>
        <div style={matchStyles.colTitle}>关键词</div>
        {keywords.map((k) => {
          const isUsed = usedKeywords.has(k.key);
          return (
            <div
              key={k.key}
              style={{
                ...matchStyles.keywordItem,
                ...(isUsed ? matchStyles.keywordUsed : {}),
              }}
              onClick={() => !isUsed && handleKeywordClick(k.key)}
              className={`gy-match-keyword ${isUsed ? 'gy-keyword-used' : ''}`}
            >
              <span style={matchStyles.keywordKey}>{k.key}.</span>
              <span style={matchStyles.keywordText}>{k.text}</span>
            </div>
          );
        })}
      </div>

      {selectedBrand && (
        <div style={matchStyles.hint}>
          请从右侧选择「{brands.find((b) => b.key === selectedBrand)?.text}」对应的关键词
        </div>
      )}
    </div>
  );
}

const examStyles = {
  wrapper: {
    minHeight: '100vh',
    background: '#f5efe6',
    fontFamily:
      '"Source Han Serif CN", "Noto Serif SC", "Songti SC", serif',
    display: 'flex',
    flexDirection: 'column',
  },
  header: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '14px 32px',
    background: '#fff',
    borderBottom: '1px solid #e8dcc8',
    boxShadow: '0 1px 2px rgba(60, 40, 20, 0.04)',
  },
  headerLeft: { flex: 1 },
  backBtn: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    padding: '6px 14px',
    border: '1px solid #d8cfc0',
    background: '#fff',
    color: '#5c4a2e',
    borderRadius: '2px',
    cursor: 'pointer',
    fontSize: '13px',
    fontFamily: 'inherit',
    transition: 'all 0.2s',
  },
  headerCenter: {
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
  },
  headerLogo: {
    height: '56px',
    objectFit: 'contain',
    verticalAlign: 'middle',
  },
  headerSep: { color: '#c4a878' },
  headerTitle: {
    fontSize: '14px',
    color: '#8b7355',
    letterSpacing: '2px',
  },
  headerRight: { flex: 1, textAlign: 'right', display: 'flex', justifyContent: 'flex-end', gap: '10px' },
  userNameBadge: {
    display: 'inline-flex',
    alignItems: 'center',
    padding: '5px 12px',
    background: '#f5efe0',
    color: '#8b6914',
    borderRadius: '20px',
    fontSize: '13px',
    fontWeight: '500',
  },
  timerBadge: {
    display: 'inline-flex',
    alignItems: 'center',
    padding: '5px 12px',
    background: '#eef0f5',
    color: '#5a6a8a',
    borderRadius: '20px',
    fontSize: '13px',
    fontWeight: '500',
    fontVariantNumeric: 'tabular-nums',
    fontFamily: '"Noto Sans SC", sans-serif',
  },
  progressBar: {
    height: '3px',
    background: '#e8dcc8',
    position: 'relative',
  },
  progressFill: {
    height: '100%',
    background: 'linear-gradient(90deg, #8b6914, #d4a853)',
    transition: 'width 0.3s ease',
  },
  mainArea: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    gap: '20px',
    padding: '32px',
    maxWidth: '900px',
    width: '100%',
    margin: '0 auto',
    boxSizing: 'border-box',
  },
  questionCard: {
    width: '100%',
    background: '#fff',
    borderRadius: '4px',
    boxShadow: '0 2px 8px rgba(60, 40, 20, 0.06)',
    padding: '36px 40px 28px',
    display: 'flex',
    flexDirection: 'column',
    minHeight: '520px',
  },
  qHeader: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '20px',
  },
  qCategoryBadge: {
    display: 'inline-block',
    padding: '4px 12px',
    fontSize: '12px',
    fontWeight: '500',
    borderRadius: '2px',
    letterSpacing: '1px',
  },
  qScore: {
    fontSize: '13px',
    color: '#9a8570',
    fontWeight: '500',
  },
  qBody: {
    marginBottom: '28px',
    borderBottom: '1px solid #f0e8d8',
    paddingBottom: '24px',
  },
  qNum: {
    fontSize: '13px',
    color: '#a08060',
    marginBottom: '12px',
    letterSpacing: '1px',
  },
  qNumText: {
    color: '#8b6914',
    fontWeight: '600',
  },
  qNumTotal: {
    color: '#c4a878',
  },
  qTitle: {
    fontSize: '20px',
    fontWeight: '600',
    color: '#3d2e15',
    lineHeight: '1.6',
  },
  optionsArea: {
    flex: 1,
  },
  openArea: {
    marginTop: '8px',
  },
  openTextarea: {
    width: '100%',
    padding: '16px',
    border: '1px solid #e0d0b0',
    borderRadius: '2px',
    fontSize: '15px',
    lineHeight: '1.7',
    fontFamily: 'inherit',
    color: '#3d2e15',
    resize: 'vertical',
    outline: 'none',
    transition: 'border-color 0.2s',
    boxSizing: 'border-box',
    background: '#fdfbf5',
  },
  openHint: {
    marginTop: '8px',
    fontSize: '12px',
    color: '#a08060',
    textAlign: 'right',
  },
  qFooter: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: '28px',
    paddingTop: '20px',
    borderTop: '1px solid #f0e8d8',
  },
  navBtn: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    padding: '10px 22px',
    border: '1px solid #d8cfc0',
    background: '#fff',
    color: '#5c4a2e',
    borderRadius: '2px',
    cursor: 'pointer',
    fontSize: '14px',
    fontFamily: 'inherit',
    transition: 'all 0.2s',
  },
  navBtnDisabled: {
    opacity: 0.4,
    cursor: 'not-allowed',
  },
  nextBtn: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    padding: '10px 24px',
    border: 'none',
    background: 'linear-gradient(135deg, #8b6914, #b8860b)',
    color: '#fff',
    borderRadius: '2px',
    cursor: 'pointer',
    fontSize: '14px',
    fontWeight: '500',
    fontFamily: 'inherit',
    transition: 'all 0.2s',
    boxShadow: '0 2px 8px rgba(139, 105, 20, 0.2)',
  },
  submitBtn: {
    padding: '10px 28px',
    border: 'none',
    background: 'linear-gradient(135deg, #6b4f10, #8b6914)',
    color: '#fff',
    borderRadius: '2px',
    cursor: 'pointer',
    fontSize: '14px',
    fontWeight: '600',
    fontFamily: 'inherit',
    letterSpacing: '2px',
    transition: 'all 0.2s',
    boxShadow: '0 2px 8px rgba(107, 79, 16, 0.3)',
  },
  modalMask: {
    position: 'fixed',
    inset: 0,
    background: 'rgba(60, 40, 20, 0.4)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 100,
    animation: 'fadeIn 0.2s ease',
  },
  modalBox: {
    background: '#fff',
    borderRadius: '4px',
    padding: '32px 40px',
    width: '400px',
    boxShadow: '0 8px 32px rgba(60, 40, 20, 0.2)',
  },
  modalTitle: {
    fontSize: '20px',
    fontWeight: '600',
    color: '#3d2e15',
    marginBottom: '16px',
  },
  modalText: {
    fontSize: '14px',
    color: '#5c4a2e',
    lineHeight: '1.7',
    marginBottom: '24px',
  },
  modalActions: {
    display: 'flex',
    gap: '12px',
    justifyContent: 'flex-end',
  },
  modalCancel: {
    padding: '10px 20px',
    border: '1px solid #d8cfc0',
    background: '#fff',
    color: '#5c4a2e',
    borderRadius: '2px',
    cursor: 'pointer',
    fontSize: '14px',
    fontFamily: 'inherit',
    transition: 'all 0.2s',
  },
  modalConfirm: {
    padding: '10px 24px',
    border: 'none',
    background: 'linear-gradient(135deg, #8b6914, #b8860b)',
    color: '#fff',
    borderRadius: '2px',
    cursor: 'pointer',
    fontSize: '14px',
    fontWeight: '500',
    fontFamily: 'inherit',
    transition: 'all 0.2s',
  },
};

const optionStyles = {
  list: {
    display: 'flex',
    flexDirection: 'column',
    gap: '12px',
  },
  item: {
    display: 'flex',
    alignItems: 'center',
    gap: '14px',
    padding: '16px 20px',
    border: '1px solid #e0d4c0',
    borderRadius: '2px',
    cursor: 'pointer',
    transition: 'all 0.15s ease',
    background: '#fdfbf5',
  },
  itemSelected: {
    borderColor: '#b8860b',
    background: '#faf3e0',
    boxShadow: '0 1px 4px rgba(139, 105, 20, 0.1)',
  },
  indicator: {
    width: '20px',
    height: '20px',
    border: '2px solid #c4a878',
    flexShrink: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    transition: 'all 0.15s',
  },
  indicatorSelected: {
    borderColor: '#8b6914',
    background: '#8b6914',
  },
  radioDot: {
    width: '8px',
    height: '8px',
    borderRadius: '50%',
    background: '#fff',
  },
  optKey: {
    fontSize: '15px',
    fontWeight: '600',
    color: '#8b6914',
    width: '20px',
    flexShrink: 0,
  },
  optText: {
    fontSize: '15px',
    color: '#3d2e15',
    lineHeight: '1.5',
    flex: 1,
  },
};

const judgeStyles = {
  row: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: '20px',
    maxWidth: '400px',
    margin: '20px auto 0',
  },
  item: {
    padding: '32px 20px',
    border: '2px solid #e0d4c0',
    borderRadius: '4px',
    cursor: 'pointer',
    textAlign: 'center',
    transition: 'all 0.15s ease',
    background: '#fdfbf5',
  },
  itemTrue: {
    borderColor: '#5a8a5a',
    background: '#eef5ee',
    color: '#3a6a3a',
  },
  itemFalse: {
    borderColor: '#b05a5a',
    background: '#f5eeee',
    color: '#8a3a3a',
  },
  iconWrap: {
    marginBottom: '12px',
  },
  label: {
    fontSize: '16px',
    fontWeight: '600',
    letterSpacing: '2px',
  },
};

const matchStyles = {
  wrapper: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: '20px',
    position: 'relative',
  },
  col: {
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
  },
  colTitle: {
    fontSize: '13px',
    fontWeight: '600',
    color: '#8b6914',
    marginBottom: '4px',
    paddingBottom: '8px',
    borderBottom: '1px solid #e0d4c0',
    letterSpacing: '1px',
  },
  brandItem: {
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
    padding: '12px 16px',
    border: '1px solid #e0d4c0',
    borderRadius: '2px',
    cursor: 'pointer',
    background: '#fdfbf5',
    transition: 'all 0.15s',
    position: 'relative',
  },
  brandActive: {
    borderColor: '#8b6914',
    background: '#faf3e0',
    boxShadow: '0 1px 4px rgba(139, 105, 20, 0.15)',
  },
  brandMatched: {
    borderColor: '#c4a878',
    background: '#f5efe0',
  },
  brandNum: {
    fontSize: '14px',
    fontWeight: '600',
    color: '#8b6914',
    width: '20px',
  },
  brandName: {
    fontSize: '14px',
    color: '#3d2e15',
    flex: 1,
  },
  brandMatchTag: {
    position: 'absolute',
    right: '-8px',
    top: '50%',
    transform: 'translateY(-50%)',
    width: '24px',
    height: '24px',
    borderRadius: '50%',
    background: '#b8860b',
    color: '#fff',
    fontSize: '12px',
    fontWeight: '600',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  keywordItem: {
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
    padding: '12px 16px',
    border: '1px solid #d8cfc0',
    borderRadius: '2px',
    cursor: 'pointer',
    background: '#fff',
    transition: 'all 0.15s',
  },
  keywordUsed: {
    opacity: 0.4,
    cursor: 'not-allowed',
    background: '#f5efe0',
  },
  keywordKey: {
    fontSize: '14px',
    fontWeight: '600',
    color: '#9a8570',
    width: '20px',
  },
  keywordText: {
    fontSize: '14px',
    color: '#5c4a2e',
    flex: 1,
  },
  hint: {
    gridColumn: '1 / -1',
    textAlign: 'center',
    padding: '10px',
    background: '#faf3e0',
    border: '1px solid #e0d0b0',
    borderRadius: '2px',
    fontSize: '13px',
    color: '#8b6914',
    marginTop: '4px',
  },
};

window.ExamPage = ExamPage;
window.examStyles = examStyles;