import React, { useEffect, useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Plug,
  Box,
  CircleCheck,
  CircleX,
  Loader2,
  Info,
  Container,
  Clock,
  Cpu,
  HardDrive,
  Network,
  Image,
  FolderOpen,
} from 'lucide-react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  ApiRespPluginSystemStatus,
  ApiRespBoxStatus,
  BoxSessionInfo,
} from '@/app/infra/entities/api';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { httpClient } from '@/app/infra/http/HttpClient';

type StatusState = 'ok' | 'disabled' | 'failed' | null;

function StatusDot({ state }: { state: StatusState }) {
  if (state === null)
    return <span className="w-2 h-2 rounded-full bg-muted-foreground/40" />;
  if (state === 'ok')
    return <span className="w-2 h-2 rounded-full bg-green-500" />;
  if (state === 'disabled')
    return <span className="w-2 h-2 rounded-full bg-muted-foreground/60" />;
  return <span className="w-2 h-2 rounded-full bg-red-500" />;
}

interface SystemStatusCardProps {
  refreshKey?: number;
}

export default function SystemStatusCard({
  refreshKey,
}: SystemStatusCardProps) {
  const { t } = useTranslation();
  const [pluginStatus, setPluginStatus] =
    useState<ApiRespPluginSystemStatus | null>(null);
  const [boxStatus, setBoxStatus] = useState<ApiRespBoxStatus | null>(null);
  const [boxSessions, setBoxSessions] = useState<BoxSessionInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [dialogOpen, setDialogOpen] = useState(false);

  const fetchStatus = useCallback(async () => {
    try {
      const [plugin, box] = await Promise.all([
        httpClient.getPluginSystemStatus().catch(() => null),
        httpClient.getBoxStatus().catch(() => null),
      ]);
      const sessions = box?.hidden
        ? []
        : await httpClient.getBoxSessions().catch(() => [] as BoxSessionInfo[]);
      setPluginStatus(plugin);
      setBoxStatus(box);
      setBoxSessions(Array.isArray(sessions) ? sessions : []);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchStatus();
    const interval = setInterval(fetchStatus, 30_000);
    return () => clearInterval(interval);
  }, [fetchStatus, refreshKey]);

  const pluginOk = pluginStatus
    ? pluginStatus.is_enable && pluginStatus.is_connected
    : null;
  const pluginState: StatusState = pluginStatus
    ? pluginStatus.is_enable && pluginStatus.is_connected
      ? 'ok'
      : !pluginStatus.is_enable
        ? 'disabled'
        : 'failed'
    : null;
  const boxOk = boxStatus ? boxStatus.available : null;
  const hideBoxRuntime = boxStatus?.hidden === true;
  // Box has three observable states: connected (ok), disabled by config
  // (enabled = false → distinct gray dot + "disabled" hint), and configured
  // but failed (red dot + connector_error). The dashboard must distinguish
  // them so operators can tell intentional-off from misconfigured.
  const boxState: StatusState = boxStatus
    ? boxStatus.available
      ? 'ok'
      : boxStatus.enabled === false
        ? 'disabled'
        : 'failed'
    : null;

  const handleOpenDialog = (e: React.MouseEvent) => {
    e.stopPropagation();
    fetchStatus();
    setDialogOpen(true);
  };

  if (loading) {
    return (
      <Card className="transition-all duration-300">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
          <CardTitle className="text-sm font-medium text-muted-foreground">
            {t('monitoring.systemStatus')}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-2">
            <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <>
      <Card className="transition-all duration-300 group">
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
          <CardTitle className="text-sm font-medium text-muted-foreground">
            {t('monitoring.systemStatus')}
          </CardTitle>
          <Button
            variant="ghost"
            size="icon"
            className="h-7 w-7 text-muted-foreground hover:text-foreground"
            onClick={handleOpenDialog}
          >
            <Info className="w-4 h-4" />
          </Button>
        </CardHeader>
        <CardContent className="space-y-2">
          <div className="flex items-center gap-2">
            <StatusDot state={pluginState} />
            <Plug className="w-3.5 h-3.5 text-muted-foreground" />
            <span className="text-sm">{t('monitoring.pluginRuntime')}</span>
          </div>
          {!hideBoxRuntime && (
            <div className="flex items-center gap-2">
              <StatusDot state={boxState} />
              <Box className="w-3.5 h-3.5 text-muted-foreground" />
              <span className="text-sm">{t('monitoring.boxRuntime')}</span>
            </div>
          )}
        </CardContent>
      </Card>

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
          <DialogHeader>
            <DialogTitle>{t('monitoring.systemStatus')}</DialogTitle>
          </DialogHeader>

          <TooltipProvider>
            <div className="space-y-5 overflow-y-auto flex-1 pr-1">
              {/* Plugin Runtime */}
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <Plug className="w-4 h-4 text-muted-foreground" />
                  <span className="text-sm font-semibold">
                    {t('monitoring.pluginRuntime')}
                  </span>
                </div>
                <div className="ml-6 text-sm space-y-1">
                  <div className="flex items-center gap-1.5">
                    {pluginOk ? (
                      <CircleCheck className="w-4 h-4 text-green-600" />
                    ) : (
                      <CircleX className="w-4 h-4 text-red-500" />
                    )}
                    <span
                      className={
                        pluginOk
                          ? 'text-green-600 font-medium'
                          : 'text-red-500 font-medium'
                      }
                    >
                      {pluginOk
                        ? t('monitoring.connected')
                        : pluginStatus && !pluginStatus.is_enable
                          ? t('monitoring.disabled')
                          : t('monitoring.disconnected')}
                    </span>
                  </div>
                  {pluginStatus && !pluginStatus.is_enable && (
                    <p className="text-muted-foreground text-xs">
                      {t('monitoring.pluginDisabled')}
                    </p>
                  )}
                  {pluginStatus &&
                    !pluginOk &&
                    pluginStatus.is_enable &&
                    pluginStatus.plugin_connector_error &&
                    pluginStatus.plugin_connector_error !== 'ok' && (
                      <p className="text-red-400 text-xs break-all">
                        {pluginStatus.plugin_connector_error}
                      </p>
                    )}
                </div>
              </div>

              {!hideBoxRuntime && (
                <>
                  <div className="border-t" />

                  {/* Box Runtime */}
                  <div className="space-y-2">
                    <div className="flex items-center gap-2">
                      <Box className="w-4 h-4 text-muted-foreground" />
                      <span className="text-sm font-semibold">
                        {t('monitoring.boxRuntime')}
                      </span>
                    </div>
                    <div className="ml-6 text-sm space-y-1">
                      <div className="flex items-center gap-1.5">
                        {boxState === 'ok' ? (
                          <CircleCheck className="w-4 h-4 text-green-600" />
                        ) : (
                          <CircleX
                            className={
                              boxState === 'disabled'
                                ? 'w-4 h-4 text-muted-foreground'
                                : 'w-4 h-4 text-red-500'
                            }
                          />
                        )}
                        <span
                          className={
                            boxState === 'ok'
                              ? 'text-green-600 font-medium'
                              : boxState === 'disabled'
                                ? 'text-muted-foreground font-medium'
                                : 'text-red-500 font-medium'
                          }
                        >
                          {boxState === 'ok'
                            ? t('monitoring.connected')
                            : boxState === 'disabled'
                              ? t('monitoring.disabled')
                              : t('monitoring.disconnected')}
                        </span>
                      </div>
                      {boxState === 'disabled' && (
                        <p className="text-muted-foreground text-xs">
                          {t('monitoring.boxDisabled')}
                        </p>
                      )}
                      {boxState === 'failed' && boxStatus?.connector_error && (
                        <p className="text-red-400 text-xs break-all">
                          {boxStatus.connector_error}
                        </p>
                      )}
                      {boxStatus && (
                        <div className="text-muted-foreground text-xs space-y-0.5">
                          {boxStatus.backend && (
                            <p>
                              {t('monitoring.boxBackend')}:{' '}
                              <span className="text-foreground font-mono">
                                {boxStatus.backend.name}
                              </span>
                            </p>
                          )}
                          <p>
                            {t('monitoring.boxProfile')}:{' '}
                            <span className="text-foreground font-mono">
                              {boxStatus.profile}
                            </span>
                          </p>
                          {boxOk && boxStatus.active_sessions !== undefined && (
                            <p>
                              {t('monitoring.boxSandboxes')}:{' '}
                              <span className="text-foreground font-mono">
                                {boxStatus.active_sessions}
                              </span>
                            </p>
                          )}
                        </div>
                      )}

                      {/* Active Sandboxes */}
                      {boxSessions.length > 0 && (
                        <div className="mt-3 space-y-2">
                          {boxSessions.map((session) => (
                            <div
                              key={session.session_id}
                              className="rounded-lg border p-3 space-y-2"
                            >
                              <div className="flex items-center gap-1.5 min-w-0">
                                <Container className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <span className="font-mono font-semibold text-foreground truncate text-sm">
                                      {session.session_id}
                                    </span>
                                  </TooltipTrigger>
                                  <TooltipContent>
                                    {session.session_id}
                                  </TooltipContent>
                                </Tooltip>
                              </div>
                              <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 text-xs">
                                <div className="flex items-center gap-1.5 text-muted-foreground min-w-0">
                                  <Image className="w-3 h-3 flex-shrink-0" />
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <span className="text-foreground font-mono truncate">
                                        {session.image}
                                      </span>
                                    </TooltipTrigger>
                                    <TooltipContent>
                                      {session.image}
                                    </TooltipContent>
                                  </Tooltip>
                                </div>
                                <div className="flex items-center gap-1.5 text-muted-foreground">
                                  <HardDrive className="w-3 h-3 flex-shrink-0" />
                                  <span className="text-foreground">
                                    {session.backend_name}
                                  </span>
                                </div>
                                <div className="flex items-center gap-1.5 text-muted-foreground">
                                  <Cpu className="w-3 h-3 flex-shrink-0" />
                                  <span className="text-foreground">
                                    {session.cpus} CPU / {session.memory_mb} MB
                                  </span>
                                </div>
                                <div className="flex items-center gap-1.5 text-muted-foreground">
                                  <Network className="w-3 h-3 flex-shrink-0" />
                                  <span className="text-foreground">
                                    {session.network}
                                  </span>
                                </div>
                                {session.host_path && (
                                  <div className="flex items-center gap-1.5 text-muted-foreground col-span-2 min-w-0">
                                    <FolderOpen className="w-3 h-3 flex-shrink-0" />
                                    <Tooltip>
                                      <TooltipTrigger asChild>
                                        <span className="text-foreground font-mono truncate">
                                          {session.host_path} :{' '}
                                          {session.mount_path}{' '}
                                          <span className="text-muted-foreground">
                                            ({session.host_path_mode})
                                          </span>
                                        </span>
                                      </TooltipTrigger>
                                      <TooltipContent>
                                        {session.host_path} :{' '}
                                        {session.mount_path} (
                                        {session.host_path_mode})
                                      </TooltipContent>
                                    </Tooltip>
                                  </div>
                                )}
                                <div className="flex items-center gap-1.5 text-muted-foreground">
                                  <Clock className="w-3 h-3 flex-shrink-0" />
                                  <span>
                                    {t('monitoring.boxSessionCreated')}:{' '}
                                    <span className="text-foreground">
                                      {new Date(
                                        session.created_at,
                                      ).toLocaleString()}
                                    </span>
                                  </span>
                                </div>
                                <div className="flex items-center gap-1.5 text-muted-foreground">
                                  <Clock className="w-3 h-3 flex-shrink-0" />
                                  <span>
                                    {t('monitoring.boxSessionLastUsed')}:{' '}
                                    <span className="text-foreground">
                                      {new Date(
                                        session.last_used_at,
                                      ).toLocaleString()}
                                    </span>
                                  </span>
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                </>
              )}
            </div>
          </TooltipProvider>
        </DialogContent>
      </Dialog>
    </>
  );
}