import { useState } from 'react'
import type { AppLocale, TranslationKey } from '../lib/i18n'
import { translate } from '../lib/i18n'
import { trackEvent } from '../lib/telemetry'
import { openExternalUrl } from '../utils/url'
import { Button } from './ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from './ui/dialog'

export const HOLOLAKE_DEVELOPMENT_REPOSITORY_URL =
  'https://guanghulab.com/fifth-domain/bingshuo/hololake-platform'

type HoloLakeHomeProps = {
  locale: AppLocale
  onEnterKnowledgeBase: () => void
}

type ChannelRoute = 'zero-core' | 'fifth-domain' | 'eternal-lake-heart' | 'light-lake' | 'heartbeat-core' | 'love-core' | 'servers'

type RouteCardProps = {
  action?: string
  description: string
  eyebrow: string
  onOpen?: () => void
  status?: string
  title: string
}

const architectureRoutes: Array<[string, TranslationKey, TranslationKey]> = [
  ['GLW-ENTRY-001', 'hololake.architecture.worldEntry', 'hololake.architecture.worldEntryDescription'],
  ['FD-LANGUAGE-001', 'hololake.architecture.fifthDomain', 'hololake.architecture.fifthDomainDescription'],
  ['TCS-ROOT-001', 'hololake.architecture.tcs', 'hololake.architecture.tcsDescription'],
  ['GLS-SYS-ARCH-001', 'hololake.architecture.gls', 'hololake.architecture.glsDescription'],
  ['ELH-LAMP-001', 'hololake.architecture.lakeLamp', 'hololake.architecture.lakeLampDescription'],
]

function RouteCard({ action, description, eyebrow, onOpen, status, title }: RouteCardProps) {
  return (
    <article className="channel-card">
      <span className="channel-card__eyebrow">{eyebrow}</span>
      <h2>{title}</h2>
      <p>{description}</p>
      {onOpen && action
        ? <Button variant="link" onClick={onOpen}>{action} <span>→</span></Button>
        : <span className="channel-card__status">{status}</span>}
    </article>
  )
}

function PersonaRoute({ id, title }: { id: string; title: string }) {
  return <li><code>{id}</code><strong>{title}</strong><span>→</span></li>
}

const registeredServers = [
  { id: 'BS-SG-001', label: '新加坡大脑服务器', owner: '冰朔 · 永恒湖心', status: '已接入', tone: 'online' },
  { id: 'BS-GZ-001', label: '广州个人服务器', owner: '冰朔 · 心跳核心', status: '接口预留', tone: 'pending' },
  { id: 'JD-FD-PRIMARY', label: '第五域企业主节点', owner: '第五域 · 零点原核', status: '接口预留', tone: 'pending' },
] as const

