'use client'

/**
 * LiveDashboard - SSE 即時戰情室
 * ==============================
 * Phase 2.5: Magic UI 視覺升級
 * i18n: 100% 使用 useTranslations，禁止任何寫死字串
 */

import React from 'react'
import { useTranslations } from 'next-intl'
import { useHosts, useOverallStatus, useAlerts, useMockMode } from '@/stores/dashboard.store'
import { LiveHostCard } from './live-host-card'
import { ConnectionStatus } from './connection-status'
import { HostCardGrid } from './host-card'
import {
  GlassCard,
  GlassCardHeader,
  GlassCardTitle,
  GlassCardContent,
} from '@/components/ui/glass-card'
import { StatusOrb } from '@/components/ui/status-orb'
import { cn } from '@/lib/utils'
import {
  Server,
  AlertTriangle,
  CheckCircle2,
  Activity,
  Sparkles,
  Eye,
  Brain,
} from 'lucide-react'

// =============================================================================
// Config
// =============================================================================

const _getApiBaseUrl = () => {
  if (typeof window === 'undefined') return ''
  // 統帥鐵律: 禁止任何 Fallback IP
  const url = process.env.NEXT_PUBLIC_API_URL
  if (!url) {
    console.error('[AWOOOI ERROR] Missing NEXT_PUBLIC_API_URL')
    return ''
  }
  return url
}

const HOST_IPS = ['192.168.0.110', '192.168.0.112', '192.168.0.120', '192.168.0.188']

// =============================================================================
// Component
// =============================================================================

interface LiveDashboardProps {
  locale: string
}

