import { Database, FileArchive, Plus, RotateCcw, Server, Settings, TerminalSquare, Trash2 } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui';
import { useToast } from '../../components/toast';
import { PageTitle } from '../../layout/AppLayout';
import { cn } from '../../lib/utils';
import type { RuntimeResource } from '../../types/runtime';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
import {
  listLauncherBuildJobs,
  listLauncherVersions,
  loadLauncherComponentLogs,
  loadLauncherRuntimeResources,
  loadRuntimeWorkloadEnv,
  restartLauncherComponent,
  saveRuntimeWorkloadEnv,
  type LauncherBuildJob,
  type LauncherVersion
} from './launcher-api';

const LAUNCHER_NAMESPACE = 'studio-system';

type LauncherComponentDefinition = {
  key: string;
  name: string;
  description: string;
  type: 'client' | 'backend' | 'database';
  kind?: string;
  workloadName?: string;
  serviceName?: string;
};

const launcherComponents: LauncherComponentDefinition[] = [
  {
    key: 'launcher-client',
    name: '런처 클라이언트',
    description: '사용자 PC에 설치되는 Electron .deb 패키지입니다.',
    type: 'client'
  },
  {
    key: 'launcher-be',
    name: '런처 백엔드',
    description: '로그인, 앱 목록, 업데이트, handoff API를 제공하는 서버입니다.',
    type: 'backend',
    kind: 'Deployment',
    workloadName: 'studio-launcher-be',
    serviceName: 'studio-launcher-be'
  },
  {
    key: 'launcher-db',
    name: '런처 DB',
    description: '런처 앱, 버전, 사용자 앱 권한 데이터를 저장합니다.',
    type: 'database',
    kind: 'StatefulSet',
    workloadName: 'studio-launcher-db',
    serviceName: 'studio-launcher-db'
  }
];

function statusTone(status?: string): 'green' | 'amber' | 'red' | 'neutral' {
  if (['Running', 'Bound', 'ClusterIP', 'LoadBalancer'].includes(status ?? '')) return 'green';
  if (['Pending', 'ContainerCreating'].includes(status ?? '')) return 'amber';
  if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(status ?? '')) return 'red';
  return 'neutral';
}

function buildStatusText(status?: string) {
  if (status === 'SUCCEEDED') return '성공';
  if (status === 'FAILED') return '실패';
  if (status === 'RUNNING') return '진행 중';
  if (status === 'PENDING') return '대기';
  if (status === 'CANCELED') return '취소';
  return status ?? '빌드 이력 없음';
}

function buildStatusTone(status?: string): 'green' | 'amber' | 'red' | 'blue' | 'neutral' {
  if (status === 'SUCCEEDED') return 'green';
  if (status === 'FAILED' || status === 'CANCELED') return 'red';
  if (status === 'RUNNING') return 'blue';
  if (status === 'PENDING') return 'amber';
  return 'neutral';
}

function componentIcon(type: LauncherComponentDefinition['type']) {
  if (type === 'client') return FileArchive;
  if (type === 'database') return Database;
  return Server;
}

function apiKind(kind?: string) {
  return (kind ?? '').toLowerCase();
}

