// Page 22: Edit Knowledge - 编辑知识点页
import { ArrowLeftIcon, SparklesIcon, TrashIcon, CheckIcon, TagIcon, PlusIcon } from 'lucide-react';

const activeTags = ['深度学习', '架构', '核心'];
const suggestedTags = ['公式', '方法', '优化', '理论'];

const EditKnowledgePage = () => {
  return (
    <div
      data-cmp="EditKnowledgePage"
      className="absolute inset-0 flex flex-col"
      style={{ background: '#0F0F1A', paddingTop: '44px' }}
    >
      {/* Nav */}
      <div className="flex items-center justify-between px-4 py-3"
        style={{ borderBottom: '1px solid rgba(255,255,255,0.06)' }}
      >
        <button
          style={{
            width: '36px', height: '36px', borderRadius: '10px',
            background: 'rgba(255,255,255,0.05)',
            border: '1px solid rgba(255,255,255,0.08)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}
        >
          <ArrowLeftIcon size={18} style={{ color: 'rgba(240,240,255,0.7)' }} />
        </button>
        <p style={{ fontSize: '15px', fontWeight: '700', color: '#F0F0FF' }}>编辑知识点</p>
        <button
          style={{
            padding: '6px 14px',
            background: 'linear-gradient(135deg, #7C6EFA, #9B8BFF)',
            borderRadius: '10px',
            fontSize: '13px',
            fontWeight: '700',
            color: 'white',
          }}
        >
          保存
        </button>
      </div>

      <div className="flex-1 overflow-y-auto px-5 py-5">
        <div className="flex flex-col gap-5">
          {/* Title */}
          <div>
            <label style={{ fontSize: '13px', fontWeight: '600', color: 'rgba(240,240,255,0.5)', display: 'block', marginBottom: '8px' }}>
              知识标题
            </label>
            <div
              style={{
                height: '48px',
                background: 'rgba(255,255,255,0.06)',
                border: '1.5px solid rgba(124,110,250,0.35)',
                borderRadius: '14px',
                padding: '0 16px',
                display: 'flex', alignItems: 'center',
                fontSize: '15px',
                color: '#F0F0FF',
                fontWeight: '600',
              }}
            >
              Transformer 注意力机制
            </div>
          </div>

          {/* Content */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <label style={{ fontSize: '13px', fontWeight: '600', color: 'rgba(240,240,255,0.5)' }}>核心内容</label>
              <button
                className="flex items-center gap-1"
                style={{
                  padding: '4px 10px',
                  background: 'rgba(124,110,250,0.12)',
                  border: '1px solid rgba(124,110,250,0.22)',
                  borderRadius: '8px',
                  fontSize: '11px', color: '#A78BFA',
                  display: 'flex', alignItems: 'center', gap: '4px',
                }}
              >
                <SparklesIcon size={11} />
                AI 优化
              </button>
            </div>
            <div
              style={{
                minHeight: '120px',
                background: 'rgba(255,255,255,0.05)',
                border: '1px solid rgba(255,255,255,0.1)',
                borderRadius: '14px',
                padding: '12px 16px',
                fontSize: '14px',
                color: 'rgba(240,240,255,0.75)',
                lineHeight: '1.8',
              }}
            >
              注意力机制允许模型在处理序列时，对不同位置的信息赋予不同的"关注度"权重。核心计算：Attention(Q,K,V) = softmax(QKᵀ/√d_k)V
            </div>
          </div>

          {/* Mnemonic */}
          <div>
            <label style={{ fontSize: '13px', fontWeight: '600', color: 'rgba(240,240,255,0.5)', display: 'block', marginBottom: '8px' }}>
              记忆技巧
            </label>
            <div
              style={{
                minHeight: '76px',
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.07)',
                borderRadius: '14px',
                padding: '12px 16px',
                fontSize: '14px',
                color: 'rgba(240,240,255,0.55)',
                lineHeight: '1.7',
              }}
            >
              把 Q/K/V 想象成搜索引擎：Q 是查询词，K 是网页标签，V 是网页内容。
            </div>
          </div>

          {/* Tags */}
          <div>
            <div className="flex items-center gap-2 mb-2">
              <TagIcon size={13} style={{ color: 'rgba(240,240,255,0.4)' }} />
              <label style={{ fontSize: '13px', fontWeight: '600', color: 'rgba(240,240,255,0.5)' }}>标签</label>
            </div>
            <div className="flex flex-wrap gap-2 mb-3">
              {activeTags.map((tag, i) => (
                <span
                  key={i}
                  style={{
                    padding: '5px 11px',
                    background: 'rgba(124,110,250,0.15)',
                    border: '1px solid rgba(124,110,250,0.3)',
                    borderRadius: '20px',
                    fontSize: '12px',
                    fontWeight: '600',
                    color: '#A78BFA',
                    display: 'flex', alignItems: 'center', gap: '5px',
                  }}
                >
                  {tag}
                  <span style={{ fontSize: '15px', opacity: 0.5, lineHeight: 1 }}>×</span>
                </span>
              ))}
              <button
                style={{
                  padding: '5px 11px',
                  background: 'rgba(255,255,255,0.04)',
                  border: '1.5px dashed rgba(255,255,255,0.12)',
                  borderRadius: '20px',
                  fontSize: '12px',
                  color: 'rgba(240,240,255,0.3)',
                  display: 'flex', alignItems: 'center', gap: '4px',
                }}
              >
                <PlusIcon size={12} />
                添加
              </button>
            </div>
            <div className="flex flex-wrap gap-2">
              {suggestedTags.map((tag, i) => (
                <button
                  key={i}
                  style={{
                    padding: '5px 11px',
                    background: 'rgba(255,255,255,0.04)',
                    border: '1px solid rgba(255,255,255,0.07)',
                    borderRadius: '20px',
                    fontSize: '12px',
                    color: 'rgba(240,240,255,0.3)',
                  }}
                >
                  + {tag}
                </button>
              ))}
            </div>
          </div>

          {/* AI Regenerate questions */}
          <div
            style={{
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid rgba(255,255,255,0.07)',
              borderRadius: '16px',
              overflow: 'hidden',
            }}
          >
            <div className="px-4 py-3.5 flex items-center gap-3"
              style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}
            >
              <SparklesIcon size={15} style={{ color: '#A78BFA' }} />
              <div className="flex-1">
                <p style={{ fontSize: '13px', fontWeight: '600', color: '#F0F0FF' }}>重新生成练习题</p>
                <p style={{ fontSize: '11px', color: 'rgba(240,240,255,0.35)' }}>内容更新后，AI 将基于新内容重出题</p>
              </div>
              <div
                style={{
                  width: '46px', height: '26px',
                  background: '#7C6EFA',
                  borderRadius: '13px',
                  padding: '3px',
                  display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
                }}
              >
                <div style={{ width: '20px', height: '20px', borderRadius: '50%', background: 'white' }} />
              </div>
            </div>
            <div className="px-4 py-3.5 flex items-center gap-3">
              <div
                style={{
                  width: '24px', height: '24px',
                  borderRadius: '8px',
                  background: 'rgba(239,68,68,0.1)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}
              >
                <TrashIcon size={13} style={{ color: '#EF4444' }} />
              </div>
              <div className="flex-1">
                <p style={{ fontSize: '13px', fontWeight: '600', color: '#EF4444' }}>重置复习记录</p>
                <p style={{ fontSize: '11px', color: 'rgba(240,240,255,0.35)' }}>清除历史测试得分，重新开始</p>
              </div>
            </div>
          </div>

          {/* Save */}
          <button
            className="w-full flex items-center justify-center gap-2 mb-2"
            style={{
              height: '52px',
              background: 'linear-gradient(135deg, #7C6EFA, #9B8BFF)',
              borderRadius: '16px',
              fontSize: '15px',
              fontWeight: '700',
              color: 'white',
              boxShadow: '0 8px 24px rgba(124,110,250,0.3)',
            }}
          >
            <CheckIcon size={18} />
            保存修改
          </button>

          {/* Delete */}
          <button
            className="w-full flex items-center justify-center gap-2 mb-4"
            style={{
              height: '44px',
              background: 'transparent',
              border: '1px solid rgba(239,68,68,0.25)',
              borderRadius: '14px',
              fontSize: '14px',
              fontWeight: '600',
              color: 'rgba(239,68,68,0.7)',
              display: 'flex', alignItems: 'center',
            }}
          >
            <TrashIcon size={15} />
            删除此知识点
          </button>
        </div>
      </div>
    </div>
  );
};

export default EditKnowledgePage;