import { MoreHorizontal, RotateCcw } from 'lucide-react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { DataTableCard, type DataTableColumn } from '../../components/data-table';
import { Badge, Button, Modal } from '../../components/ui';
import { apiRequest } from '../../lib/api';
import { PageTitle } from '../../layout/AppLayout';
import { loadPlatformDevices, type PlatformDevice } from '../agents/platform-api';

type HeadscaleNode = {
  id: string;
  name: string;
  ip: string;
  ips?: string[];
  role: string;
  user: string;
  routes: string;
  lastSeen: string | null;
  status: string;
  online?: boolean;
};

type AclRule = { id: string; action: string; sources: string[]; destinations: string[] };
type PlatformRow = HeadscaleNode & { device?: PlatformDevice; controllers: string[]; no: number };

type DeviceKind = 'agent' | 'launcher' | 'unknown';

function normalize(value?: string | null) {
  return (value ?? '').toLowerCase().replace(/[^a-z0-9]/g, '');
}

function findDevice(node: HeadscaleNode, devices: PlatformDevice[]) {
  const nodeValues = [node.name, node.user].map(normalize).filter(Boolean);
  return devices.find((device) => {
    const deviceValues = [device.hostname, device.tailscaleHostname, device.accountEmail].map(normalize).filter(Boolean);
    return nodeValues.some((nodeValue) => deviceValues.some((deviceValue) => nodeValue.includes(deviceValue) || deviceValue.includes(nodeValue)));
  });
}

function findControllers(node: HeadscaleNode, rules: AclRule[]) {
  const destinations = new Set([node.ip, ...(node.ips ?? [])].filter(Boolean).map((ip) => `${ip}:*`));
  return [...new Set(rules
    .filter((rule) => rule.action === 'accept' && rule.destinations.some((destination) => destinations.has(destination)))
    .flatMap((rule) => rule.sources))];
}

function getDeviceKind(row: PlatformRow): DeviceKind {
  if (!row.device) return 'unknown';
  return row.device.agentVersion || row.device.agentLastSeenAt ? 'agent' : 'launcher';
}

function formatDateTime(value?: string | null) {
  if (!value) return '-';
  const date = new Date(value);
  return Number.isNaN(date.getTime()) ? '-' : date.toLocaleString('ko-KR', { hour12: false });
}

