import React, { useMemo, useState } from 'react';

type ElementInfo = {
  atomicNumber: number;
  symbol: string;
  name: string;
  period: number;
  group: number;
  category: string;
  state: string;
  summary: string;
  usage: string;
  color: string;
};

const elements: ElementInfo[] = [
  { atomicNumber: 1, symbol: 'H', name: '氢', period: 1, group: 1, category: '非金属', state: '气体', summary: '最轻的元素，常用于说明原子结构和燃料电池。', usage: '课堂可引出元素周期表第一主族与能源材料。', color: '#dbeafe' },
  { atomicNumber: 2, symbol: 'He', name: '氦', period: 1, group: 18, category: '稀有气体', state: '气体', summary: '化学性质稳定，常见于探空气球和低温实验。', usage: '适合讲解最外层电子排布与稳定结构。', color: '#f3e8ff' },
  { atomicNumber: 3, symbol: 'Li', name: '锂', period: 2, group: 1, category: '碱金属', state: '固体', summary: '银白色轻金属，是电池材料的重要组成。', usage: '可连接新能源电池与金属活泼性。', color: '#fee2e2' },
  { atomicNumber: 4, symbol: 'Be', name: '铍', period: 2, group: 2, category: '碱土金属', state: '固体', summary: '质轻而硬，用于航空航天材料。', usage: '可作为轻金属性质的补充案例。', color: '#ffedd5' },
  { atomicNumber: 5, symbol: 'B', name: '硼', period: 2, group: 13, category: '类金属', state: '固体', summary: '既有金属性又有非金属性，常用于玻璃和洗涤材料。', usage: '适合过渡到类金属概念。', color: '#fef3c7' },
  { atomicNumber: 6, symbol: 'C', name: '碳', period: 2, group: 14, category: '非金属', state: '固体', summary: '构成有机物骨架，单质形式包括金刚石和石墨。', usage: '可连接有机化学、碳循环与同素异形体。', color: '#dcfce7' },
  { atomicNumber: 7, symbol: 'N', name: '氮', period: 2, group: 15, category: '非金属', state: '气体', summary: '空气中含量最高的单质，化学性质较稳定。', usage: '适合讲氮气、氨气及化肥工业。', color: '#d1fae5' },
  { atomicNumber: 8, symbol: 'O', name: '氧', period: 2, group: 16, category: '非金属', state: '气体', summary: '支持燃烧和呼吸，是初中化学核心元素。', usage: '可串联氧化反应与空气成分。', color: '#cffafe' },
  { atomicNumber: 9, symbol: 'F', name: '氟', period: 2, group: 17, category: '卤素', state: '气体', summary: '最活泼的非金属元素之一，常以化合物形式存在。', usage: '适合比较卤素活泼性大小规律。', color: '#e0f2fe' },
  { atomicNumber: 10, symbol: 'Ne', name: '氖', period: 2, group: 18, category: '稀有气体', state: '气体', summary: '常用于霓虹灯，放电时会发出橙红色光。', usage: '适合引出稀有气体与光谱现象。', color: '#f5d0fe' },
  { atomicNumber: 11, symbol: 'Na', name: '钠', period: 3, group: 1, category: '碱金属', state: '固体', summary: '活泼金属，保存时通常隔绝空气和水。', usage: '可对接金属与水反应、盐类来源。', color: '#fecaca' },
  { atomicNumber: 12, symbol: 'Mg', name: '镁', period: 3, group: 2, category: '碱土金属', state: '固体', summary: '燃烧时发出耀眼白光，常用于合金和照明。', usage: '适合讲燃烧实验与金属材料。', color: '#fed7aa' },
  { atomicNumber: 13, symbol: 'Al', name: '铝', period: 3, group: 13, category: '金属', state: '固体', summary: '轻质金属，表面致密氧化膜使其耐腐蚀。', usage: '可连接铝制品与氧化膜保护。', color: '#fde68a' },
  { atomicNumber: 14, symbol: 'Si', name: '硅', period: 3, group: 14, category: '类金属', state: '固体', summary: '半导体材料，广泛用于芯片和太阳能电池。', usage: '适合跨学科连接信息技术与新能源。', color: '#bbf7d0' },
  { atomicNumber: 15, symbol: 'P', name: '磷', period: 3, group: 15, category: '非金属', state: '固体', summary: '白磷和红磷性质差异明显，常用于火柴和化肥。', usage: '可用来讲同素异形体与化学安全。', color: '#a7f3d0' },
  { atomicNumber: 16, symbol: 'S', name: '硫', period: 3, group: 16, category: '非金属', state: '固体', summary: '黄色固体，二氧化硫与酸雨等内容常涉及。', usage: '适合引出环境化学和燃烧产物。', color: '#bae6fd' },
  { atomicNumber: 17, symbol: 'Cl', name: '氯', period: 3, group: 17, category: '卤素', state: '气体', summary: '黄绿色气体，常见于消毒和漂白。', usage: '可结合自来水消毒和氯气性质。', color: '#bfdbfe' },
  { atomicNumber: 18, symbol: 'Ar', name: '氩', period: 3, group: 18, category: '稀有气体', state: '气体', summary: '空气中含量较高的稀有气体，化学性质稳定。', usage: '适合对比氮气与稀有气体。', color: '#e9d5ff' },
  { atomicNumber: 19, symbol: 'K', name: '钾', period: 4, group: 1, category: '碱金属', state: '固体', summary: '活泼金属，是植物生长的重要营养元素之一。', usage: '可连接化肥和植物营养。', color: '#fca5a5' },
  { atomicNumber: 20, symbol: 'Ca', name: '钙', period: 4, group: 2, category: '碱土金属', state: '固体', summary: '构成骨骼和石灰石的重要元素。', usage: '适合从生活材料切入化学学习。', color: '#fdba74' },
];

