import { RotateCcw } from 'lucide-react';
import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
import { DataTableCard, type DataTableColumn, type DataTableFilter } from '../../components/data-table';
import { Badge, Button, Card, CardHeader } from '../../components/ui';
import { PageTitle } from '../../layout/AppLayout';
import { runtimeStatusDotClass } from '../../lib/status-dot';
import { cn } from '../../lib/utils';
import type { RuntimePodMetric, RuntimeResource, RuntimeResourceResponse } from '../../types/runtime';
import { loadApps, loadRuntimeEvents, loadRuntimePodMetrics, loadRuntimeResources } from '../runtime/runtime-api';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';

const defaultNamespaces = ['studio-system', 'stdo-lms', 'stdo-ads-ide'];

type NamespaceRuntime = RuntimeResourceResponse & {
  failed?: boolean;
};

type InfrastructureData = {
  namespaces: string[];
  runtimes: NamespaceRuntime[];
  metrics: RuntimePodMetric[];
};

type ResourceRow = RuntimeResource & {
  id: string;
  namespace: string;
  metric?: RuntimePodMetric;
};

function uniqueNamespaces(values: Array<string | null | undefined>) {
  return [...new Set(values.filter(Boolean) as string[])].sort((a, b) => a.localeCompare(b));
}

function isWorkload(resource: RuntimeResource) {
  return ['Deployment', 'StatefulSet', 'DaemonSet', 'Pod', 'Job', 'CronJob', 'ReplicaSet'].includes(resource.kind);
}

function isNetwork(resource: RuntimeResource) {
  return ['Service', 'Ingress', 'Endpoint', 'Endpoints'].includes(resource.kind);
}

function isStorage(resource: RuntimeResource) {
  return ['PersistentVolumeClaim', 'PersistentVolume', 'StorageClass'].includes(resource.kind);
}

function resourceStatusTone(status: string): 'neutral' | 'green' | 'amber' | 'red' | 'blue' {
  const normalized = status.toLowerCase();
  if (['running', 'ready', 'active', 'bound'].some((word) => normalized.includes(word))) return 'green';
  if (['pending', 'progressing', 'containercreating'].some((word) => normalized.includes(word))) return 'amber';
  if (['failed', 'error', 'crash', 'unhealthy', 'notready'].some((word) => normalized.includes(word))) return 'red';
  if (['completed', 'succeeded'].some((word) => normalized.includes(word))) return 'neutral';
  return 'blue';
}

function metricFor(resource: ResourceRow, metrics: RuntimePodMetric[]) {
  if (resource.kind !== 'Pod') return undefined;
  return metrics.find((metric) => metric.namespace === resource.namespace && metric.pod === resource.name);
}

function useInfrastructureData() {
  const [data, setData] = useState<InfrastructureData>({ namespaces: defaultNamespaces, runtimes: [], metrics: [] });
  const [loading, setLoading] = useState(true);
  const [failed, setFailed] = useState(false);
  const loadingVisible = useMinimumLoading(loading);

  const refresh = useCallback(() => {
    setLoading(true);
    Promise.all([
      loadApps().catch(() => []),
      loadRuntimePodMetrics().catch(() => [] as RuntimePodMetric[])
    ])
      .then(async ([apps, metrics]) => {
        const namespaces = uniqueNamespaces([...defaultNamespaces, ...apps.map((app) => app.namespace)]);
        const runtimes = await Promise.all(
          namespaces.map((namespace) => (
            loadRuntimeResources(namespace)
              .then((runtime) => runtime)
              .catch(() => ({ namespace, exists: false, failed: true, summary: { pods: 0, deployments: 0, statefulSets: 0, services: 0, persistentVolumeClaims: 0 }, resources: [] }))
          ))
        );

        setData({ namespaces, runtimes, metrics });
        setFailed(false);
      })
      .catch(() => {
        setFailed(true);
      })
      .finally(() => setLoading(false));
  }, []);

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

  return { data, loading, loadingVisible, failed, refresh };
}

function rowsFromData(data: InfrastructureData, predicate: (resource: RuntimeResource) => boolean) {
  return data.runtimes.flatMap((runtime) => (
    runtime.resources
      .filter(predicate)
      .map((resource) => {
        const row = {
          ...resource,
          namespace: runtime.namespace,
          id: `${runtime.namespace}:${resource.kind}:${resource.name}`
        };
        return { ...row, metric: metricFor(row, data.metrics) };
      })
  ));
}

function ResourceStatus({ status }: { status: string }) {
  return (
    <div className="inline-flex items-center gap-2">
      <span className={cn('size-2.5 shrink-0 rounded-full', runtimeStatusDotClass(status))} />
      <Badge tone={resourceStatusTone(status)}>{status || '-'}</Badge>
    </div>
  );
}

