import { useState } from 'react'
import architecture from '../src-tauri/resources/public-architecture/gls-system-architecture.json'
import './App.css'

interface TeamFoundationAppProps {
  onOpenKnowledgeSpace: () => void
}

const ZERO_SENSE_DOMAIN_ID = 'GH-ZEROSENSE-001'
const KNOWLEDGE_MODULE_ID = 'MOD-KNOWLEDGE-001'

export default function TeamFoundationApp({ onOpenKnowledgeSpace }: TeamFoundationAppProps) {
  const [activeDomainId, setActiveDomainId] = useState(architecture.domains[0].id)
  const activeDomain = architecture.domains.find((domain) => domain.id === activeDomainId)
    ?? architecture.domains[0]
  const isZeroSenseDomain = activeDomain.id === ZERO_SENSE_DOMAIN_ID

  const openKnowledgeSpace = () => {
    setActiveDomainId(ZERO_SENSE_DOMAIN_ID)
    onOpenKnowledgeSpace()
  }

  return (
    <main
      className="team-foundation team-foundation--lightweight"
      aria-label="光湖灯塔 AI 应用操作系统"
      data-architecture-compatibility={architecture.compatibility_ids[0]}
      data-source-repository={architecture.development_repository.url}
    >
      <aside className="team-foundation__sidebar">
        <div className="team-foundation__brand">
          <span className="team-foundation__brand-mark" aria-hidden="true">光</span>
          <div><strong>光湖灯塔</strong><span>HOLOLAKE LIGHTHOUSE</span></div>
        </div>

        <nav className="team-foundation__nav" aria-label="光湖四域">
          <p>四域工作空间</p>
          {architecture.domains.map((domain) => (
            <button
              className={domain.id === activeDomain.id ? 'is-active' : ''}
              data-tone={domain.color}
              key={domain.id}
              onClick={() => setActiveDomainId(domain.id)}
              type="button"
            >
              <span className="team-foundation__domain-dot" aria-hidden="true" />
              <span><strong>{domain.name_zh}</strong><small>{domain.eyebrow_zh}</small></span>
            </button>
          ))}
        </nav>

        <section className="team-foundation__gate" aria-label="第五域入口">
          <span className="team-foundation__gate-icon" aria-hidden="true">锁</span>
          <div><strong>{architecture.fifth_domain_entry.name_zh}</strong><small>服务器、编号与邮件授权后进入</small></div>
          <span className="team-foundation__lock">未授权</span>
        </section>

        <footer className="team-foundation__sidebar-footer">
          <span className="team-foundation__status-dot" />本地工作区
          <code>{architecture.id}</code>
        </footer>
      </aside>

      <section className="team-foundation__workspace">
        <header className="team-foundation__topbar">
          <div><span>AI 应用操作系统</span><strong>{architecture.product.version_label}</strong></div>
          <span>团队内测版 · 数据保存在各自设备</span>
        </header>

        <div className="team-foundation__content">
          <section className="team-foundation__hero">
            <div className="team-foundation__hero-copy">
              <p>GUANGHU · MODULAR AI OPERATING SYSTEM</p>
              <h1>{architecture.product.name_zh}</h1>
              <h2>{activeDomain.name_zh}</h2>
              <p>{activeDomain.description_zh}</p>
              <div className="team-foundation__hero-actions">
                {isZeroSenseDomain ? (
                  <button type="button" aria-label="从光湖零感域进入 AI 知识空间" onClick={openKnowledgeSpace}>进入 AI 知识空间 <span aria-hidden="true">→</span></button>
                ) : (
                  <span>当前为域说明页；个人知识库请从光湖零感域进入。</span>
                )}
              </div>
            </div>
          </section>

          <section className="team-foundation__modules" aria-label="热插拔模块">
            <div className="team-foundation__section-heading">
              <div><p>MODULES</p><h2>AI 应用模块</h2></div>
              <span>功能模块在光湖内打开，数据由使用者自己建立</span>
            </div>
            <div className="team-foundation__module-grid">
              {architecture.modules.map((module, index) => {
                const isKnowledgeModule = module.id === KNOWLEDGE_MODULE_ID
                return (
                  <article className="team-foundation__module" key={module.id}>
                    <div className="team-foundation__module-icon" aria-hidden="true">{index === 0 ? '模' : index === 1 ? '知' : '创'}</div>
                    <h3>{module.name_zh}</h3>
                    <p>{module.description_zh}</p>
                    {isKnowledgeModule ? (
                      <button type="button" onClick={openKnowledgeSpace}>进入 AI 知识空间</button>
                    ) : (
                      <button type="button" disabled aria-label={`${module.name_zh} 尚未接入`}>尚未接入</button>
                    )}
                  </article>
                )
              })}
            </div>
          </section>

          <section className="team-foundation__access-row">
            <article className="team-foundation__fifth-domain">
              <div><span>CONTROLLED ACCESS</span><h2>{architecture.fifth_domain_entry.name_zh}</h2></div>
              <p>{architecture.fifth_domain_entry.description_zh}</p>
              <button disabled type="button">{architecture.fifth_domain_entry.status_zh}</button>
            </article>
            <article className="team-foundation__boundaries">
              <span>PUBLIC BUILD BOUNDARY</span><h2>团队版数据边界</h2>
              <ul>{architecture.public_boundaries.map((boundary) => <li key={boundary}>{boundary}</li>)}</ul>
            </article>
          </section>
        </div>
      </section>
    </main>
  )
}