import React, { useEffect, useMemo, useState } from 'react';
import { usePortalStore } from './store/usePortalStore';
import { TopRibbon } from './components/TopRibbon';
import { ServiceCard } from './components/ServiceCard';
import { SshShelf } from './components/SshShelf';
import { CommandPalette } from './components/CommandPalette';
import { AgyTerminalModal } from './components/AgyTerminalModal';
import { AuthGateCard } from './components/AuthGateModal';
import { StorybookWorkbench } from './components/StorybookWorkbench';
import { LAYOUT_PRESETS } from './design-system/tokens';
import type { ServiceGroup } from './types/telemetry';

export const App: React.FC = () => {
  const {
    telemetry,
    toast,
    viewMode,
    layoutPreset,
    fetchTelemetry,
    setShowCmdPalette,
    getEffectiveMode,
    routeMode,
  } = usePortalStore();

  const [authRedirect, setAuthRedirect] = useState<string | null>(() => {
    if (typeof window === 'undefined') return null;
    const params = new URLSearchParams(window.location.search);
    return params.get('auth_redirect');
  });

  useEffect(() => {
    fetchTelemetry();
    const timer = setInterval(fetchTelemetry, 3000);

    const onKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setShowCmdPalette(true);
      }
    };
    window.addEventListener('keydown', onKeyDown);
    return () => {
      clearInterval(timer);
      window.removeEventListener('keydown', onKeyDown);
    };
  }, [fetchTelemetry, setShowCmdPalette]);

  const activeModeLabel = useMemo(() => {
    const m = getEffectiveMode();
    if (m === 'lan') return 'LAN 局域网极速直连 (192.168.31.x)';
    if (m === 'home10443') return '10443 家宽公网 HTTPS 直连';
    return '443 免端口 HTTPS 直达 (*.961504.xyz)';
  }, [getEffectiveMode, routeMode]);

  const gridClass =
    LAYOUT_PRESETS[layoutPreset]?.gridClass || LAYOUT_PRESETS['homepage-3col'].gridClass;

  const serviceGroups = useMemo<ServiceGroup[]>(() => {
    const t = telemetry;
    return [
      {
        title: '核心工作台与私有云存储',
        subtitle: 'Core Workbench & Storage',
        showRouteHint: true,
        items: [
          {
            id: 'agy',
            title: 'AGY 云端工作台',
            subtitle: 'agy.961504.xyz · ttyd + tmux',
            iconUrl: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/google-gemini.png',
            online: t.services.agy,
            actionType: 'drawer',
            desc: 'M6 Mac mini 上的 24 小时常驻 AI 编程终端，已同步 Google 登录态并锁定新加坡出口，关掉网页后台继续运行。',
            edgeUrl: 'https://agy.961504.xyz',
            homeUrl: 'https://agy.home.961504.xyz:10443',
            lanUrl: 'http://192.168.31.164:7681',
            stats: [
              { label: 'M6 CPU 负载', value: `${t.mini.cpu_pct}%` },
              { label: '已用内存', value: `${t.mini.mem_used_gb} / 24 GB` },
              {
                label: 'tmux 会话',
                value: t.mini.agy_tmux ? '常驻运行中' : '待机',
                highlight: true,
              },
            ],
          },
          {
            id: 'zspace',
            title: '极空间 Z4 私有云',
            subtitle: '192.168.31.185 · 20TB RAID 存储池',
            iconUrl: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/synology-drive.png',
            online: t.services.nas,
            desc: '家庭 20TB 大容量存储中心、极影视蓝光影院与手机相册备份，已自动 SMB 挂载至 Mac mini ~/nas。',
            edgeUrl: 'https://z4.home.961504.xyz:10443',
            homeUrl: 'https://z4.home.961504.xyz:10443',
            lanUrl: 'http://192.168.31.185:5055',
            stats: [
              { label: '剩余可用', value: `${t.nas.free_tb} TB`, highlight: true },
              { label: '已用容量', value: `${t.nas.used_tb} TB (${t.nas.pct}%)` },
              { label: 'SMB 挂载', value: t.nas.mounted ? '~/nas 已挂载' : '重连中' },
            ],
          },
          {
            id: 'vaultwarden',
            title: 'Vaultwarden 密码保险箱',
            subtitle: 'vw.961504.xyz · Bitwarden 兼容',
            iconUrl: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/vaultwarden.png',
            online: t.services.vaultwarden,
            actionType: 'backup',
            desc: '自托管全平台加密密码库，支持 iOS / Android / 浏览器插件自动填充，每天凌晨 03:30 自动打包灾备至极空间。',
            edgeUrl: 'https://vw.961504.xyz',
            homeUrl: 'https://vw.home.961504.xyz:10443',
            lanUrl: 'http://192.168.31.164:8222',
            stats: [
              { label: '容器状态', value: 'Healthy', highlight: true },
              { label: '最近极空间灾备', value: t.nas.latest_backup },
              { label: 'Mac SSD 占用', value: `${t.mini.disk_pct}%` },
            ],
          },
        ],
      },
      {
        title: '网络网关、AI 专线与外部哨兵',
        subtitle: 'Network Gateway & Cloud Edge',
        showRouteHint: false,
        items: [
          {
            id: 'clash',
            title: 'Mihomo 路由分流面板',
            subtitle: '192.168.31.1:9999 · ShellCrash',
            iconUrl: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/clash.png',
            online: t.services.clash,
            desc: '小米主路由器透明网关控制台，实时监控全屋设备流量、分流规则与狮城 AI 算力专线锁定状态。',
            edgeUrl: 'https://clash.home.961504.xyz:10443/ui/',
            homeUrl: 'https://clash.home.961504.xyz:10443/ui/',
            lanUrl: 'http://192.168.31.1:9999/ui/',
            stats: [
              { label: 'AI 锁定策略', value: '狮城节点', highlight: true },
              {
                label: '新加坡延迟',
                value: t.network.sg_delay_ms > 0 ? `${t.network.sg_delay_ms} ms` : '直连',
              },
              { label: '固定出口 IP', value: t.network.sg_egress_ip },
            ],
          },
          {
            id: 'router',
            title: '小米主路由器后台',
            subtitle: '192.168.31.1 · PPPoE 公网网关',
            iconUrl: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/openwrt.png',
            online: t.services.router,
            desc: '管理家庭联通公网宽带拨号、DHCP 静态 IP 绑定、10443 与 41641 端口转发及全屋内网 Split-DNS。',
            edgeUrl: 'https://router.home.961504.xyz:10443',
            homeUrl: 'https://router.home.961504.xyz:10443',
            lanUrl: 'http://192.168.31.1',
            stats: [
              { label: '联通公网 IPv4', value: t.network.home_wan_ip, highlight: true },
              { label: '泛域名 DDNS', value: '*.home.961504.xyz' },
              { label: '内网网关', value: '192.168.31.1' },
            ],
          },
          {
            id: 'uptime',
            title: 'Uptime Kuma 外部哨兵',
            subtitle: 'status.961504.xyz · SG Azure',
            iconUrl: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/uptime-kuma.png',
            online: t.services.uptime,
            desc: '独立部署在新加坡 Azure 公有云上的 24 小时外部监控哨兵，通过 Tailscale P2P 专线实时探测家庭服务。',
            edgeUrl: 'https://status.961504.xyz',
            homeUrl: 'https://status.961504.xyz',
            lanUrl: 'https://status.961504.xyz',
            stats: [
              { label: '云端公网 IP', value: '104.43.105.243' },
              { label: 'Tailscale 专线', value: '100.115.204.51' },
              { label: '外部探测状态', value: '100% 在线', highlight: true },
            ],
          },
        ],
      },
    ];
  }, [telemetry]);

  return (
    <div className="min-h-screen flex flex-col">
      {/* Toast Notification */}
      {toast && (
        <div className="fixed bottom-5 right-5 z-50 hl-card px-4 py-3 flex items-center gap-2.5 shadow-2xl">
          <span className="w-2 h-2 rounded-full" style={{ backgroundColor: 'var(--success)' }} />
          <span className="text-xs font-medium">{toast}</span>
        </div>
      )}

      {/* 1. Standard Two-Tier AppShell Header & Telemetry Subheader */}
      <TopRibbon />

      {/* 2. View Switch: Dashboard vs Storybook Workbench */}
      {viewMode === 'storybook' ? (
        <StorybookWorkbench />
      ) : (
        <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-7">
          {serviceGroups.map((group) => (
            <section key={group.title} className="space-y-3">
              <div className="flex items-center justify-between px-0.5">
                <div className="flex items-center gap-2">
                  <h2
                    className="text-xs font-semibold uppercase tracking-wider"
                    style={{ color: 'var(--text-muted)' }}
                  >
                    {group.title}
                  </h2>
                  <span
                    className="text-[11px] font-mono-num"
                    style={{ color: 'var(--text-subtle)' }}
                  >
                    · {group.subtitle}
                  </span>
                </div>
                {group.showRouteHint && (
                  <span
                    className="text-[11px] font-mono-num hidden sm:inline"
                    style={{ color: 'var(--text-subtle)' }}
                  >
                    当前路由模式: {activeModeLabel}
                  </span>
                )}
              </div>

              <div className={`grid ${gridClass}`}>
                {group.items.map((card) => (
                  <ServiceCard key={card.id} card={card} />
                ))}
              </div>
            </section>
          ))}

          {/* 3. Bottom SSH Quick Copy & Maintenance Shelf */}
          <SshShelf />
        </main>
      )}

      {/* 4. Global Cmd+K Command Palette */}
      <CommandPalette />

      {/* 5. Embedded AGY Cloud Terminal Modal */}
      <AgyTerminalModal />

      {/* 6. Custom SSO Auth Gate Modal (Replaces Browser Native Basic Auth Popup!) */}
      {authRedirect && (
        <div className="fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-4">
          <AuthGateCard
            targetUrl={authRedirect}
            onSuccess={() => {
              window.location.href = authRedirect;
            }}
            onCancel={() => {
              setAuthRedirect(null);
              window.history.replaceState({}, '', '/');
            }}
          />
        </div>
      )}
    </div>
  );
};