function NamespaceFilter(rows: ResourceRow[]): DataTableFilter<ResourceRow> {
  return {
    key: 'namespace',
    label: '네임스페이스',
    options: uniqueNamespaces(rows.map((row) => row.namespace)).map((namespace) => ({ label: namespace, value: namespace })),
    getValue: (row) => row.namespace
  };
}

function KindFilter(rows: ResourceRow[]): DataTableFilter<ResourceRow> {
  return {
    key: 'kind',
    label: '종류',
    options: uniqueNamespaces(rows.map((row) => row.kind)).map((kind) => ({ label: kind, value: kind })),
    getValue: (row) => row.kind
  };
}

function InfraPageShell({
  title,
  description,
  children,
  loading,
  loadingVisible,
  failed,
  onRefresh
}: {
  title: string;
  description: string;
  children: ReactNode;
  loading: boolean;
  loadingVisible: boolean;
  failed: boolean;
  onRefresh: () => void;
}) {
  return (
    <>
      <PageTitle
        eyebrow="인프라"
        title={title}
        description={description}
        actions={
          <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={onRefresh} disabled={loading}>
            <RotateCcw className={cn('size-4', loading && 'animate-spin')} />
            새로고침
          </Button>
        }
      />
      {failed ? (
        <div className="mb-4 rounded-md border border-rose-500/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
          인프라 데이터를 불러오지 못했습니다.
        </div>
      ) : null}
      {children}
      <LoadingModal open={loadingVisible} />
    </>
  );
}

function ResourceTable({
  title,
  description,
  rows,
  loading,
  emptyMessage
}: {
  title: string;
  description: string;
  rows: ResourceRow[];
  loading: boolean;
  emptyMessage: string;
}) {
  const columns = useMemo<Array<DataTableColumn<ResourceRow>>>(
    () => [
      { key: 'namespace', header: '네임스페이스', className: 'w-44 px-5 py-3', cell: (row) => <span className="font-medium">{row.namespace}</span> },
      { key: 'kind', header: '종류', className: 'w-40 px-5 py-3', cell: (row) => <Badge tone="neutral">{row.kind}</Badge> },
      { key: 'name', header: '이름', className: 'min-w-[240px] px-5 py-3', cell: (row) => <span className="font-medium">{row.name}</span> },
      { key: 'status', header: '상태', className: 'w-44 px-5 py-3', cell: (row) => <ResourceStatus status={row.status} /> },
      { key: 'ready', header: 'Ready', className: 'w-28 px-5 py-3', cell: (row) => <span className="text-muted-foreground">{row.ready || '-'}</span> },
      { key: 'restarts', header: '재시작', className: 'w-24 px-5 py-3', cell: (row) => <span className="text-muted-foreground">{row.restarts ?? '-'}</span> },
      { key: 'metric', header: '사용량', className: 'w-40 px-5 py-3', cell: (row) => <span className="text-xs text-muted-foreground">{row.metric ? `${row.metric.cpu} / ${row.metric.memory}` : '-'}</span> },
      { key: 'age', header: 'Age', className: 'w-28 px-5 py-3', cell: (row) => <span className="text-muted-foreground">{row.age || '-'}</span> },
      { key: 'detail', header: '상세', className: 'min-w-[260px] px-5 py-3', cell: (row) => <span className="text-xs text-muted-foreground">{row.detail || '-'}</span> }
    ],
    []
  );

  const filters = useMemo(() => [NamespaceFilter(rows), KindFilter(rows)], [rows]);

  return (
    <DataTableCard
      title={title}
      description={description}
      rows={rows}
      columns={columns}
      filters={filters}
      searchPlaceholder="네임스페이스, 이름, 상태 검색"
      getSearchText={(row) => `${row.namespace} ${row.kind} ${row.name} ${row.status} ${row.detail}`}
      getRowKey={(row) => row.id}
      pageSize={10}
      minWidth={1280}
      loading={loading}
      emptyMessage={emptyMessage}
    />
  );
}