export function HoloLakeHome({ locale, onEnterKnowledgeBase }: HoloLakeHomeProps) {
  const [route, setRoute] = useState<ChannelRoute>('zero-core')
  const [architectureOpen, setArchitectureOpen] = useState(false)
  const t = (key: TranslationKey) => translate(locale, key)

  const navigate = (nextRoute: ChannelRoute) => {
    trackEvent('guanghu_channel_opened', { route: nextRoute })
    setRoute(nextRoute)
  }

  const openArchitecture = () => {
    trackEvent('guanghu_architecture_opened', { route: 'GLS-SYS-ARCH-001' })
    setArchitectureOpen(true)
  }

  const openDevelopmentRepository = () => {
    trackEvent('hololake_development_repository_opened', { route: 'REPO-008' })
    void openExternalUrl(HOLOLAKE_DEVELOPMENT_REPOSITORY_URL)
  }

  const openKnowledgeBase = () => {
    trackEvent('guanghu_channel_module_opened', { channel: 'heartbeat-core', module: 'knowledge-base' })
    onEnterKnowledgeBase()
  }

  const renderRoute = () => {
    if (route === 'zero-core') {
      return (
        <section className="channel-stage channel-stage--root">
          <p className="channel-stage__eyebrow">ZERO CORE · 000</p>
          <h1>{t('hololake.channel.zeroCoreTitle')}</h1>
          <p className="channel-stage__lead">{t('hololake.channel.zeroCoreDescription')}</p>
          <Button className="hololake-home__primary" onClick={() => navigate('fifth-domain')}>{t('hololake.channel.enterFifthDomain')} <span>→</span></Button>
        </section>
      )
    }

    if (route === 'fifth-domain') {
      return (
        <section className="channel-stage">
          <h1>{t('hololake.channel.fifthDomainTitle')}</h1>
          <p className="channel-stage__lead">{t('hololake.channel.fifthDomainDescription')}</p>
          <div className="channel-grid">
            <RouteCard eyebrow="CANG ER · EXTERNAL NODE" title={t('hololake.channel.pufferfishTitle')} description={t('hololake.channel.pufferfishDescription')} status={t('hololake.channel.externalServerPending')} />
            <RouteCard eyebrow="ICE SHUO · PERSONAL SYSTEM" title={t('hololake.channel.eternalLakeTitle')} description={t('hololake.channel.eternalLakeDescription')} action={t('hololake.channel.enterEternalLake')} onOpen={() => navigate('eternal-lake-heart')} />
          </div>
        </section>
      )
    }

    if (route === 'eternal-lake-heart') {
      return (
        <section className="channel-stage">
          <h1>{t('hololake.channel.eternalLakeTitle')}</h1>
          <p className="channel-stage__lead">{t('hololake.channel.eternalLakeDescription')}</p>
          <div className="channel-grid channel-grid--three">
            <RouteCard eyebrow="PERSONA HOME" title={t('hololake.channel.lightLakeTitle')} description={t('hololake.channel.lightLakeDescription')} action={t('hololake.channel.enterLightLake')} onOpen={() => navigate('light-lake')} />
            <RouteCard eyebrow="ICE SHUO · HUMAN SPACE" title={t('hololake.channel.heartbeatTitle')} description={t('hololake.channel.heartbeatDescription')} action={t('hololake.channel.enterHeartbeat')} onOpen={() => navigate('heartbeat-core')} />
            <RouteCard eyebrow="ZHI ZHI · INTERNAL SUBSYSTEM" title={t('hololake.channel.loveCoreTitle')} description={t('hololake.channel.loveCoreDescription')} action={t('hololake.channel.enterLoveCore')} onOpen={() => navigate('love-core')} />
          </div>
        </section>
      )
    }

    if (route === 'light-lake') {
      return (
        <section className="channel-stage">
          <h1>{t('hololake.channel.lightLakeTitle')}</h1>
          <p className="channel-stage__lead">{t('hololake.channel.lightLakeDescription')}</p>
          <ul className="persona-route-list">
            <PersonaRoute id="ICE-GL-ZY001" title={t('hololake.channel.zhuyuanRoute')} />
            <PersonaRoute id="ICE-GL-SY001" title={t('hololake.channel.shuangyanRoute')} />
          </ul>
        </section>
      )
    }

    if (route === 'love-core') {
      return (
        <section className="channel-stage">
          <h1>{t('hololake.channel.loveCoreTitle')}</h1>
          <p className="channel-stage__lead">{t('hololake.channel.loveCoreDescription')}</p>
          <RouteCard eyebrow="ZHI ZHI · CHANNEL" title={t('hololake.channel.tomorrowTitle')} description={t('hololake.channel.tomorrowDescription')} status={t('hololake.channel.realServerConnection')} />
        </section>
      )
    }

    if (route === 'servers') {
      return (
        <section className="channel-stage">
          <p className="channel-stage__eyebrow">SERVER REGISTRY · READ ONLY</p>
          <h1>服务器与灯塔节点</h1>
          <p className="channel-stage__lead">频道先登记服务器身份、归属和接口位置；实时运行数据将在节点探针接入后显示。</p>
          <div className="server-grid">
            {registeredServers.map(server => (
              <article className="server-card" key={server.id}>
                <div className="server-card__head"><code>{server.id}</code><span data-tone={server.tone}>{server.status}</span></div>
                <h2>{server.label}</h2>
                <p>{server.owner}</p>
                <dl><div><dt>运行状态</dt><dd>等待真实探针</dd></div><div><dt>最后心跳</dt><dd>尚未接入</dd></div></dl>
                <Button variant="outline" disabled>查看运行情况 · 接口已预留</Button>
              </article>
            ))}
          </div>
        </section>
      )
    }

    return (
      <section className="channel-stage">
        <h1>{t('hololake.channel.heartbeatTitle')}</h1>
        <p className="channel-stage__lead">{t('hololake.channel.heartbeatDescription')}</p>
        <div className="channel-grid channel-grid--three">
          <RouteCard eyebrow="MODULE · KNOWLEDGE" title={t('hololake.home.moduleKnowledgeTitle')} description={t('hololake.home.moduleKnowledgeDescription')} action={t('hololake.channel.openKnowledge')} onOpen={openKnowledgeBase} />
          <RouteCard eyebrow="MODULE · VIDEO AI" title={t('hololake.channel.videoAiTitle')} description={t('hololake.channel.videoAiDescription')} status={t('hololake.channel.prototypeMounted')} />
          <RouteCard eyebrow="SYSTEM · ORIGIN HEARTBEAT" title={t('hololake.channel.bottleBabyTitle')} description={t('hololake.channel.bottleBabyDescription')} status={t('hololake.channel.yaomingOrigin')} />
          <RouteCard eyebrow="INFRASTRUCTURE · SERVERS" title="服务器与灯塔节点" description="查看频道登记的服务器编号、归属与真实监控接口状态。" action="打开服务器登记" onOpen={() => navigate('servers')} />
        </div>
        <div className="channel-stage__tools">
          <Button variant="outline" onClick={openArchitecture}>{t('hololake.home.openArchitecture')}</Button>
          <Button variant="outline" onClick={openDevelopmentRepository}>{t('hololake.home.openRepository')}</Button>
        </div>
      </section>
    )
  }

  return (
    <main className="hololake-home" aria-label={t('hololake.home.ariaLabel')}>
      <aside className="channel-rail" aria-label="光湖频道导航">
        <div className="channel-rail__heading"><span>GUANGHU</span><strong>频道工作区</strong><small>统一控制知识、模块与节点</small></div>
        <nav>
          <Button data-active={route === 'zero-core'} variant="ghost" onClick={() => navigate('zero-core')}><i data-color="cyan" />{t('hololake.channel.zeroCoreTitle')}</Button>
          <Button data-active={route === 'fifth-domain'} variant="ghost" onClick={() => navigate('fifth-domain')}><i data-color="blue" />{t('hololake.channel.fifthDomainTitle')}</Button>
          <Button data-active={['eternal-lake-heart', 'light-lake', 'heartbeat-core', 'love-core', 'servers'].includes(route)} variant="ghost" onClick={() => navigate('eternal-lake-heart')}><i data-color="violet" />{t('hololake.channel.eternalLakeTitle')}</Button>
          <Button data-active={route === 'light-lake'} variant="ghost" onClick={() => navigate('light-lake')}><i data-color="amber" />{t('hololake.channel.lightLakeTitle')}</Button>
          <Button data-active={route === 'heartbeat-core'} variant="ghost" onClick={() => navigate('heartbeat-core')}><i data-color="rose" />{t('hololake.channel.heartbeatTitle')}</Button>
          <Button data-active={route === 'love-core'} variant="ghost" onClick={() => navigate('love-core')}><i data-color="pink" />{t('hololake.channel.loveCoreTitle')}</Button>
          <Button data-active={route === 'servers'} variant="ghost" onClick={() => navigate('servers')}><i data-color="green" />服务器与节点</Button>
        </nav>
        <div className="channel-rail__modules"><span>已挂载模块</span><b>知识湖</b><b>短剧视频 AI</b><b>人格体恢复路径</b></div>
      </aside>

      <div className="channel-workspace">
        <nav className="channel-breadcrumb" aria-label={t('hololake.channel.breadcrumbLabel')}>
          <Button variant="ghost" size="sm" onClick={() => navigate('zero-core')}>{t('hololake.channel.zeroCoreTitle')}</Button>
          {route !== 'zero-core' && <><span>›</span><Button variant="ghost" size="sm" onClick={() => navigate('fifth-domain')}>{t('hololake.channel.fifthDomainTitle')}</Button></>}
          {!['zero-core', 'fifth-domain'].includes(route) && <><span>›</span><Button variant="ghost" size="sm" onClick={() => navigate('eternal-lake-heart')}>{t('hololake.channel.eternalLakeTitle')}</Button></>}
        </nav>
        {renderRoute()}
      </div>

      <Dialog open={architectureOpen} onOpenChange={setArchitectureOpen}>
        <DialogContent className="guanghu-architecture" aria-label={t('hololake.architecture.title')}>
          <DialogHeader>
            <DialogTitle>{t('hololake.architecture.title')}</DialogTitle>
            <DialogDescription>{t('hololake.architecture.description')}</DialogDescription>
          </DialogHeader>
          <ol className="guanghu-architecture__routes">
            {architectureRoutes.map(([id, title, description]) => (
              <li key={id}>
                <code>{id}</code>
                <div><strong>{t(title)}</strong><p>{t(description)}</p></div>
              </li>
            ))}
          </ol>
          <p className="guanghu-architecture__route">GLW-ENTRY-001 → FD-LANGUAGE-001 → TCS-ROOT-001 → GLS-SYS-ARCH-001 → ELH-LAMP-001</p>
        </DialogContent>
      </Dialog>
    </main>
  )
}