// 开始页组件
function StartPage({ onStart, onAdmin }) {
  const [name, setName] = React.useState('');
  const [error, setError] = React.useState('');

  const stats = [
    { label: '题目总数', value: '20', unit: '题' },
    { label: '满分', value: '100', unit: '分' },
    { label: '合格线', value: '80', unit: '分' },
  ];

  const categories = [
    { name: '单项选择题', count: '10 题', score: '50 分' },
    { name: '多项选择题', count: '3 题', score: '15 分' },
    { name: '判断题', count: '5 题', score: '25 分' },
    { name: '品牌匹配题', count: '1 题', score: '5 分' },
    { name: '品牌理念题', count: '1 题', score: '5 分' },
  ];

  return (
    <div style={startStyles.wrapper}>
      <div style={startStyles.card}>
        {/* 顶部装饰线 */}
        <div style={startStyles.topAccent}></div>

        {/* 品牌标识区 */}
        <div style={startStyles.brandSection}>
          <img
            src="assets/group_y_logo.png"
            alt="Group y"
            style={startStyles.brandLogo}
          />
          <div style={startStyles.brandSub}>品牌入职学习 · 考核试卷</div>
        </div>

        {/* 分隔线 */}
        <div style={startStyles.divider}>
          <span style={startStyles.dividerDot}></span>
          <span style={startStyles.dividerLine}></span>
          <span style={startStyles.dividerText}>考试说明</span>
          <span style={startStyles.dividerLine}></span>
          <span style={startStyles.dividerDot}></span>
        </div>

        {/* 核心数据 */}
        <div style={startStyles.statsRow}>
          {stats.map((s, i) => (
            <div key={i} style={startStyles.statItem}>
              <div style={startStyles.statValue}>
                {s.value}
                <span style={startStyles.statUnit}>{s.unit}</span>
              </div>
              <div style={startStyles.statLabel}>{s.label}</div>
            </div>
          ))}
        </div>

        {/* 题型分布 */}
        <div style={startStyles.categorySection}>
          <div style={startStyles.sectionTitle}>题型分布</div>
          <div style={startStyles.categoryList}>
            {categories.map((c, i) => (
              <div key={i} style={startStyles.categoryItem}>
                <div style={startStyles.categoryName}>
                  <span style={startStyles.categoryNum}>{i + 1}</span>
                  {c.name}
                </div>
                <div style={startStyles.categoryMeta}>
                  <span style={startStyles.categoryCount}>{c.count}</span>
                  <span style={startStyles.categoryScore}>{c.score}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 姓名输入 */}
        <div style={startStyles.nameSection}>
          <div style={startStyles.nameLabel}>
            请输入你的姓名<span style={startStyles.required}> *</span>
          </div>
          <input
            type="text"
            value={name}
            onChange={(e) => {
              setName(e.target.value);
              if (error) setError('');
            }}
            placeholder="请输入真实姓名"
            style={{
              ...startStyles.nameInput,
              ...(error ? startStyles.nameInputError : {}),
            }}
            maxLength={20}
            onKeyDown={(e) => {
              if (e.key === 'Enter') handleStartClick();
            }}
          />
          {error && <div style={startStyles.nameError}>{error}</div>}
        </div>

        {/* 注意事项 */}
        <div style={startStyles.noticeBox}>
          <div style={startStyles.noticeTitle}>温馨提示</div>
          <ul style={startStyles.noticeList}>
            <li style={startStyles.noticeItem}>
              请在学习完「Group y 品牌介绍」后再开始答题
            </li>
            <li style={startStyles.noticeItem}>
              共 20 道题，满分 100 分，80 分及以上为合格
            </li>
            <li style={startStyles.noticeItem}>
              最后一题为开放题，不计入总分
            </li>
            <li style={startStyles.noticeItem}>答题过程中可随时查看进度、返回修改</li>
          </ul>
        </div>

        {/* 开始按钮 */}
        <button style={startStyles.startBtn} onClick={handleStartClick} className="gy-start-btn">
          开始答题
          <svg
            viewBox="0 0 24 24"
            width="20"
            height="20"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            style={startStyles.btnIcon}
            className="gy-btn-icon"
          >
            <path d="M5 12h14M12 5l7 7-7 7" />
          </svg>
        </button>
      </div>

      {/* 底部管理员入口 */}
      <div style={startStyles.footer}>
        <button style={startStyles.adminLink} onClick={onAdmin} className="gy-admin-link">
          管理员入口
        </button>
      </div>
    </div>
  );

  function handleStartClick() {
    const trimmed = name.trim();
    if (!trimmed) {
      setError('请输入姓名后再开始答题');
      return;
    }
    if (trimmed.length < 2) {
      setError('姓名至少为 2 个字符');
      return;
    }
    onStart(trimmed);
  }
}

const startStyles = {
  wrapper: {
    minHeight: '100vh',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'flex-start',
    padding: '40px 20px 24px',
    background:
      'linear-gradient(135deg, #faf7f2 0%, #f5efe6 50%, #efe6d8 100%)',
    fontFamily:
      '"Source Han Serif CN", "Noto Serif SC", "Songti SC", serif',
    position: 'relative',
  },
  card: {
    width: '100%',
    maxWidth: '560px',
    background: '#ffffff',
    borderRadius: '4px',
    boxShadow:
      '0 1px 3px rgba(60, 40, 20, 0.06), 0 8px 32px rgba(60, 40, 20, 0.08)',
    position: 'relative',
    overflow: 'hidden',
    fontFamily:
      '"Source Han Serif CN", "Noto Serif SC", "Songti SC", serif',
    margin: 'auto 0',
  },
  topAccent: {
    height: '4px',
    background: 'linear-gradient(90deg, #b8860b 0%, #d4a853 50%, #b8860b 100%)',
  },
  brandSection: {
    textAlign: 'center',
    padding: '48px 40px 32px',
  },
  brandLogo: {
    height: '160px',
    maxWidth: '400px',
    objectFit: 'contain',
    marginBottom: '24px',
  },
  brandSub: {
    fontSize: '14px',
    color: '#8b7355',
    letterSpacing: '4px',
    fontWeight: '400',
  },
  divider: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '12px',
    padding: '0 40px',
    marginBottom: '28px',
  },
  dividerDot: {
    width: '4px',
    height: '4px',
    borderRadius: '50%',
    background: '#d4a853',
  },
  dividerLine: {
    flex: 1,
    height: '1px',
    background: 'linear-gradient(90deg, transparent 0%, #e0d0b0 50%, transparent 100%)',
    maxWidth: '80px',
  },
  dividerText: {
    fontSize: '13px',
    color: '#a08060',
    letterSpacing: '3px',
    fontWeight: '500',
  },
  statsRow: {
    display: 'flex',
    justifyContent: 'center',
    gap: '40px',
    padding: '0 40px 32px',
  },
  statItem: {
    textAlign: 'center',
  },
  statValue: {
    fontSize: '36px',
    fontWeight: '600',
    color: '#8b6914',
    lineHeight: 1,
    marginBottom: '6px',
  },
  statUnit: {
    fontSize: '14px',
    fontWeight: '400',
    marginLeft: '2px',
    color: '#a08060',
  },
  statLabel: {
    fontSize: '12px',
    color: '#9a8570',
    letterSpacing: '1px',
  },
  categorySection: {
    padding: '0 40px 28px',
  },
  sectionTitle: {
    fontSize: '14px',
    fontWeight: '600',
    color: '#5c4a2e',
    marginBottom: '12px',
    letterSpacing: '1px',
  },
  categoryList: {
    border: '1px solid #e8dcc8',
    borderRadius: '2px',
    overflow: 'hidden',
  },
  categoryItem: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '10px 16px',
    borderBottom: '1px solid #f0e8d8',
    fontSize: '14px',
  },
  categoryName: {
    color: '#5c4a2e',
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
  },
  categoryNum: {
    width: '20px',
    height: '20px',
    borderRadius: '50%',
    background: '#f5efe0',
    color: '#8b6914',
    fontSize: '11px',
    fontWeight: '600',
    textAlign: 'center',
    lineHeight: '20px',
  },
  categoryMeta: {
    display: 'flex',
    gap: '12px',
    fontSize: '12px',
  },
  categoryCount: {
    color: '#9a8570',
  },
  categoryScore: {
    color: '#b8860b',
    fontWeight: '500',
    minWidth: '40px',
    textAlign: 'right',
  },
  noticeBox: {
    margin: '0 40px 32px',
    padding: '16px 20px',
    background: '#faf6ed',
    borderLeft: '3px solid #d4a853',
    borderRadius: '0 2px 2px 0',
  },
  noticeTitle: {
    fontSize: '13px',
    fontWeight: '600',
    color: '#8b6914',
    marginBottom: '8px',
  },
  noticeList: {
    margin: 0,
    paddingLeft: '18px',
    color: '#6b5a40',
    fontSize: '13px',
    lineHeight: '1.8',
  },
  noticeItem: {
    marginBottom: '2px',
  },
  nameSection: {
    margin: '0 40px 24px',
  },
  nameLabel: {
    fontSize: '14px',
    fontWeight: '500',
    color: '#5c4a2e',
    marginBottom: '8px',
  },
  required: {
    color: '#c05a5a',
    marginLeft: '2px',
  },
  nameInput: {
    width: '100%',
    padding: '12px 16px',
    border: '1px solid #e0d0b0',
    borderRadius: '2px',
    fontSize: '15px',
    fontFamily: 'inherit',
    color: '#3d2e15',
    background: '#fdfbf5',
    outline: 'none',
    transition: 'border-color 0.2s, box-shadow 0.2s',
    boxSizing: 'border-box',
  },
  nameInputError: {
    borderColor: '#c07a7a',
    background: '#fdf5f5',
  },
  nameError: {
    marginTop: '6px',
    fontSize: '12px',
    color: '#c05a5a',
  },
  startBtn: {
    width: 'calc(100% - 80px)',
    margin: '0 40px 40px',
    padding: '14px 32px',
    background: 'linear-gradient(135deg, #8b6914 0%, #b8860b 100%)',
    color: '#fff',
    border: 'none',
    borderRadius: '2px',
    fontSize: '16px',
    fontWeight: '500',
    letterSpacing: '4px',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '8px',
    transition: 'all 0.2s ease',
    boxShadow: '0 4px 12px rgba(139, 105, 20, 0.25)',
    fontFamily: 'inherit',
  },
  btnIcon: {
    transition: 'transform 0.2s ease',
  },
  footer: {
    width: '100%',
    textAlign: 'center',
    marginTop: 'auto',
    paddingTop: '24px',
    flexShrink: 0,
  },
  adminLink: {
    background: 'none',
    border: 'none',
    color: '#a08060',
    fontSize: '12px',
    cursor: 'pointer',
    fontFamily: 'inherit',
    letterSpacing: '2px',
    opacity: 0.6,
    transition: 'opacity 0.2s',
    padding: '8px',
  },
};

// Hover styles via inline event handler would be verbose; add a style tag later.
window.StartPage = StartPage;
window.startStyles = startStyles;