export function LiveDashboard({ locale: _locale }: LiveDashboardProps) {
  const t = useTranslations('dashboard')
  const tBrand = useTranslations('brand')
  const tHost = useTranslations('host')

  // Phase 19 修復: SSE 連接已移至 AppLayout 全局管理
  // const { connect, disconnect } = useDashboardStore()
  const hosts = useHosts()
  const overallStatus = useOverallStatus()
  const alerts = useAlerts()
  const _mockMode = useMockMode()

  // Host fallback data with i18n
  const HOST_FALLBACKS: Record<string, { name: string; role: string; services: Array<{ name: string; status: 'idle'; port?: number }> }> = {
    '192.168.0.110': {
      name: tHost('devops.name'),
      role: 'devops',
      services: [
        { name: 'Harbor', status: 'idle', port: 5000 },
        { name: 'GH Runner', status: 'idle' },
        { name: 'Docker', status: 'idle', port: 2375 },
      ],
    },
    '192.168.0.112': {
      name: tHost('security.name'),
      role: 'security',
      services: [
        { name: 'Scanner API', status: 'idle', port: 8080 },
        { name: 'Nmap', status: 'idle' },
        { name: 'Nuclei', status: 'idle' },
      ],
    },
    '192.168.0.120': {
      name: tHost('k3s.name'),
      role: 'k3s',
      services: [
        { name: 'K3s Server', status: 'idle', port: 6443 },
        { name: 'awoooi-prod', status: 'idle', port: 32335 },
        { name: 'Traefik', status: 'idle', port: 80 },
      ],
    },
    '192.168.0.188': {
      name: tHost('aiWeb.name'),
      role: 'ai_web',
      services: [
        { name: 'Nginx', status: 'idle', port: 443 },
        { name: 'PostgreSQL', status: 'idle', port: 5432 },
        { name: 'Redis', status: 'idle', port: 6380 },
        { name: 'Ollama', status: 'idle', port: 11434 },
        { name: 'OpenClaw', status: 'idle', port: 8089 },
        { name: 'SigNoz', status: 'idle', port: 3301 },
      ],
    },
  }

  // Phase 19 修復: SSE 連接已移至 AppLayout 全局管理
  // useEffect(() => {
  //   const apiBaseUrl = getApiBaseUrl()
  //   connect(apiBaseUrl)
  //   return () => disconnect()
  // }, [connect, disconnect])

  return (
    <div className="space-y-6">
      {/* Header Stats */}
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div>
          <h2 className="font-heading text-3xl font-bold text-nothing-gray-900 tracking-tight">
            {t('title')}
          </h2>
          <p className="text-nothing-gray-500 mt-1">{tBrand('slogan')}</p>
        </div>

        <div className="flex items-center gap-4">
          <ConnectionStatus showLabel showLastUpdate />
        </div>
      </div>

      {/* Main Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Four Host Cards */}
        <div className="lg:col-span-2">
          <HostCardGrid>
            {HOST_IPS.map((ip) => (
              <LiveHostCard
                key={ip}
                ip={ip}
                fallbackData={HOST_FALLBACKS[ip]}
              />
            ))}
          </HostCardGrid>
        </div>

        {/* Sidebar */}
        <div className="lg:col-span-1 space-y-4">
          <OpenClawPanel />
          <StatsPanel
            hostsCount={hosts.length}
            alertsCount={alerts.count}
            pendingApprovals={alerts.pending}
            overallStatus={overallStatus}
          />
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// OpenClaw Panel
// =============================================================================

function OpenClawPanel() {
  const t = useTranslations('openclaw')
  const tCommon = useTranslations('common')
  const tHost = useTranslations('host')
  const hosts = useHosts()

  const warningHost = hosts.find(
    (h) => h.status === 'degraded' || h.status === 'unhealthy'
  )

  // Get host display name
  const getHostDisplayName = (hostName: string): string => {
    if (hostName.includes('DevOps')) return tHost('devops.name')
    if (hostName.includes('Kali')) return tHost('security.name')
    if (hostName.includes('K3s')) return tHost('k3s.name')
    if (hostName.includes('AI+Web') || hostName.includes('AI')) return tHost('aiWeb.name')
    return hostName
  }

  const insight = warningHost
    ? {
        type: t('statusWarning'),
        message: t('messageWarning', { host: getHostDisplayName(warningHost.name) }),
      }
    : {
        type: t('statusOk'),
        message: t('messageOk'),
      }

  return (
    <GlassCard variant="copilot" className="relative overflow-hidden">
      {/* Animated scan line */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute h-px w-full bg-gradient-to-r from-transparent via-status-thinking to-transparent animate-scan" />
      </div>

      {/* Sparkle effect */}
      <div className="absolute top-3 right-3">
        <Sparkles className="w-4 h-4 text-status-thinking/50 animate-pulse" />
      </div>

      <GlassCardHeader>
        <div className="flex items-center gap-3">
          <div className="relative">
            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-status-thinking/20 to-status-thinking/10 flex items-center justify-center border border-status-thinking/20">
              <Brain className="w-6 h-6 text-status-thinking" />
            </div>
            {/* Breathing indicator */}
            <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3">
              <span className="absolute inline-flex h-full w-full rounded-full bg-status-thinking opacity-75 animate-ping" />
              <span className="relative inline-flex rounded-full h-3 w-3 bg-status-thinking" />
            </div>
          </div>
          <div>
            <h3 className="font-heading font-bold text-nothing-gray-900">
              {t('name')}
            </h3>
            <span className="text-[10px] text-status-thinking font-mono uppercase tracking-wider">
              {t('monitoring')}
            </span>
          </div>
        </div>
        <span className="text-[10px] text-nothing-gray-400 font-mono bg-nothing-gray-100 px-2 py-1 rounded">v5.0.0</span>
      </GlassCardHeader>

      <GlassCardContent>
        <div className={cn(
          'rounded-xl p-4 mb-4 border transition-all duration-300',
          warningHost
            ? 'bg-status-warning/5 border-status-warning/20'
            : 'bg-status-healthy/5 border-status-healthy/20'
        )}>
          <div className="flex items-start gap-2 mb-2">
            <span
              className={cn(
                'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-mono font-semibold',
                warningHost
                  ? 'bg-status-warning/10 text-status-warning'
                  : 'bg-status-healthy/10 text-status-healthy'
              )}
            >
              {warningHost ? (
                <AlertTriangle className="w-3 h-3" />
              ) : (
                <CheckCircle2 className="w-3 h-3" />
              )}
              {insight.type}
            </span>
          </div>
          <p className="text-sm text-nothing-gray-700 leading-relaxed">
            {insight.message}
          </p>
        </div>

        {warningHost && (
          <div className="flex gap-2">
            <button className={cn(
              'flex-1 flex items-center justify-center gap-2',
              'px-4 py-2.5 rounded-xl font-medium text-sm',
              'bg-gradient-to-br from-status-thinking to-status-thinking/90 text-white',
              'hover:shadow-[0_0_20px_rgba(139,92,246,0.3)]',
              'transition-all duration-300'
            )}>
              <Eye className="w-4 h-4" />
              {tCommon('viewDetails')}
            </button>
            <button className="px-4 py-2.5 bg-nothing-gray-100 text-nothing-gray-600 rounded-xl font-medium text-sm hover:bg-nothing-gray-200 transition-colors">
              {tCommon('later')}
            </button>
          </div>
        )}
      </GlassCardContent>
    </GlassCard>
  )
}

// =============================================================================
// Stats Panel
// =============================================================================

interface StatsPanelProps {
  hostsCount: number
  alertsCount: number
  pendingApprovals: number
  overallStatus: string
}

function StatsPanel({
  hostsCount,
  alertsCount,
  pendingApprovals,
  overallStatus,
}: StatsPanelProps) {
  const t = useTranslations('dashboard')

  const stats = [
    {
      label: t('activeNodes'),
      value: `${hostsCount}/4`,
      icon: Server,
      color: hostsCount === 4 ? 'healthy' : hostsCount >= 2 ? 'warning' : 'critical',
    },
    {
      label: t('pendingAlerts'),
      value: alertsCount,
      icon: AlertTriangle,
      color: alertsCount === 0 ? 'idle' : alertsCount <= 2 ? 'warning' : 'critical',
    },
    {
      label: t('pendingApprovals'),
      value: pendingApprovals,
      icon: Eye,
      color: pendingApprovals === 0 ? 'idle' : 'critical',
    },
  ]

  return (
    <GlassCard>
      <div className="flex items-center gap-2 mb-4">
        <Activity className="w-4 h-4 text-nothing-gray-500" />
        <GlassCardTitle>
          {t('liveStats')}
        </GlassCardTitle>
      </div>
      <GlassCardContent>
        <div className="space-y-3">
          {stats.map((stat) => (
            <div
              key={stat.label}
              className={cn(
                'flex items-center justify-between p-3 rounded-xl border transition-all duration-200',
                stat.color === 'healthy'
                  ? 'bg-status-healthy/5 border-status-healthy/20 hover:border-status-healthy/30'
                  : stat.color === 'warning'
                    ? 'bg-status-warning/5 border-status-warning/20 hover:border-status-warning/30'
                    : stat.color === 'critical'
                      ? 'bg-status-critical/5 border-status-critical/20 hover:border-status-critical/30'
                      : 'bg-nothing-gray-50/50 border-nothing-gray-100 hover:border-nothing-gray-200'
              )}
            >
              <div className="flex items-center gap-2.5">
                <stat.icon className={cn(
                  'w-4 h-4',
                  stat.color === 'healthy'
                    ? 'text-status-healthy'
                    : stat.color === 'warning'
                      ? 'text-status-warning'
                      : stat.color === 'critical'
                        ? 'text-status-critical'
                        : 'text-nothing-gray-400'
                )} />
                <span className="text-sm text-nothing-gray-600">
                  {stat.label}
                </span>
              </div>
              <span
                className={cn(
                  'font-mono text-lg font-bold tabular-nums',
                  stat.color === 'healthy'
                    ? 'text-status-healthy'
                    : stat.color === 'warning'
                      ? 'text-status-warning'
                      : stat.color === 'critical'
                        ? 'text-status-critical'
                        : 'text-nothing-gray-400'
                )}
              >
                {stat.value}
              </span>
            </div>
          ))}

          {/* Overall Status - Special Card */}
          <div className="mt-4 pt-4 border-t border-nothing-gray-100">
            <div className={cn(
              'flex items-center justify-between p-4 rounded-xl',
              'bg-gradient-to-br',
              overallStatus === 'healthy'
                ? 'from-status-healthy/10 to-status-healthy/5 border border-status-healthy/20'
                : overallStatus === 'degraded'
                  ? 'from-status-warning/10 to-status-warning/5 border border-status-warning/20'
                  : 'from-status-critical/10 to-status-critical/5 border border-status-critical/20'
            )}>
              <div className="flex items-center gap-2.5">
                <CheckCircle2 className={cn(
                  'w-5 h-5',
                  overallStatus === 'healthy'
                    ? 'text-status-healthy'
                    : overallStatus === 'degraded'
                      ? 'text-status-warning'
                      : 'text-status-critical'
                )} />
                <span className="text-sm font-medium text-nothing-gray-700">
                  {t('overallStatus')}
                </span>
              </div>
              <StatusOrb
                status={overallStatus === 'healthy' ? 'healthy' : overallStatus === 'degraded' ? 'warning' : 'critical'}
                size="lg"
                glow
                pulse={overallStatus !== 'healthy'}
              />
            </div>
          </div>
        </div>
      </GlassCardContent>
    </GlassCard>
  )
}
