// 终端审计 — 在线会话子面板 // Logan.Li

import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { cn } from '@/lib/utils';
import { useTranslation } from 'react-i18next';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Search, RefreshCw, XOctagon, Eye, Activity, Timer, TimerOff } from 'lucide-react';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { LiveMonitorDialog } from '@/components/system/LiveMonitorDialog';
import { RdpAuditViewer } from '@/components/system/RdpAuditViewer';
import { useTerminalSessions, useTerminalSessionMutations } from '@/hooks/api';
import { rdpSessionApi } from '@/api';
import { unwrapList } from '@/hooks/api/unwrap';
import type { TerminalSession } from './types';
import { formatDuration, getStatusBadge } from './helpers';

const REFRESH_SEC = 10;

interface ActiveSessionsPanelProps {
  userToggledOff: boolean;
  onUserToggledOff: () => void;
}

function useElapsedTimer(startTime: string | undefined): number {
  const [elapsed, setElapsed] = useState(0);
  useEffect(() => {
    if (!startTime) return;
    const start = new Date(startTime).getTime();
    const tick = () => setElapsed(Math.floor((Date.now() - start) / 1000));
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, [startTime]);
  return elapsed;
}

function ActiveSessionRow({
  session,
  onKill,
  onMonitor,
}: {
  session: TerminalSession;
  onKill: (id: number, username: string) => void;
  onMonitor: (id: number) => void;
}) {
  const { t } = useTranslation();
  const elapsed = useElapsedTimer(session.start_time);

  return (
    <TableRow className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
      <TableCell>
        <span className="text-sm dg-text-secondary">{session.id}</span>
      </TableCell>
      <TableCell>
        <span className="text-sm text-[var(--dg-text-primary)]">{session.username || '--'}</span>
      </TableCell>
      <TableCell>
        <div className="flex flex-col">
          <span className="text-sm text-[var(--dg-text-primary)]">{session.server_name || '--'}</span>
          <span className="text-xs dg-text-muted">{session.server_ip}</span>
        </div>
      </TableCell>
      <TableCell>
        <span className="text-sm dg-text-secondary">{session.server_port}</span>
      </TableCell>
      <TableCell>
        <span className="text-sm dg-text-secondary">
          {session.start_time ? new Date(session.start_time).toLocaleString() : '--'}
        </span>
      </TableCell>
      <TableCell>
        <span className="text-sm dg-text-green font-mono">{formatDuration(elapsed)}</span>
      </TableCell>
      <TableCell>{getStatusBadge(session.status)}</TableCell>
      <TableCell>
        <div className="flex items-center justify-end gap-1">
          <Button
            variant="ghost"
            size="icon"
            className="h-8 w-8 dg-text-secondary hover:dg-text-red hover:bg-[var(--dg-bg-hover)]"
            onClick={() => onKill(session.id, session.username)}
            title={t('audit.terminal.killTitle')}
          >
            <XOctagon className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            className="h-8 w-8 dg-text-secondary hover:dg-text-blue hover:bg-[var(--dg-bg-hover)]"
            onClick={() => onMonitor(session.id)}
            title={t('audit.terminal.liveMonitor')}
          >
            <Eye className="h-4 w-4" />
          </Button>
        </div>
      </TableCell>
    </TableRow>
  );
}

function RdpActiveSessionRow({
  session,
  onKill,
  onMonitor,
}: {
  session: TerminalSession;
  onKill: (id: number, username: string) => void;
  onMonitor: (id: number) => void;
}) {
  const { t } = useTranslation();
  const elapsed = useElapsedTimer(session.start_time);

  return (
    <TableRow className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
      <TableCell><span className="text-sm dg-text-secondary">{session.id}</span></TableCell>
      <TableCell><span className="text-sm text-[var(--dg-text-primary)]">{session.username || '--'}</span></TableCell>
      <TableCell>
        <div className="flex flex-col">
          <span className="text-sm text-[var(--dg-text-primary)]">{session.server_name || '--'}</span>
          <span className="text-xs dg-text-muted">{session.server_ip}</span>
        </div>
      </TableCell>
      <TableCell><span className="text-sm dg-text-secondary">{session.start_time ? new Date(session.start_time).toLocaleString() : '--'}</span></TableCell>
      <TableCell><span className="text-sm dg-text-green font-mono">{formatDuration(elapsed)}</span></TableCell>
      <TableCell>
        <div className="flex items-center justify-end gap-1">
          <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary hover:dg-text-red" onClick={() => onKill(session.id, session.username)} title={t('audit.terminal.killTitle')}>
            <XOctagon className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-secondary hover:dg-text-blue" onClick={() => onMonitor(session.id)} title="RDP 实时审计">
            <Eye className="h-4 w-4" />
          </Button>
        </div>
      </TableCell>
    </TableRow>
  );
}

export function ActiveSessionsPanel({ userToggledOff, onUserToggledOff }: ActiveSessionsPanelProps) {
  const { t } = useTranslation();
  const confirm = useConfirm();
  const { killMutation } = useTerminalSessionMutations();
  const { data, isLoading, isFetching, refetch } = useTerminalSessions({
    page: 1,
    page_size: 100,
    status: 'active',
  });
  const rdpQuery = useQuery({
    queryKey: ['rdp-sessions', 'active'],
    queryFn: async () => {
      const resp = await rdpSessionApi.list({ page: 1, page_size: 100, status: 'active' });
      return unwrapList<TerminalSession>(resp);
    },
  });
  const sessions = data?.list ?? [];
  const rdpSessions = rdpQuery.data ?? [];

  const [keyword, setKeyword] = useState('');
  const [autoRefresh, setAutoRefresh] = useState(() => !userToggledOff);
  const [monitorOpen, setMonitorOpen] = useState(false);
  const [monitorSessionId, setMonitorSessionId] = useState<number | null>(null);
  const [rdpOpen, setRdpOpen] = useState(false);
  const [rdpSessionId, setRdpSessionId] = useState<number | null>(null);

  // 用户未手动关闭时，回到在线会话自动开启刷新
  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    if (!userToggledOff) setAutoRefresh(true);
  }, [userToggledOff]);

  useEffect(() => {
    if (!autoRefresh) return;
    const id = setInterval(() => { refetch(); rdpQuery.refetch(); }, REFRESH_SEC * 1000);
    return () => clearInterval(id);
  }, [autoRefresh, refetch, rdpQuery]);

  const filtered = sessions.filter((s) => {
    const kw = keyword.toLowerCase();
    return (
      !kw ||
      (s.username || '').toLowerCase().includes(kw) ||
      (s.server_name || '').toLowerCase().includes(kw) ||
      (s.server_ip || '').toLowerCase().includes(kw)
    );
  });

  const handleKill = async (id: number, username: string) => {
    const ok = await confirm({
      title: t('audit.terminal.killTitle'),
      description: t('audit.terminal.killConfirm', { user: username }),
      confirmText: t('audit.terminal.killConfirmBtn'),
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await killMutation.mutateAsync(id);
    } catch {
      /* noop */
    }
  };

  const openMonitor = (sessionId: number) => {
    setMonitorSessionId(sessionId);
    setMonitorOpen(true);
  };

  const openRdpMonitor = (sessionId: number) => {
    setRdpSessionId(sessionId);
    setRdpOpen(true);
  };

  const killRdp = async (id: number, username: string) => {
    const ok = await confirm({
      title: t('audit.terminal.killTitle'),
      description: t('audit.terminal.killConfirm', { user: username }),
      confirmText: t('audit.terminal.killConfirmBtn'),
      variant: 'destructive',
    });
    if (!ok) return;
    await rdpSessionApi.kill(id).catch(() => undefined);
    rdpQuery.refetch();
  };

  return (
    <>
      <div className="flex items-center gap-3 flex-wrap">
        <div className="relative w-64">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
          <Input
            placeholder={t('audit.terminal.searchUserServer')}
            value={keyword}
            onChange={(e) => setKeyword(e.target.value)}
            className="pl-9 h-9 dg-input"
          />
        </div>
        <Button
          variant="outline"
          className="dg-btn-secondary"
          onClick={() => refetch()}
          disabled={isFetching}
        >
          <RefreshCw className={cn('h-4 w-4 mr-2', isFetching && 'animate-spin')} />
          {t('common.refresh')}
        </Button>
        <Button
          variant={autoRefresh ? 'default' : 'outline'}
          className={
            autoRefresh
              ? 'bg-emerald-600 hover:bg-emerald-700 text-white'
              : 'dg-btn-secondary'
          }
          onClick={() => {
            if (autoRefresh) onUserToggledOff();
            setAutoRefresh(!autoRefresh);
          }}
          title={autoRefresh ? t('audit.terminal.autoRefreshHintOn', { sec: REFRESH_SEC }) : t('audit.terminal.autoRefreshHintOff')}
        >
          {autoRefresh ? (
            <>
              <Timer className="h-4 w-4 mr-1.5 animate-pulse" />
              {REFRESH_SEC}s
            </>
          ) : (
            <>
              <TimerOff className="h-4 w-4 mr-2" />
              {t('audit.terminal.autoRefresh')}
            </>
          )}
        </Button>
      </div>

      <Card className="dg-card">
        <CardContent className="p-0">
          <div className="border-t border-[var(--dg-border)]">
            {isLoading ? (
              <div className="flex items-center justify-center py-16">
                <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
              </div>
            ) : filtered.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-16 dg-text-muted">
                <Activity className="h-8 w-8 mb-3 opacity-40" />
                <p className="text-sm">{t('audit.terminal.noActive')}</p>
              </div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.id')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.user')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.targetServer')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.port')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.startTime')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.duration')}</TableHead>
                    <TableHead className="dg-text-secondary">{t('audit.terminal.col.status')}</TableHead>
                    <TableHead className="dg-text-secondary text-right">{t('audit.terminal.col.actions')}</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filtered.map((s) => (
                    <ActiveSessionRow key={s.id} session={s} onKill={handleKill} onMonitor={openMonitor} />
                  ))}
                </TableBody>
              </Table>
            )}
          </div>
        </CardContent>
      </Card>

      <Card className="dg-card">
        <CardContent className="p-0">
          <div className="px-4 py-2 border-b border-[var(--dg-border)] text-xs font-semibold dg-text-secondary">RDP 在线会话</div>
          {rdpQuery.isLoading ? (
            <div className="flex items-center justify-center py-10"><div className="w-7 h-7 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" /></div>
          ) : rdpSessions.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-10 dg-text-muted">
              <Activity className="h-7 w-7 mb-2 opacity-40" />
              <p className="text-sm">暂无 RDP 在线会话</p>
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
                  <TableHead className="dg-text-secondary">{t('audit.terminal.col.id')}</TableHead>
                  <TableHead className="dg-text-secondary">{t('audit.terminal.col.user')}</TableHead>
                  <TableHead className="dg-text-secondary">{t('audit.terminal.col.targetServer')}</TableHead>
                  <TableHead className="dg-text-secondary">{t('audit.terminal.col.startTime')}</TableHead>
                  <TableHead className="dg-text-secondary">{t('audit.terminal.col.duration')}</TableHead>
                  <TableHead className="dg-text-secondary text-right">{t('audit.terminal.col.actions')}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {rdpSessions.map((s) => (
                  <RdpActiveSessionRow key={`rdp-${s.id}`} session={s} onKill={killRdp} onMonitor={openRdpMonitor} />
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

      <LiveMonitorDialog open={monitorOpen} onOpenChange={setMonitorOpen} sessionId={monitorSessionId} />
      <RdpAuditViewer open={rdpOpen} onOpenChange={setRdpOpen} sessionId={rdpSessionId} mode="live" />
    </>
  );
}