export function InfrastructureClusterPage() {
  const { data, loading, loadingVisible, failed, refresh } = useInfrastructureData();

  const totals = useMemo(() => data.runtimes.reduce(
    (acc, runtime) => ({
      namespaces: acc.namespaces + 1,
      resources: acc.resources + runtime.resources.length,
      pods: acc.pods + runtime.summary.pods,
      deployments: acc.deployments + runtime.summary.deployments,
      services: acc.services + runtime.summary.services,
      pvc: acc.pvc + runtime.summary.persistentVolumeClaims,
      failed: acc.failed + (runtime.failed || !runtime.exists ? 1 : 0)
    }),
    { namespaces: 0, resources: 0, pods: 0, deployments: 0, services: 0, pvc: 0, failed: 0 }
  ), [data.runtimes]);

  return (
    <InfraPageShell title="클러스터" description="네임스페이스별 런타임 리소스 요약을 조회합니다." loading={loading} loadingVisible={loadingVisible} failed={failed} onRefresh={refresh}>
      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
        {[
          ['네임스페이스', totals.namespaces],
          ['전체 리소스', totals.resources],
          ['Pod', totals.pods],
          ['Deployment', totals.deployments],
          ['Service', totals.services],
          ['PVC', totals.pvc]
        ].map(([label, value]) => (
          <Card key={label} className="px-5 py-4">
            <p className="text-xs font-medium text-muted-foreground">{label}</p>
            <p className="mt-2 text-2xl font-semibold text-foreground">{value}</p>
          </Card>
        ))}
      </div>

      <Card className="mt-4 overflow-hidden">
        <CardHeader title="네임스페이스" description="조회 가능한 네임스페이스의 리소스 구성입니다." />
        <div className="divide-y divide-border">
          {data.runtimes.map((runtime) => (
            <div key={runtime.namespace} className="grid gap-3 px-5 py-4 text-sm md:grid-cols-[minmax(180px,1fr)_repeat(5,minmax(80px,auto))] md:items-center">
              <div className="min-w-0">
                <div className="flex items-center gap-2">
                  <span className={cn('size-2.5 rounded-full', runtime.failed || !runtime.exists ? 'bg-rose-400 shadow-[0_0_0_3px_rgba(251,113,133,0.15)]' : 'bg-emerald-400 shadow-[0_0_0_3px_rgba(52,211,153,0.15)]')} />
                  <p className="truncate font-semibold">{runtime.namespace}</p>
                </div>
                <p className="mt-1 text-xs text-muted-foreground">{runtime.failed ? '조회 실패' : runtime.exists ? '조회 가능' : '네임스페이스 없음'}</p>
              </div>
              <SummaryValue label="Pod" value={runtime.summary.pods} />
              <SummaryValue label="Deployment" value={runtime.summary.deployments} />
              <SummaryValue label="StatefulSet" value={runtime.summary.statefulSets} />
              <SummaryValue label="Service" value={runtime.summary.services} />
              <SummaryValue label="PVC" value={runtime.summary.persistentVolumeClaims} />
            </div>
          ))}
        </div>
      </Card>
    </InfraPageShell>
  );
}

function SummaryValue({ label, value }: { label: string; value: number }) {
  return (
    <div>
      <p className="text-xs text-muted-foreground">{label}</p>
      <p className="mt-1 font-semibold text-foreground">{value}</p>
    </div>
  );
}

export function InfrastructureWorkloadsPage() {
  const { data, loading, loadingVisible, failed, refresh } = useInfrastructureData();
  const rows = useMemo(() => rowsFromData(data, isWorkload), [data]);

  return (
    <InfraPageShell title="워크로드" description="Deployment, StatefulSet, Pod 등 실행 리소스를 조회합니다." loading={loading} loadingVisible={loadingVisible} failed={failed} onRefresh={refresh}>
      <ResourceTable title="워크로드 목록" description="실행 상태, Ready, 재시작 횟수와 Pod 메트릭을 확인합니다." rows={rows} loading={loading} emptyMessage="표시할 워크로드가 없습니다." />
    </InfraPageShell>
  );
}

export function InfrastructureNetworkPage() {
  const { data, loading, loadingVisible, failed, refresh } = useInfrastructureData();
  const rows = useMemo(() => rowsFromData(data, isNetwork), [data]);

  return (
    <InfraPageShell title="네트워크" description="Service, Ingress 등 네트워크 리소스를 조회합니다." loading={loading} loadingVisible={loadingVisible} failed={failed} onRefresh={refresh}>
      <ResourceTable title="네트워크 리소스" description="서비스와 인그레스 연결 정보를 확인합니다." rows={rows} loading={loading} emptyMessage="표시할 네트워크 리소스가 없습니다." />
    </InfraPageShell>
  );
}

export function InfrastructureStoragePage() {
  const { data, loading, loadingVisible, failed, refresh } = useInfrastructureData();
  const rows = useMemo(() => rowsFromData(data, isStorage), [data]);

  return (
    <InfraPageShell title="스토리지" description="PVC, PV, StorageClass 등 저장소 리소스를 조회합니다." loading={loading} loadingVisible={loadingVisible} failed={failed} onRefresh={refresh}>
      <ResourceTable title="스토리지 리소스" description="영구 볼륨과 스토리지 연결 상태를 확인합니다." rows={rows} loading={loading} emptyMessage="표시할 스토리지 리소스가 없습니다." />
    </InfraPageShell>
  );
}