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
}

const modules: Array<{
  title: TranslationKey
  description: TranslationKey
  action: TranslationKey
  kind: 'knowledge' | 'architecture' | 'repository' | 'authorization'
}> = [
  { title: 'hololake.home.moduleKnowledgeTitle', description: 'hololake.home.moduleKnowledgeDescription', action: 'hololake.home.enterKnowledge', kind: 'knowledge' },
  { title: 'hololake.home.moduleArchitectureTitle', description: 'hololake.home.moduleArchitectureDescription', action: 'hololake.home.openArchitecture', kind: 'architecture' },
  { title: 'hololake.home.moduleRepositoryTitle', description: 'hololake.home.moduleRepositoryDescription', action: 'hololake.home.openRepository', kind: 'repository' },
  { title: 'hololake.home.moduleAuthorizationTitle', description: 'hololake.home.moduleAuthorizationDescription', action: 'hololake.home.authorizationStatus', kind: 'authorization' },
]

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'],
]

export function HoloLakeHome({ locale, onEnterKnowledgeBase }: HoloLakeHomeProps) {
  const [architectureOpen, setArchitectureOpen] = useState(false)
  const t = (key: TranslationKey) => translate(locale, key)

  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 runModuleAction = (kind: typeof modules[number]['kind']) => {
    if (kind === 'knowledge') onEnterKnowledgeBase()
    if (kind === 'architecture') openArchitecture()
    if (kind === 'repository') openDevelopmentRepository()
  }

  return (
    <main className="hololake-home" aria-label={t('hololake.home.ariaLabel')}>
      <section className="hololake-home__hero">
        <div className="hololake-home__halo" aria-hidden="true" />
        <p className="hololake-home__eyebrow">{t('hololake.home.eyebrow')}</p>
        <h1>HoloLake <em>Era</em></h1>
        <p className="hololake-home__lead">{t('hololake.home.lead')}</p>
        <p className="hololake-home__copy">{t('hololake.home.copy')}</p>
        <div className="hololake-home__actions">
          <Button className="hololake-home__primary" onClick={onEnterKnowledgeBase}>{t('hololake.home.enterKnowledge')} <span>→</span></Button>
          <span className="hololake-home__status"><i /> {t('hololake.home.status')}</span>
        </div>
      </section>

      <section className="hololake-home__signal-grid" aria-label={t('hololake.home.systemStatus')}>
        <article><span>{t('hololake.home.worldRoot')}</span><strong>SYS-GLW-0001</strong><small>{t('hololake.home.resolved')}</small></article>
        <article><span>{t('hololake.home.domesticNode')}</span><strong>JD-FD-PRIMARY</strong><small>{t('hololake.home.primaryRoute')}</small></article>
        <article><span>{t('hololake.home.executionSafety')}</span><strong>{t('hololake.home.humanInLoop')}</strong><small>{t('hololake.home.noExecutionWithoutAuthorization')}</small></article>
      </section>

      <section className="hololake-home__modules">
        <div className="hololake-home__section-head"><span>01 / {t('hololake.home.systemEntry')}</span><p>{t('hololake.home.sectionCopy')}</p></div>
        <div className="hololake-home__module-grid">
          {modules.map(({ title, description, action, kind }, index) => (
            <article className="hololake-module" key={kind}>
              <span className="hololake-module__number">0{index + 1}</span>
              <h2>{t(title)}</h2>
              <p>{t(description)}</p>
              {kind === 'authorization'
                ? <span className="hololake-module__soon">{t(action)}</span>
                : <Button variant="link" onClick={() => runModuleAction(kind)}>{t(action)} <span>↗</span></Button>}
            </article>
          ))}
        </div>
      </section>

      <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>
  )
}