function stripAnsi(value: string) {
  return value.replace(/(?:\x1B|\u241B)\[[0-?]*[ -/]*[@-~]/g, '');
}

function findResource(resources: RuntimeResource[], kind?: string, name?: string) {
  if (!kind || !name) return undefined;
  return resources.find((resource) => resource.kind === kind && resource.name === name);
}

function serviceResource(resources: RuntimeResource[], name?: string) {
  if (!name) return undefined;
  return resources.find((resource) => resource.kind === 'Service' && resource.name === name);
}

function relatedResources(resources: RuntimeResource[], component: LauncherComponentDefinition) {
  if (component.type === 'client') return [];
  const names = new Set([component.workloadName, component.serviceName].filter(Boolean));
  return resources.filter((resource) => {
    if (names.has(resource.name)) return true;
    return component.workloadName ? resource.name.includes(component.workloadName) : false;
  });
}

function launcherArtifactLabel(version?: LauncherVersion) {
  if (!version) return '등록된 릴리즈 없음';
  if (version.artifact) return version.artifact;
  if (!version.downloadUrl) return '배포 파일 미등록';
  const segments = version.downloadUrl.split('/').filter(Boolean);
  return segments[segments.length - 1] ?? '배포 파일 미등록';
}

function launcherVersionMeta(version?: LauncherVersion) {
  if (!version) return '버전 관리에서 릴리즈를 등록하세요';
  const minimum = version.minimumVersion ? `최소 지원 ${version.minimumVersion}` : '최소 지원 미설정';
  return `${minimum} · ${version.isActive ? '활성' : '비활성'}`;
}

export function LauncherComponentsPage() {
  const { toast } = useToast();
  const [versions, setVersions] = useState<LauncherVersion[]>([]);
  const [buildJobs, setBuildJobs] = useState<LauncherBuildJob[]>([]);
  const [resources, setResources] = useState<RuntimeResource[]>([]);
  const [loading, setLoading] = useState(true);
  const [actionKey, setActionKey] = useState('');
  const [logTarget, setLogTarget] = useState<LauncherComponentDefinition | null>(null);
  const [logs, setLogs] = useState('');
  const [logLoading, setLogLoading] = useState(false);
  const [envTarget, setEnvTarget] = useState<LauncherComponentDefinition | null>(null);
  const [envVariables, setEnvVariables] = useState<Array<{ key: string; value: string; isSecret: boolean; editable: boolean; source: string }>>([]);
  const [envLoading, setEnvLoading] = useState(false);
  const [envSaving, setEnvSaving] = useState(false);
  const loadingVisible = useMinimumLoading(loading || logLoading);

  const activeVersion = useMemo(() => versions.find((version) => version.isActive) ?? versions[0], [versions]);
  const latestBuild = useMemo(() => buildJobs[0], [buildJobs]);

  const refresh = () => {
    setLoading(true);
    Promise.all([
      listLauncherVersions().catch(() => []),
      listLauncherBuildJobs().catch(() => []),
      loadLauncherRuntimeResources(LAUNCHER_NAMESPACE)
    ])
      .then(([nextVersions, nextBuildJobs, runtime]) => {
        setVersions(nextVersions);
        setBuildJobs(nextBuildJobs);
        setResources(runtime.resources ?? []);
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '런처 구성요소 조회 실패', message: error.message });
      })
      .finally(() => setLoading(false));
  };

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

  const openLogs = (component: LauncherComponentDefinition) => {
    if (!component.kind || !component.workloadName) return;
    setLogTarget(component);
    setLogs('');
    setLogLoading(true);
    loadLauncherComponentLogs(LAUNCHER_NAMESPACE, apiKind(component.kind), component.workloadName)
      .then((result) => setLogs(stripAnsi(result.logs || '로그가 없습니다.')))
      .catch((error: Error) => setLogs(`[warn] 로그 조회 실패\n${error.message}`))
      .finally(() => setLogLoading(false));
  };

  const restart = (component: LauncherComponentDefinition) => {
    if (!component.kind || !component.workloadName) return;
    setActionKey(component.key);
    restartLauncherComponent(LAUNCHER_NAMESPACE, apiKind(component.kind), component.workloadName)
      .then(() => {
        toast({ type: 'success', message: `${component.name} 재시작을 요청했습니다.` });
        refresh();
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '재시작 실패', message: error.message });
      })
      .finally(() => setActionKey(''));
  };

  const openEnv = (component: LauncherComponentDefinition) => {
    if (!component.kind || !component.workloadName) return;
    setEnvTarget(component);
    setEnvVariables([]);
    setEnvLoading(true);
    loadRuntimeWorkloadEnv(LAUNCHER_NAMESPACE, apiKind(component.kind), component.workloadName)
      .then((result) => {
        setEnvVariables(result.variables ?? []);
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '설정값 조회 실패', message: error.message });
      })
      .finally(() => setEnvLoading(false));
  };

  const updateEnvVariable = (index: number, patch: Partial<{ key: string; value: string; isSecret: boolean }>) => {
    setEnvVariables((prev) => prev.map((variable, variableIndex) => (
      variableIndex === index ? { ...variable, ...patch } : variable
    )));
  };

  const removeEnvVariable = (index: number) => {
    setEnvVariables((prev) => prev.filter((_, variableIndex) => variableIndex !== index));
  };

  const saveEnv = () => {
    if (!envTarget?.kind || !envTarget.workloadName) return;
    setEnvSaving(true);
    saveRuntimeWorkloadEnv(
      LAUNCHER_NAMESPACE,
      apiKind(envTarget.kind),
      envTarget.workloadName,
      envVariables
        .filter((variable) => variable.editable)
        .map((variable) => ({ key: variable.key.trim(), value: variable.value, isSecret: variable.isSecret }))
        .filter((variable) => variable.key)
    )
      .then((result) => {
        setEnvVariables(result.variables ?? []);
        toast({ type: 'success', title: '설정값 저장', message: `${envTarget.name} 설정값을 반영했습니다.` });
        refresh();
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '설정값 저장 실패', message: error.message });
      })
      .finally(() => setEnvSaving(false));
  };

  return (
    <>
      <PageTitle
        eyebrow="런처"
        title="구성요소"
        description="런처 클라이언트, 백엔드, DB의 배포 기준과 런타임 상태를 한 화면에서 확인합니다."
        actions={
          <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
            <RotateCcw className={cn('size-4', loading && 'animate-spin')} />
            새로고침
          </Button>
        }
      />

      <div className="grid gap-4 xl:grid-cols-3">
        <Card className="p-5">
          <p className="text-sm text-muted-foreground">런처 최신 버전</p>
          <p className="mt-3 text-2xl font-semibold">{activeVersion?.version ?? '-'}</p>
          <p className="mt-1 truncate text-xs font-medium text-foreground">{launcherArtifactLabel(activeVersion)}</p>
          <p className="mt-1 truncate text-xs text-muted-foreground">{launcherVersionMeta(activeVersion)}</p>
        </Card>
        <Card className="p-5">
          <p className="text-sm text-muted-foreground">최근 클라이언트 빌드</p>
          <p className="mt-3 text-2xl font-semibold">{latestBuild?.version ?? '-'}</p>
          <div className="mt-2">
            <Badge tone={buildStatusTone(latestBuild?.status)}>{buildStatusText(latestBuild?.status)}</Badge>
          </div>
        </Card>
        <Card className="p-5">
          <p className="text-sm text-muted-foreground">Namespace</p>
          <p className="mt-3 text-2xl font-semibold">{LAUNCHER_NAMESPACE}</p>
          <p className="mt-1 text-xs text-muted-foreground">{resources.length}개 관련 리소스 조회</p>
        </Card>
      </div>

      <div className="mt-4 grid gap-4">
        {launcherComponents.map((component) => {
          const Icon = componentIcon(component.type);
          const workload = findResource(resources, component.kind, component.workloadName);
          const service = serviceResource(resources, component.serviceName);
          const details = relatedResources(resources, component);
          const isClient = component.type === 'client';
          const status = isClient ? (activeVersion ? '배포 등록' : '미등록') : workload?.status ?? 'NotFound';

          return (
            <Card key={component.key} className="overflow-hidden">
              <CardHeader
                title={component.name}
                description={component.description}
                action={<Badge tone={isClient ? (activeVersion ? 'green' : 'neutral') : statusTone(status)}>{status}</Badge>}
              />
              <div className="grid gap-5 p-5 xl:grid-cols-[minmax(260px,0.8fr)_minmax(0,1.2fr)]">
                <div className="rounded-md border border-border bg-background p-4">
                  <div className="flex items-center gap-3">
                    <span className="flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground">
                      <Icon className="size-5" />
                    </span>
                    <div className="min-w-0">
                      <p className="truncate text-sm font-semibold">{component.key}</p>
                      <p className="mt-1 text-xs text-muted-foreground">{isClient ? 'Client Package' : `${component.kind}/${component.workloadName}`}</p>
                    </div>
                  </div>

                  <div className="mt-4 grid gap-3 text-sm">
                    {isClient ? (
                      <>
                        <div>
                          <p className="text-xs text-muted-foreground">Artifact</p>
                          <p className="mt-1 break-all font-mono text-xs">{activeVersion?.artifact ?? '-'}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">Repository</p>
                          <p className="mt-1 truncate font-medium">{activeVersion?.repository ?? '-'}</p>
                        </div>
                      </>
                    ) : (
                      <>
                        <div>
                          <p className="text-xs text-muted-foreground">Ready</p>
                          <p className="mt-1 font-medium">{workload?.ready ?? '-'}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">Service</p>
                          <p className="mt-1 font-medium">{service ? `${service.status} · ${service.detail}` : '-'}</p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">Image</p>
                          <p className="mt-1 break-all font-mono text-xs text-muted-foreground">{workload?.detail ?? '-'}</p>
                        </div>
                      </>
                    )}
                  </div>

                  {!isClient ? (
                    <div className="mt-4 flex flex-wrap gap-2">
                      <Button variant="outline" onClick={() => openLogs(component)} disabled={!workload}>
                        <TerminalSquare className="size-4" />
                        로그
                      </Button>
                      <Button onClick={() => restart(component)} disabled={!workload || actionKey === component.key}>
                        <RotateCcw className={cn('size-4', actionKey === component.key && 'animate-spin')} />
                        재시작
                      </Button>
                      {component.type === 'backend' ? (
                        <Button variant="outline" onClick={() => openEnv(component)} disabled={!workload}>
                          <Settings className="size-4" />
                          설정값
                        </Button>
                      ) : null}
                    </div>
                  ) : null}
                </div>

                <div className="min-w-0 overflow-x-auto rounded-md border border-border">
                  <table className="w-full min-w-[760px] whitespace-nowrap text-left text-sm">
                    <thead className="border-b border-border bg-muted/30 text-xs text-muted-foreground">
                      <tr>
                        <th className="px-4 py-3 font-medium">Kind</th>
                        <th className="px-4 py-3 font-medium">Name</th>
                        <th className="px-4 py-3 font-medium">Status</th>
                        <th className="px-4 py-3 font-medium">Ready</th>
                        <th className="px-4 py-3 font-medium">Age</th>
                        <th className="px-4 py-3 font-medium">Detail</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-border">
                      {isClient ? (
                        <tr>
                          <td className="px-4 py-3">Release</td>
                          <td className="px-4 py-3 font-mono text-xs">{activeVersion?.version ?? '-'}</td>
                          <td className="px-4 py-3">{activeVersion?.isActive ? 'Active' : '-'}</td>
                          <td className="px-4 py-3">-</td>
                          <td className="px-4 py-3">{activeVersion?.createdAt ? new Date(activeVersion.createdAt).toLocaleString() : '-'}</td>
                          <td className="max-w-[320px] truncate px-4 py-3 font-mono text-xs text-muted-foreground">{activeVersion?.downloadUrl ?? '-'}</td>
                        </tr>
                      ) : null}
                      {!isClient && details.length === 0 ? (
                        <tr>
                          <td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">관련 리소스가 없습니다.</td>
                        </tr>
                      ) : null}
                      {!isClient && details.map((resource) => (
                        <tr key={`${resource.kind}-${resource.name}`} className="hover:bg-muted/20">
                          <td className="px-4 py-3 font-semibold">{resource.kind}</td>
                          <td className="px-4 py-3 font-mono text-xs">{resource.name}</td>
                          <td className="px-4 py-3"><Badge tone={statusTone(resource.status)}>{resource.status}</Badge></td>
                          <td className="px-4 py-3">{resource.ready}</td>
                          <td className="px-4 py-3 text-muted-foreground">{resource.age}</td>
                          <td className="max-w-[360px] truncate px-4 py-3 font-mono text-xs text-muted-foreground">{resource.detail || '-'}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </Card>
          );
        })}
      </div>

      <Modal
        open={Boolean(logTarget)}
        title={logTarget ? `${logTarget.name} 로그` : '로그'}
        onClose={() => setLogTarget(null)}
        className="!max-w-5xl"
      >
        <pre className="max-h-[62vh] overflow-auto rounded-md bg-background p-4 font-mono text-xs leading-6 text-muted-foreground">
          {logs || (logLoading ? '로그를 불러오는 중...' : '로그가 없습니다.')}
        </pre>
      </Modal>

      <Modal
        open={Boolean(envTarget)}
        title={envTarget ? `${envTarget.name} 설정값` : '설정값'}
        onClose={() => setEnvTarget(null)}
        className="!max-w-4xl"
        footer={
          <>
            <Button variant="ghost" onClick={() => setEnvTarget(null)}>닫기</Button>
            <Button onClick={saveEnv} disabled={envLoading || envSaving}>
              {envSaving ? '저장 중' : '저장'}
            </Button>
          </>
        }
      >
        <div className="space-y-4">
          <p className="text-xs leading-5 text-muted-foreground">
            Secret을 체크하면 Kubernetes Secret에 저장하고 secretKeyRef로 연결합니다. 체크하지 않은 값은 Deployment 환경변수로 저장합니다.
          </p>
          <div className="rounded-md border border-border">
            <table className="w-full table-fixed text-left text-sm">
              <colgroup>
                <col className="w-[26%]" />
                <col />
                <col className="w-20" />
                <col className="w-20" />
                <col className="w-12" />
              </colgroup>
              <thead className="border-b border-border bg-muted/30 text-xs text-muted-foreground">
                <tr>
                  <th className="px-3 py-3 font-medium">Key</th>
                  <th className="px-3 py-3 font-medium">Value</th>
                  <th className="px-3 py-3 font-medium">Secret</th>
                  <th className="px-3 py-3 font-medium">Source</th>
                  <th className="px-2 py-3 font-medium"></th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {envLoading ? (
                  <tr>
                    <td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">설정값을 불러오는 중입니다.</td>
                  </tr>
                ) : null}
                {!envLoading && envVariables.length === 0 ? (
                  <tr>
                    <td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">등록된 설정값이 없습니다.</td>
                  </tr>
                ) : null}
                {!envLoading && envVariables.map((variable, index) => (
                  <tr key={`${variable.key}-${index}`}>
                    <td className="min-w-0 px-3 py-2.5">
                      <input
                        className="h-8 w-full min-w-0 rounded-md border border-input bg-background px-2 font-mono text-xs outline-none focus:border-ring focus:ring-1 focus:ring-ring disabled:opacity-60"
                        value={variable.key}
                        disabled={!variable.editable}
                        onChange={(event) => updateEnvVariable(index, { key: event.target.value })}
                      />
                    </td>
                    <td className="min-w-0 px-3 py-2.5">
                      <input
                        className="h-8 w-full min-w-0 rounded-md border border-input bg-background px-2 font-mono text-xs outline-none focus:border-ring focus:ring-1 focus:ring-ring disabled:opacity-60"
                        value={variable.value}
                        disabled={!variable.editable}
                        onChange={(event) => updateEnvVariable(index, { value: event.target.value })}
                      />
                    </td>
                    <td className="px-3 py-2.5">
                      <label className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
                        <input
                          type="checkbox"
                          className="size-4 accent-primary"
                          checked={variable.isSecret}
                          disabled={!variable.editable}
                          onChange={(event) => updateEnvVariable(index, { isSecret: event.target.checked })}
                        />
                        Secret
                      </label>
                    </td>
                    <td className="px-3 py-2.5">
                      <Badge tone={variable.editable ? 'blue' : 'neutral'}>{variable.source}</Badge>
                    </td>
                    <td className="px-2 py-2.5">
                      <Button
                        variant="outline"
                        className="size-8 px-0"
                        disabled={!variable.editable}
                        onClick={() => removeEnvVariable(index)}
                        aria-label="환경변수 삭제"
                        title="환경변수 삭제"
                      >
                        <Trash2 className="size-4" />
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <Button
            variant="outline"
            onClick={() => setEnvVariables((prev) => [...prev, { key: '', value: '', isSecret: false, editable: true, source: 'literal' }])}
            disabled={envLoading}
          >
            <Plus className="size-4" />
            설정값 추가
          </Button>
        </div>
      </Modal>

      <LoadingModal open={loadingVisible} />
    </>
  );
}