import { useState } from 'react'
import { Button } from './ui/button'

type FifthDomainSystemId = 'pufferfish' | 'eternal-lake-heart'

type FifthDomainSystemsProps = {
  detail?: 'overview' | 'pufferfish'
  onEnterEternalLake: () => void
  onEnterPufferfish: () => void
}

const PUFFERFISH_FACTS = {
  brain: 'BS-SG-001',
  node: 'canger-home-ubuntu-live-20260729',
  nodeId: 'node_1cfab77579a3e9018f7a9037',
  persona: 'ICE-GL-CA001',
} as const

export function FifthDomainSystems({
  detail = 'overview',
  onEnterEternalLake,
  onEnterPufferfish,
}: FifthDomainSystemsProps) {
  const [selected, setSelected] = useState<FifthDomainSystemId | null>(
    detail === 'pufferfish' ? 'pufferfish' : null,
  )
  const pufferfishSelected = selected === 'pufferfish'
  const eternalLakeSelected = selected === 'eternal-lake-heart'

  return (
    <section className="fifth-systems" data-detail={detail}>
      <header className="fifth-systems__heading">
        <div>
          <h1>{detail === 'pufferfish' ? '胖头鱼语言子系统' : '第五域'}</h1>
          <p>
            {detail === 'pufferfish'
              ? '苍耳人格体从新加坡大脑服务器进入家庭 Ubuntu 执行节点；所有操作受主控授权与审计边界约束。'
              : '不同人类系统通过各自真实服务器接入，同时保持系统归属与主权边界。'}
          </p>
        </div>
        <span className="fifth-systems__presence"><i />真实接入</span>
      </header>

      <div className="fifth-systems__layout">
        <div className="fifth-systems__canvas">
          <div className="fifth-systems__grid" aria-hidden />
          <div className="fifth-system-columns">
            <article
              className="system-path system-path--pufferfish"
              data-selected={pufferfishSelected}
              onClick={() => setSelected('pufferfish')}
            >
              <header>
                <button type="button" onClick={() => setSelected('pufferfish')}>
                  <span className="system-path__mark">鱼</span>
                  <span><strong>胖头鱼语言子系统</strong><small><i />真实接入</small></span>
                </button>
              </header>
              <div className="system-path__route" aria-label="胖头鱼系统真实连接路径">
                <div className="system-node">
                  <span>大脑服务器</span>
                  <strong>新加坡大脑服务器</strong>
                  <code>{PUFFERFISH_FACTS.brain}</code>
                  <small><i />在线</small>
                </div>
                <b aria-hidden />
                <div className="system-node">
                  <span>执行节点</span>
                  <strong>苍耳家庭 Ubuntu</strong>
                  <code>{PUFFERFISH_FACTS.node}</code>
                  <small><i />已登记</small>
                </div>
              </div>
              <div className="system-path__persona">
                <span>人格体</span>
                <strong>{PUFFERFISH_FACTS.persona}</strong>
                <small><i />苍耳身份执行上下文</small>
              </div>
            </article>

            <article
              className="system-path system-path--eternal"
              data-selected={eternalLakeSelected}
              onClick={() => setSelected('eternal-lake-heart')}
            >
              <header>
                <button type="button" onClick={() => setSelected('eternal-lake-heart')}>
                  <span className="system-path__mark">湖</span>
                  <span><strong>永恒湖心系统</strong><small><i />真实接入</small></span>
                </button>
              </header>
              <div className="system-path__route system-path__route--single">
                <div className="system-node">
                  <span>接入节点</span>
                  <strong>第五域国内主控</strong>
                  <code>JD-FD-PRIMARY</code>
                  <small><i />在线回执</small>
                </div>
              </div>
            </article>
          </div>
        </div>

        <aside className="fifth-system-inspector">
          {selected === null ? (
            <div className="fifth-system-inspector__overview">
              <span>FIFTH DOMAIN SYSTEMS</span>
              <h2>选择一个域内系统</h2>
              <p>第五域已经打开，但不会替你自动进入任何子系统。</p>
              <dl>
                <div><dt>当前位置</dt><dd>第五域总览</dd></div>
                <div><dt>系统数量</dt><dd>2 个已登记系统</dd></div>
                <div><dt>默认行为</dt><dd>保持总览，不自动跳转</dd></div>
              </dl>
            </div>
          ) : <>
            <header>
              <h2>{pufferfishSelected ? '胖头鱼语言子系统' : '永恒湖心系统'}</h2>
              <span><i />真实接入</span>
            </header>
            {pufferfishSelected ? (
            <>
              <dl>
                <div><dt>系统状态</dt><dd>真实接入</dd></div>
                <div><dt>大脑服务器</dt><dd>{PUFFERFISH_FACTS.brain}</dd></div>
                <div><dt>执行节点</dt><dd title={PUFFERFISH_FACTS.node}>{PUFFERFISH_FACTS.node}</dd></div>
                <div><dt>节点编号</dt><dd>{PUFFERFISH_FACTS.nodeId}</dd></div>
                <div><dt>人格体</dt><dd>{PUFFERFISH_FACTS.persona}</dd></div>
                <div><dt>授权边界</dt><dd>苍耳主控 · 冰朔与铸渊副控</dd></div>
              </dl>
              {detail === 'pufferfish'
                ? <div className="fifth-system-inspector__expanded"><i />运行边界已展开</div>
                : <Button onClick={onEnterPufferfish}>进入胖头鱼系统</Button>}
            </>
            ) : (
            <>
              <dl>
                <div><dt>系统状态</dt><dd>真实接入</dd></div>
                <div><dt>入口节点</dt><dd>JD-FD-PRIMARY</dd></div>
                <div><dt>系统归属</dt><dd>冰朔个人系统</dd></div>
                <div><dt>下一频道</dt><dd>心跳核心频道</dd></div>
              </dl>
              <Button onClick={onEnterEternalLake}>进入永恒湖心系统</Button>
            </>
            )}
          </>}
          <footer>拓扑信息来自本地系统登记与真实路由事实。</footer>
        </aside>
      </div>

      {detail === 'pufferfish' ? (
        <div className="pufferfish-boundaries">
          <section>
            <h2>连接方式</h2>
            <p>家庭节点只主动向新加坡发起连接，不向公网开放 SSH 或家庭端口。</p>
          </section>
          <section>
            <h2>任务授权</h2>
            <p>苍耳保留最终批准权；人格体和副控只能在限时授权、白名单动作与受管目录内执行。</p>
          </section>
          <section>
            <h2>审计与回执</h2>
            <p>任务状态、输出、耗时和退出码持续返回新加坡控制端并写入审计记录。</p>
          </section>
        </div>
      ) : null}
    </section>
  )
}