// 多维语义场探索器
// 展示汉字的五重语义叠加态：形义层、礼制层、哲思层、神经认知层、元宇宙交互层
// 用户可点击切换各层级查看

const { useState } = React;

function SemanticTool({ onNavigate }) {
  const [inputChar, setInputChar] = useState("仁");
  const [displayChar, setDisplayChar] = useState("仁");
  const [activeLayer, setActiveLayer] = useState("form");

  const layers = [
    { key: "form", name: "形义层", subtitle: "甲骨文象形", color: "#8B4513", era: "商周" },
    { key: "ritual", name: "礼制层", subtitle: "周礼用字", color: "#A65D2F", era: "两周" },
    { key: "philosophy", name: "哲思层", subtitle: "宋明理学", color: "#B83A2A", era: "宋明" },
    { key: "neuroscience", name: "神经认知层", subtitle: "现代脑科学", color: "#3A6B8C", era: "当代" },
    { key: "metaverse", name: "元宇宙层", subtitle: "未来交互", color: "#5B8C6A", era: "未来" }
  ];

  const charData = semanticData[displayChar];
  const currentLayer = charData?.layers?.[activeLayer];

  const handleGenerate = () => {
    if (!inputChar || inputChar.length === 0) return;
    const char = inputChar[0];
    if (!/[\u4e00-\u9fa5]/.test(char)) return;
    setDisplayChar(char);
    setActiveLayer("form");
  };

  const handleKeyPress = (e) => {
    if (e.key === "Enter") handleGenerate();
  };

  const quickChars = ["仁", "龙"];

  // 如果字符没有数据，显示通用模板
  const hasData = !!charData;

  const getLayerContent = (layerKey) => {
    if (hasData && charData.layers[layerKey]) {
      return charData.layers[layerKey];
    }
    // 通用内容
    const layerInfo = layers.find(l => l.key === layerKey);
    return {
      name: layerInfo.name,
      subtitle: layerInfo.subtitle,
      era: layerInfo.era,
      content: `「${displayChar}」字于${layerInfo.name}的语义解析正在编译中。仓颉Ⅲ型系统正从${layerInfo.subtitle}的维度对该字进行多维解构。敬请期待完整的十万维度语义场数据。`,
      elements: ["待加载", "待加载", "待加载"],
      source: "仓颉Ⅲ型系统 · 编译中"
    };
  };

  const currentContent = getLayerContent(activeLayer);
  const currentLayerInfo = layers.find(l => l.key === activeLayer);

  // 计算五重态位置（花瓣式布局）
  const getLayerPosition = (index, total, radius) => {
    const angle = (index / total) * Math.PI * 2 - Math.PI / 2;
    return {
      x: Math.cos(angle) * radius,
      y: Math.sin(angle) * radius
    };
  };

  return (
    <div className="tool-container">
      <ToolHeader
        icon="場"
        title="多维语义场探索器"
        subtitle="五重语义叠加态：形义、礼制、哲思、神经认知、元宇宙交互。一字一宇宙，一字一乾坤。"
      />

      {/* 输入区 */}
      <div className="tool-panel">
        <h3 className="tool-panel-title">择字入观</h3>
        <div style={{ display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }}>
          <input
            type="text"
            className="form-input"
            style={{ flex: "1", minWidth: "200px", fontSize: "24px", fontFamily: "var(--font-brush)" }}
            value={inputChar}
            onChange={(e) => setInputChar(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="请输入一个汉字..."
            maxLength={1}
          />
          <button className="btn btn-seal" onClick={handleGenerate}>
            五重解析
          </button>
        </div>
        <div style={{ marginTop: "16px", display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
          <span style={{ fontFamily: "var(--font-body)", color: "var(--ink-faint)", fontSize: "14px" }}>已编译：</span>
          {quickChars.map(c => (
            <button
              key={c}
              onClick={() => { setInputChar(c); setDisplayChar(c); }}
              style={{
                padding: "6px 14px",
                background: displayChar === c ? "var(--seal)" : "transparent",
                color: displayChar === c ? "var(--paper-light)" : "var(--ink-soft)",
                border: "1px solid var(--line-strong)",
                borderRadius: "2px",
                fontFamily: "var(--font-brush)",
                fontSize: "16px",
                cursor: "pointer",
                transition: "all 0.2s"
              }}
            >
              {c}
            </button>
          ))}
          <span style={{ fontFamily: "var(--font-body)", color: "var(--ink-faint)", fontSize: "13px", marginLeft: "8px" }}>
            （其他字为通用模板）
          </span>
        </div>
      </div>

      {/* 五重态花瓣图 */}
      <div className="tool-panel">
        <h3 className="tool-panel-title">五重语义叠加态</h3>
        
        <div style={{ 
          position: "relative", 
          width: "100%", 
          maxWidth: "480px", 
          margin: "0 auto 32px",
          aspectRatio: "1/1"
        }}>
          <svg viewBox="-200 -200 400 400" style={{ width: "100%", height: "100%" }}>
            {/* 背景同心圆 */}
            <circle cx="0" cy="0" r="180" fill="none" stroke="var(--line)" strokeWidth="1" opacity="0.4" />
            <circle cx="0" cy="0" r="130" fill="none" stroke="var(--line)" strokeWidth="1" strokeDasharray="3 5" opacity="0.3" />
            <circle cx="0" cy="0" r="80" fill="none" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 4" opacity="0.2" />
            
            {/* 连线 */}
            {layers.map((layer, idx) => {
              const pos = getLayerPosition(idx, layers.length, 150);
              const isActive = activeLayer === layer.key;
              return (
                <line
                  key={`line-${idx}`}
                  x1="0"
                  y1="0"
                  x2={pos.x}
                  y2={pos.y}
                  stroke={isActive ? layer.color : "var(--line-strong)"}
                  strokeWidth={isActive ? 2.5 : 1}
                  opacity={isActive ? 0.8 : 0.4}
                  style={{ transition: "all 0.3s" }}
                />
              );
            })}

            {/* 中心汉字 */}
            <g>
              <circle cx="0" cy="0" r="55" fill="var(--paper-light)" stroke="var(--seal)" strokeWidth="2" />
              <circle cx="0" cy="0" r="48" fill="var(--seal)" opacity="0.1" />
              <text
                x="0"
                y="12"
                textAnchor="middle"
                fill="var(--ink)"
                fontFamily="var(--font-brush)"
                fontSize="48"
                fontWeight="700"
              >
                {displayChar}
              </text>
            </g>

            {/* 五重态节点 */}
            {layers.map((layer, idx) => {
              const pos = getLayerPosition(idx, layers.length, 150);
              const isActive = activeLayer === layer.key;
              return (
                <g
                  key={`node-${idx}`}
                  style={{ cursor: "pointer" }}
                  onClick={() => setActiveLayer(layer.key)}
                >
                  {/* 节点背景 */}
                  <circle
                    cx={pos.x}
                    cy={pos.y}
                    r={isActive ? 42 : 36}
                    fill="var(--paper-light)"
                    stroke={layer.color}
                    strokeWidth={isActive ? 3 : 1.5}
                    style={{ transition: "all 0.3s" }}
                  />
                  {/* 节点文字 */}
                  <text
                    x={pos.x}
                    y={pos.y + 5}
                    textAnchor="middle"
                    fill={isActive ? layer.color : "var(--ink)"}
                    fontFamily="var(--font-brush)"
                    fontSize="18"
                    fontWeight="600"
                    style={{ transition: "all 0.3s" }}
                  >
                    {layer.name.slice(0, 2)}
                  </text>
                  {/* 朝代小标签 */}
                  <text
                    x={pos.x}
                    y={pos.y + 58}
                    textAnchor="middle"
                    fill="var(--ink-faint)"
                    fontFamily="var(--font-kai)"
                    fontSize="11"
                    letterSpacing="1"
                  >
                    {layer.era}
                  </text>
                </g>
              );
            })}
          </svg>
        </div>

        {/* 层级切换标签 */}
        <div style={{
          display: "flex",
          gap: "8px",
          justifyContent: "center",
          flexWrap: "wrap",
          marginBottom: "24px"
        }}>
          {layers.map((layer) => (
            <button
              key={layer.key}
              onClick={() => setActiveLayer(layer.key)}
              style={{
                padding: "10px 20px",
                background: activeLayer === layer.key ? layer.color : "transparent",
                color: activeLayer === layer.key ? "var(--paper-light)" : "var(--ink-soft)",
                border: `1px solid ${activeLayer === layer.key ? layer.color : "var(--line-strong)"}`,
                borderRadius: "3px",
                fontFamily: "var(--font-body)",
                fontSize: "14px",
                letterSpacing: "0.1em",
                cursor: "pointer",
                transition: "all 0.25s"
              }}
            >
              {layer.name}
            </button>
          ))}
        </div>

        {/* 当前层级详情 */}
        <div 
          className="scroll-container"
          style={{ padding: "32px 36px", margin: "0" }}
          key={activeLayer}
        >
          <div style={{
            display: "flex",
            alignItems: "center",
            gap: "16px",
            marginBottom: "20px",
            paddingBottom: "16px",
            borderBottom: "1px solid var(--line)"
          }}>
            <div style={{
              width: "56px",
              height: "56px",
              borderRadius: "50%",
              background: currentLayerInfo.color,
              color: "var(--paper-light)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontFamily: "var(--font-brush)",
              fontSize: "22px",
              flexShrink: "0"
            }}>
              {currentContent.name.slice(0, 1)}
            </div>
            <div>
              <h4 style={{
                fontFamily: "var(--font-brush)",
                fontSize: "24px",
                color: "var(--ink)",
                letterSpacing: "0.15em",
                marginBottom: "4px"
              }}>
                {currentContent.name}
              </h4>
              <p style={{
                fontFamily: "var(--font-body)",
                fontSize: "14px",
                color: "var(--ink-light)",
                margin: "0"
              }}>
                {currentContent.subtitle} · {currentContent.era}
              </p>
            </div>
          </div>

          <p style={{
            fontFamily: "var(--font-body)",
            fontSize: "16px",
            color: "var(--ink-soft)",
            lineHeight: "2.2",
            textIndent: "2em",
            marginBottom: "24px"
          }}>
            {currentContent.content}
          </p>

          {/* 关键字素 */}
          <div style={{ marginBottom: "20px" }}>
            <div style={{
              fontFamily: "var(--font-brush)",
              fontSize: "15px",
              color: currentLayerInfo.color,
              marginBottom: "10px",
              letterSpacing: "0.15em"
            }}>
              ◆ 关键义素
            </div>
            <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
              {currentContent.elements.map((el, idx) => (
                <span
                  key={idx}
                  style={{
                    padding: "6px 16px",
                    background: `${currentLayerInfo.color}12`,
                    border: `1px solid ${currentLayerInfo.color}40`,
                    borderRadius: "20px",
                    fontFamily: "var(--font-body)",
                    fontSize: "13px",
                    color: currentLayerInfo.color
                  }}
                >
                  {el}
                </span>
              ))}
            </div>
          </div>

          {/* 出处 */}
          <div style={{
            fontSize: "13px",
            color: "var(--ink-faint)",
            fontFamily: "var(--font-body)",
            textAlign: "right",
            fontStyle: "italic"
          }}>
            —— 出自《{currentContent.source}》
          </div>
        </div>
      </div>

      {/* 叠加态说明 */}
      <div className="tool-panel" style={{ background: "var(--paper)" }}>
        <h3 className="tool-panel-title">何谓「五重语义叠加态」</h3>
        <p style={{
          fontFamily: "var(--font-body)",
          fontSize: "15px",
          color: "var(--ink-light)",
          lineHeight: "2",
          textIndent: "2em",
          marginBottom: "16px"
        }}>
          量子力学中，粒子可处于多态叠加；文字亦然。仓颉Ⅲ型系统发现，每个汉字并非单一语义实体，而是同时承载着从远古至未来的多重意义。此五重态非层层递进之关系，而是同时共存、互相纠缠，如《周易》卦象之六爻，皆可随时空条件而隐现。
        </p>
        <p style={{
          fontFamily: "var(--font-body)",
          fontSize: "14px",
          color: "var(--ink-faint)",
          lineHeight: "1.9",
          textIndent: "2em",
          margin: "0"
        }}>
          注：本理论受启于《淮南子》「道始于一」说及量子叠加原理。详见《跨文明对话集》甲辰年刊。
        </p>
      </div>

      <BackButton onNavigate={onNavigate} />
    </div>
  );
}

window.SemanticTool = SemanticTool;