const legend = [
  { label: '碱金属/碱土金属', color: '#fee2e2' },
  { label: '类金属/金属', color: '#fef3c7' },
  { label: '非金属', color: '#dcfce7' },
  { label: '卤素/稀有气体', color: '#e0f2fe' },
];

export default function InteractiveCourseware() {
  const [selectedSymbol, setSelectedSymbol] = useState<string>('O');
  const selected = useMemo(
    () => elements.find((item) => item.symbol === selectedSymbol) ?? elements[0],
    [selectedSymbol]
  );

  return (
    <div style={{ fontFamily: 'Source Sans 3, sans-serif', padding: 24, background: 'linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%)', color: '#0f172a' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginBottom: 20 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 34 }}>元素周期表</h1>
          <p style={{ margin: '10px 0 0', color: '#475569', maxWidth: 760, lineHeight: 1.7 }}>
            点击元素可以显示该元素详细信息
          </p>
        </div>
        <div style={{ minWidth: 220, background: '#ffffffcc', backdropFilter: 'blur(6px)', borderRadius: 18, padding: 16, boxShadow: '0 12px 32px rgba(15, 23, 42, 0.08)' }}>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#64748b' }}>课堂目标</div>
          <div style={{ marginTop: 8, fontSize: 15, lineHeight: 1.7 }}>七年级 · 数学 · 点击元素查看具体信息</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) minmax(320px, 0.8fr)', gap: 20, alignItems: 'start' }}>
        <div style={{ background: '#fff', borderRadius: 24, padding: 20, boxShadow: '0 20px 45px rgba(15, 23, 42, 0.08)', overflowX: 'auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(18, minmax(42px, 1fr))', gap: 8, minWidth: 860 }}>
            {elements.map((element) => (
              <button
                key={element.symbol}
                type="button"
                onClick={() => setSelectedSymbol(element.symbol)}
                style={{
                  gridColumn: element.group,
                  gridRow: element.period,
                  minHeight: 72,
                  borderRadius: 16,
                  border: selectedSymbol === element.symbol ? '2px solid #185fa5' : '1px solid rgba(148, 163, 184, 0.28)',
                  background: element.color,
                  cursor: 'pointer',
                  padding: 8,
                  boxShadow: selectedSymbol === element.symbol ? '0 12px 24px rgba(24, 95, 165, 0.18)' : 'none',
                  transition: 'all 180ms ease',
                }}
              >
                <div style={{ fontSize: 11, color: '#475569', textAlign: 'left' }}>{element.atomicNumber}</div>
                <div style={{ marginTop: 4, fontSize: 20, fontWeight: 700 }}>{element.symbol}</div>
                <div style={{ marginTop: 2, fontSize: 12, color: '#334155' }}>{element.name}</div>
              </button>
            ))}
          </div>

          <div style={{ marginTop: 18, display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {legend.map((item) => (
              <div key={item.label} style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 999, background: '#f8fafc', padding: '8px 12px', fontSize: 13, color: '#334155' }}>
                <span style={{ width: 12, height: 12, borderRadius: 999, background: item.color, border: '1px solid rgba(148, 163, 184, 0.35)' }} />
                {item.label}
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gap: 16 }}>
          <div style={{ background: '#fff', borderRadius: 24, padding: 20, boxShadow: '0 20px 45px rgba(15, 23, 42, 0.08)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
              <div>
                <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#64748b' }}>当前选中元素</div>
                <h2 style={{ margin: '8px 0 0', fontSize: 30 }}>{selected.name} · {selected.symbol}</h2>
              </div>
              <div style={{ minWidth: 72, textAlign: 'center', borderRadius: 18, background: selected.color, padding: '10px 12px' }}>
                <div style={{ fontSize: 12, color: '#475569' }}>原子序数</div>
                <div style={{ marginTop: 4, fontSize: 26, fontWeight: 700 }}>{selected.atomicNumber}</div>
              </div>
            </div>

            <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
              <div style={{ borderRadius: 18, background: '#f8fafc', padding: 14 }}><div style={{ fontSize: 12, color: '#64748b' }}>周期</div><div style={{ marginTop: 6, fontSize: 20, fontWeight: 700 }}>第 {selected.period} 周期</div></div>
              <div style={{ borderRadius: 18, background: '#f8fafc', padding: 14 }}><div style={{ fontSize: 12, color: '#64748b' }}>族</div><div style={{ marginTop: 6, fontSize: 20, fontWeight: 700 }}>第 {selected.group} 族</div></div>
              <div style={{ borderRadius: 18, background: '#f8fafc', padding: 14 }}><div style={{ fontSize: 12, color: '#64748b' }}>分类</div><div style={{ marginTop: 6, fontSize: 18, fontWeight: 700 }}>{selected.category}</div></div>
              <div style={{ borderRadius: 18, background: '#f8fafc', padding: 14 }}><div style={{ fontSize: 12, color: '#64748b' }}>常温状态</div><div style={{ marginTop: 6, fontSize: 18, fontWeight: 700 }}>{selected.state}</div></div>
            </div>

            <div style={{ marginTop: 18, borderRadius: 20, background: '#eff6ff', padding: 16, lineHeight: 1.8, color: '#1e3a8a' }}>
              <div style={{ fontWeight: 700, marginBottom: 6 }}>元素信息</div>
              <div>{selected.summary}</div>
            </div>

            <div style={{ marginTop: 14, borderRadius: 20, background: '#f8fafc', padding: 16, lineHeight: 1.8 }}>
              <div style={{ fontWeight: 700, marginBottom: 6 }}>课堂延伸</div>
              <div>{selected.usage}</div>
            </div>
          </div>

          <div style={{ background: '#fff', borderRadius: 24, padding: 20, boxShadow: '0 20px 45px rgba(15, 23, 42, 0.08)' }}>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#64748b' }}>教学建议</div>
            <ul style={{ margin: '12px 0 0', paddingLeft: 18, lineHeight: 1.9, color: '#334155' }}>
              <li>先让学生观察元素在同族、同周期中的分布规律。</li>
              <li>点击不同元素，对比金属、非金属与稀有气体的差异。</li>
              <li>结合钠、氧、氯、钙等熟悉元素，引导学生把表格信息与生活材料联系起来。</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}