export function RuntimeDeviceControlPage() {
  const [rows, setRows] = useState<PlatformRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [selected, setSelected] = useState<PlatformRow | null>(null);

  const refresh = useCallback(() => {
    setLoading(true);
    Promise.all([
      apiRequest<{ nodes?: HeadscaleNode[] }>('/tailscale/nodes'),
      apiRequest<{ policy?: { acls?: AclRule[] } }>('/tailscale/acl'),
      loadPlatformDevices(),
    ])
      .then(([nodeResponse, aclResponse, devices]) => {
        const rules = aclResponse.policy?.acls ?? [];
        const nodes = nodeResponse.nodes ?? [];
        setRows(nodes.map((node, index) => ({
          ...node,
          no: nodes.length - index,
          device: findDevice(node, devices),
          controllers: findControllers(node, rules),
        })));
      })
      .catch(() => setRows([]))
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    void refresh();
  }, [refresh]);

  const columns = useMemo<Array<DataTableColumn<PlatformRow>>>(
    () => [
      { key: 'no', header: 'No.', className: 'w-14 px-3 py-3 text-center font-medium', cell: (row) => <span>{row.no}</span> },
      {
        key: 'platform',
        header: '플랫폼',
        flexible: true,
        cell: (row) => (
          <div className="min-w-0">
            <p className="truncate font-semibold" title={row.name}>{row.name}</p>
            <p className="mt-1 truncate text-xs text-muted-foreground" title={row.user}>{row.user || '-'}</p>
          </div>
        )
      },
      {
        key: 'connection',
        header: '연결 대상',
        width: 180,
        cell: (row) => <span className="font-mono text-xs text-muted-foreground">{row.ip || '-'}</span>,
      },
      {
        key: 'deviceKind',
        header: '유형',
        width: 150,
        cell: (row) => {
          const kind = getDeviceKind(row);
          if (kind === 'agent') {
            return <Badge tone="green">에이전트</Badge>;
          }
          if (kind === 'launcher') return <Badge tone="neutral">런처 클라이언트</Badge>;
          return <Badge tone="neutral">미확인</Badge>;
        },
      },
      {
        key: 'controllers',
        header: '제어 사용자',
        width: 280,
        cell: (row) => (
          <span className="block truncate text-muted-foreground" title={row.controllers.length ? row.controllers.join(', ') : row.user || '-'}>
            {row.controllers.length ? row.controllers.join(', ') : row.user || '-'}
          </span>
        ),
      },
      { key: 'routes', header: '연결 경로', width: 190, cell: (row) => <span className="block truncate text-muted-foreground" title={row.routes || '-'}>{row.routes || '-'}</span> },
      { key: 'status', header: '상태', width: 110, cell: (row) => <Badge tone={row.online || row.status === '활성' ? 'green' : 'neutral'}>{row.online || row.status === '활성' ? '연결됨' : '오프라인'}</Badge> },
      {
        key: 'actions',
        header: '',
        className: 'w-20 px-5 py-3 text-right font-medium',
        cell: (row) => (
          <div className="flex justify-end">
            <Button variant="ghost" className="size-8 px-0" title="상세" aria-label="상세" onClick={() => setSelected(row)}>
              <MoreHorizontal className="size-4" />
            </Button>
          </div>
        ),
      },
    ],
    []
  );

  return (
    <>
      <PageTitle
        eyebrow="플랫폼 관리"
        title="연결 제어"
        description="Headscale 노드 연결 상태와 ACL 기반 제어 권한을 확인합니다."
        actions={
          <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
            <RotateCcw className={loading ? 'size-4 animate-spin' : 'size-4'} />
            새로고침
          </Button>
        }
      />
      <DataTableCard
        title="연결 플랫폼"
        description="Headscale에 등록된 노드와 해당 노드에 적용된 ACL 제어 사용자를 표시합니다."
        rows={rows}
        columns={columns}
        searchPlaceholder="플랫폼, 사용자, IP, ACL 검색"
        getSearchText={(row) => `${row.name} ${row.user} ${row.ip} ${row.controllers.join(' ')} ${row.routes}`}
        getRowKey={(row) => row.id || row.name}
        pageSize={6}
        minWidth={1100}
        loading={loading}
        emptyMessage="Headscale에 연결된 플랫폼이 없습니다."
      />
      <Modal open={Boolean(selected)} title="플랫폼 연결 상세" onClose={() => setSelected(null)}>
        <dl className="grid grid-cols-[140px_minmax(0,1fr)] gap-x-4 gap-y-4 text-sm">
          <dt className="text-muted-foreground">플랫폼</dt><dd className="min-w-0 break-all font-medium">{selected?.name}</dd>
          <dt className="text-muted-foreground">Headscale 사용자</dt><dd className="min-w-0 break-all">{selected?.user || '-'}</dd>
          <dt className="text-muted-foreground">연결 IP</dt><dd className="font-mono text-xs">{selected?.ips?.join(', ') || selected?.ip || '-'}</dd>
          <dt className="text-muted-foreground">ACL 제어 사용자</dt><dd className="min-w-0 break-all">{selected?.controllers.length ? selected.controllers.join(', ') : '개별 ACL 규칙 없음'}</dd>
          <dt className="text-muted-foreground">연결 경로</dt><dd className="min-w-0 break-all">{selected?.routes || '-'}</dd>
          <dt className="text-muted-foreground">Workspace</dt><dd className="min-w-0 break-all">{selected?.device?.workspaceRoot || '-'}</dd>
          <dt className="text-muted-foreground">SSH 사용자</dt><dd>{selected?.device?.sshUser || '-'}</dd>
          <dt className="text-muted-foreground">사용 유형</dt><dd>{selected?.device?.usageType || '-'}</dd>
          <dt className="text-muted-foreground">장비 유형</dt><dd>{selected ? ({ agent: '에이전트', launcher: '런처 클라이언트', unknown: '미확인' }[getDeviceKind(selected)]) : '-'}</dd>
          <dt className="text-muted-foreground">에이전트 버전</dt><dd>{selected?.device?.agentVersion || '-'}</dd>
          <dt className="text-muted-foreground">마지막 에이전트 확인</dt><dd>{formatDateTime(selected?.device?.agentLastSeenAt)}</dd>
        </dl>
      </Modal>
    </>
  );
}