// Page 4: Onboarding - 首次使用引导页
import { ChevronRightIcon } from 'lucide-react';

const steps = [
  {
    emoji: '📖',
    step: 1,
    title: '建立你的知识库',
    desc: '上传资料、粘贴文本或手动添加，让知习帮你整理知识体系',
    highlight: '导入 PDF · 粘贴笔记 · 链接导入',
  },
  {
    emoji: '🤔',
    step: 2,
    title: '主动输出 · 真实检验',
    desc: 'AI 发起回忆测试，用自己的话解释知识点，检验真实掌握程度',
    highlight: '回忆测试 · 费曼解释 · AI 评分',
  },
  {
    emoji: '🎯',
    step: 3,
    title: 'AI 找到薄弱点',
    desc: '智能分析你的输出，精准定位哪些知识点还需要巩固',
    highlight: '薄弱分析 · 待巩固项 · 知识图谱',
  },
];

const OnboardingPage = () => {
  return (
    <div
      data-cmp="OnboardingPage"
      className="absolute inset-0 flex flex-col"
      style={{
        background: '#0F0F1A',
        paddingTop: '44px',
      }}
    >
      {/* Progress indicator */}
      <div className="flex items-center justify-center gap-2 pt-6 pb-4">
        {[1, 2, 3].map((i) => (
          <div
            key={i}
            style={{
              height: '4px',
              width: i === 1 ? '24px' : '8px',
              borderRadius: '2px',
              background: i === 1 ? '#7C6EFA' : 'rgba(255,255,255,0.15)',
              transition: 'all 0.3s',
            }}
          />
        ))}
      </div>

      {/* Top illustration area */}
      <div
        className="relative mx-6 mt-2"
        style={{
          height: '200px',
          borderRadius: '24px',
          background: 'linear-gradient(135deg, rgba(124,110,250,0.15) 0%, rgba(249,115,22,0.08) 100%)',
          border: '1px solid rgba(124,110,250,0.2)',
          overflow: 'hidden',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {/* Decorative circles */}
        <div className="absolute" style={{ top: '-40px', right: '-40px', width: '160px', height: '160px', borderRadius: '50%', background: 'rgba(124,110,250,0.1)' }} />
        <div className="absolute" style={{ bottom: '-30px', left: '-20px', width: '120px', height: '120px', borderRadius: '50%', background: 'rgba(249,115,22,0.08)' }} />

        {/* Core content */}
        <div className="relative flex flex-col items-center">
          <div
            style={{
              width: '72px',
              height: '72px',
              borderRadius: '20px',
              background: 'linear-gradient(135deg, #7C6EFA, #F97316)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '36px',
              boxShadow: '0 12px 32px rgba(124,110,250,0.4)',
            }}
          >
            {steps[0].emoji}
          </div>
          {/* Learning loop diagram */}
          <div className="flex items-center gap-2 mt-5">
            {['输入', '输出', 'AI 分析', '复习'].map((s, i) => (
              <div key={i} className="flex items-center gap-1">
                <div
                  style={{
                    padding: '4px 8px',
                    background: i === 0 ? 'rgba(124,110,250,0.4)' : 'rgba(255,255,255,0.08)',
                    borderRadius: '8px',
                    fontSize: '11px',
                    fontWeight: '600',
                    color: i === 0 ? '#C4B8FF' : 'rgba(240,240,255,0.5)',
                    whiteSpace: 'nowrap',
                  }}
                >
                  {s}
                </div>
                {i < 3 && (
                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                    <path d="M2 5h6M6 3l2 2-2 2" stroke="rgba(240,240,255,0.25)" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Steps */}
      <div className="flex-1 overflow-y-auto px-6 mt-6 flex flex-col gap-4">
        {steps.map((s, i) => (
          <div
            key={i}
            className="flex items-start gap-4 p-4"
            style={{
              background: i === 0 ? 'rgba(124,110,250,0.1)' : 'rgba(255,255,255,0.03)',
              border: `1px solid ${i === 0 ? 'rgba(124,110,250,0.3)' : 'rgba(255,255,255,0.06)'}`,
              borderRadius: '16px',
            }}
          >
            <div
              style={{
                width: '32px',
                height: '32px',
                borderRadius: '10px',
                background: i === 0 ? 'rgba(124,110,250,0.3)' : 'rgba(255,255,255,0.06)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '16px',
                flexShrink: 0,
                border: `1px solid ${i === 0 ? 'rgba(124,110,250,0.4)' : 'transparent'}`,
              }}
            >
              {s.emoji}
            </div>
            <div>
              <p style={{ fontSize: '14px', fontWeight: '700', color: i === 0 ? '#F0F0FF' : 'rgba(240,240,255,0.7)', marginBottom: '3px' }}>
                <span style={{ color: '#7C6EFA', marginRight: '6px' }}>0{s.step}</span>{s.title}
              </p>
              <p style={{ fontSize: '12px', color: 'rgba(240,240,255,0.4)', lineHeight: '1.5' }}>{s.desc}</p>
              <p style={{ fontSize: '11px', color: '#7C6EFA', marginTop: '4px', fontWeight: '600' }}>{s.highlight}</p>
            </div>
          </div>
        ))}
      </div>

      {/* Bottom CTA */}
      <div className="px-7 pb-10 pt-4">
        <button
          className="w-full flex items-center justify-center gap-2"
          style={{
            height: '56px',
            borderRadius: '18px',
            background: 'linear-gradient(135deg, #7C6EFA 0%, #9B8BFF 100%)',
            boxShadow: '0 8px 32px rgba(124,110,250,0.4)',
            border: 'none',
            fontSize: '16px',
            fontWeight: '700',
            color: 'white',
          }}
        >
          下一步
          <ChevronRightIcon size={20} style={{ color: 'white' }} />
        </button>
        <p style={{ textAlign: 'center', marginTop: '12px', fontSize: '12px', color: 'rgba(240,240,255,0.3)' }}>
          跳过引导，直接开始
        </p>
      </div>
    </div>
  );
};

export default OnboardingPage;