import { ChevronLeft, ChevronRight, MoreHorizontal, Play, RotateCcw } 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 { formatDateTime } from '../../lib/date-format';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
import {
  createLauncherBuildJob,
  getLauncherSource,
  listLauncherBuildJobs,
  listLauncherVersions,
  type LauncherSource,
  type LauncherBuildJob,
  type LauncherVersion
} from './launcher-api';

const r2PublicBaseUrl = import.meta.env.VITE_R2_PUBLIC_BASE_URL ?? '';
const r2ArtifactPrefix = import.meta.env.VITE_R2_ARTIFACT_PREFIX ?? 'studio-artifacts';

function formatDate(value: string) {
  return formatDateTime(value);
}

function statusText(status: LauncherBuildJob['status']) {
  if (status === 'SUCCEEDED') return '성공';
  if (status === 'RUNNING') return '실행 중';
  if (status === 'PENDING') return '대기';
  if (status === 'FAILED') return '실패';
  if (status === 'CANCELED') return '취소';
  return status;
}

function statusTone(status: LauncherBuildJob['status']): 'neutral' | 'green' | 'amber' | 'red' | 'blue' {
  if (status === 'SUCCEEDED') return 'green';
  if (status === 'RUNNING') return 'blue';
  if (status === 'PENDING') return 'amber';
  if (status === 'FAILED') return 'red';
  return 'neutral';
}

function jobTime(job: LauncherBuildJob) {
  const value = new Date(job.createdAt || job.startedAt || job.finishedAt || 0).getTime();
  return Number.isNaN(value) ? 0 : value;
}

const launcherBuildJobPageSize = 3;
type BuildTarget = 'launcher-client' | 'launcher-backend';

function sanitizeObjectKeyPart(value: string) {
  return value
    .trim()
    .replace(/^\/+|\/+$/g, '')
    .replace(/[^a-zA-Z0-9._@+=-]+/g, '-')
    || 'unknown';
}

function encodeObjectKey(key: string) {
  return key.split('/').map(encodeURIComponent).join('/');
}

function launcherArtifactKey(version: string, branch: string, commitSha: string, artifactName: string) {
  const revision = commitSha.trim().slice(0, 7) || 'latest';
  return [
    r2ArtifactPrefix,
    'launcher',
    version || '0.0.0',
    branch || 'release',
    revision,
    artifactName,
  ].map(sanitizeObjectKeyPart).join('/');
}

export function LauncherBuildPage() {
  const { toast } = useToast();
  const [target, setTarget] = useState<BuildTarget>('launcher-client');
  const [versions, setVersions] = useState<LauncherVersion[]>([]);
  const [source, setSource] = useState<LauncherSource | null>(null);
  const [version, setVersion] = useState('');
  const [branch, setBranch] = useState('release');
  const [commitSha, setCommitSha] = useState('');
  const [jobs, setJobs] = useState<LauncherBuildJob[]>([]);
  const [selectedJob, setSelectedJob] = useState<LauncherBuildJob | null>(null);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const loadingVisible = useMinimumLoading(loading);

  const activeVersion = useMemo(() => versions.find((item) => item.isActive) ?? versions[0], [versions]);
  const isBackend = target === 'launcher-backend';
  const backendSource = source?.backend;
  const clientSource = source?.client;
  const artifactName = `autonomy-studio-launcher-${version || activeVersion?.version || '0.0.0'}.deb`;
  const backendImageName = backendSource?.image || 'localhost:5000/studio-launcher-be';
  const backendImageTag = `${backendImageName.replace(/\/$/, '')}:${version || '0.1.0'}`;
  const backendDockerfile = backendSource?.dockerfile || 'Dockerfile';
  const uploadPath = launcherArtifactKey(version || activeVersion?.version || '0.0.0', branch, commitSha, artifactName);
  const downloadUrl = r2PublicBaseUrl ? `${r2PublicBaseUrl.replace(/\/$/, '')}/${encodeObjectKey(uploadPath)}` : '백엔드 R2 설정 기준으로 생성됩니다.';
  const sortedJobs = useMemo(() => [...jobs].filter((job) => job.target === target).sort((a, b) => jobTime(b) - jobTime(a)), [jobs, target]);
  const totalPages = Math.max(1, Math.ceil(sortedJobs.length / launcherBuildJobPageSize));
  const currentPage = Math.min(page, totalPages);
  const pageStart = (currentPage - 1) * launcherBuildJobPageSize;
  const pagedJobs = sortedJobs.slice(pageStart, pageStart + launcherBuildJobPageSize);
  const hasActiveJob = jobs.some((job) => job.status === 'PENDING' || job.status === 'RUNNING');

  const refresh = () => {
    setLoading(true);
    Promise.all([listLauncherVersions(), listLauncherBuildJobs(), getLauncherSource()])
      .then(([nextVersions, nextJobs, nextSource]) => {
        setVersions(nextVersions);
        setJobs(nextJobs);
        setSource(nextSource.source);
        const nextVersion = nextVersions.find((item) => item.isActive) ?? nextVersions[0];
        setVersion(nextVersion?.version ?? '');
        setBranch(target === 'launcher-backend' ? nextSource.source.backend?.branch ?? 'release' : nextSource.source.client?.branch ?? nextVersion?.branch ?? 'release');
        setCommitSha(target === 'launcher-backend' ? nextSource.source.backend?.commitSha ?? '' : nextSource.source.client?.commitSha ?? nextVersion?.commitSha ?? '');
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '런처 버전 조회 실패', message: error.message });
      })
      .finally(() => setLoading(false));
  };

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

  useEffect(() => {
    if (!source) return;
    if (target === 'launcher-backend') {
      setBranch(source.backend?.branch ?? 'release');
      setCommitSha(source.backend?.commitSha ?? '');
      return;
    }

    setBranch(source.client?.branch ?? activeVersion?.branch ?? 'release');
    setCommitSha(source.client?.commitSha ?? activeVersion?.commitSha ?? '');
  }, [activeVersion?.branch, activeVersion?.commitSha, source, target]);

  useEffect(() => {
    if (!hasActiveJob) return;
    const timer = window.setInterval(() => {
      listLauncherBuildJobs()
        .then((nextJobs) => setJobs(nextJobs))
        .catch((error: Error) => {
          toast({ type: 'error', title: '빌드 작업 갱신 실패', message: error.message });
        });
    }, 2000);
    return () => window.clearInterval(timer);
  }, [hasActiveJob, toast]);

  useEffect(() => {
    if (!selectedJob) return;
    const nextSelectedJob = jobs.find((job) => job.id === selectedJob.id);
    if (nextSelectedJob && nextSelectedJob !== selectedJob) {
      setSelectedJob(nextSelectedJob);
    }
  }, [jobs, selectedJob]);

  const createJob = () => {
    setConfirmOpen(false);
    setLoading(true);
    createLauncherBuildJob({
      target,
      repository: isBackend ? backendSource?.repository ?? undefined : clientSource?.repository ?? activeVersion?.repository ?? undefined,
      branch,
      commitSha: commitSha.trim() || undefined,
      version: isBackend ? version.trim() : undefined,
      uploadPath: isBackend ? backendDockerfile : uploadPath,
      artifact: isBackend ? backendImageName.replace(/^localhost:5000\//, '') : undefined,
      downloadUrl: isBackend ? backendImageTag : r2PublicBaseUrl ? downloadUrl : undefined
    })
      .then(({ job }) => {
        setJobs((prev) => [job, ...prev]);
        setPage(1);
        setSelectedJob(job);
        toast({ type: 'success', title: '빌드 작업', message: '런처 빌드 작업이 생성되었습니다.' });
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '빌드 작업 실패', message: error.message });
      })
      .finally(() => setLoading(false));
  };

  return (
    <>
      <PageTitle
        eyebrow="런처 운영"
        title="빌드 관리"
        description="런처 클라이언트 설치 파일과 백엔드 컨테이너 이미지를 구성요소별로 빌드합니다."
        actions={
          <Button className="h-8 px-3 text-[13px]" onClick={() => setConfirmOpen(true)} disabled={isBackend && !version.trim()}>
            <Play className="size-4" />
            실행
          </Button>
        }
      />

      <div className="mb-4 flex flex-wrap gap-2">
        <Button variant={target === 'launcher-client' ? 'default' : 'outline'} onClick={() => setTarget('launcher-client')}>
          클라이언트
        </Button>
        <Button variant={target === 'launcher-backend' ? 'default' : 'outline'} onClick={() => setTarget('launcher-backend')}>
          백엔드
        </Button>
      </div>

      <div className="grid gap-4 xl:grid-cols-[420px_minmax(0,1fr)]">
        <Card className="min-w-0 overflow-hidden">
          <CardHeader title="빌드 요청" description={isBackend ? '브랜치와 커밋 기준으로 런처 백엔드 이미지를 빌드하고 레지스트리에 푸시합니다.' : '브랜치와 커밋 기준으로 런처 설치 파일을 생성합니다.'} />
          <div className="space-y-4 p-5">
            {isBackend ? (
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">이미지 태그 버전</span>
                <input className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={version} onChange={(event) => setVersion(event.target.value)} />
              </label>
            ) : (
              <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
                <p className="text-xs font-medium text-muted-foreground">버전</p>
                <p className="mt-1 text-sm font-medium text-foreground">빌드 후 package.json 기준으로 자동 확정</p>
              </div>
            )}
            <label className="block">
              <span className="text-xs font-medium text-muted-foreground">브랜치</span>
              <select className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={branch} onChange={(event) => setBranch(event.target.value)}>
                <option value="develop">develop</option>
                <option value="release">release</option>
                <option value="main">main</option>
              </select>
            </label>
            <label className="block">
              <span className="text-xs font-medium text-muted-foreground">Commit SHA</span>
              <input className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 font-mono text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring" value={commitSha} onChange={(event) => setCommitSha(event.target.value)} placeholder="비워두면 브랜치 최신 커밋" />
            </label>
            {isBackend ? (
              <div className="rounded-md border border-border bg-background p-3">
                <p className="text-xs text-muted-foreground">이미지</p>
                <p className="mt-2 break-all font-mono text-xs text-foreground">{backendImageTag}</p>
                <p className="mt-2 text-xs text-muted-foreground">Repository</p>
                <p className="mt-1 break-all font-mono text-xs text-foreground">{backendSource?.repository || '-'}</p>
              </div>
            ) : null}
          </div>
        </Card>

        <Card className="min-w-0 overflow-hidden">
          <CardHeader title="빌드 작업 목록" description={isBackend ? '런처 백엔드 이미지 빌드 작업입니다.' : '생성된 런처 클라이언트 빌드 작업과 업로드 계획입니다.'} />
          <div className="flex justify-end px-4 pt-4">
            <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
              <RotateCcw className={loading ? 'size-4 animate-spin' : 'size-4'} />
              새로고침
            </Button>
          </div>
          <div className="space-y-3 p-4">
            {jobs.length === 0 ? (
              <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
                빌드 작업이 없습니다.
              </div>
            ) : null}
            {pagedJobs.map((job, index) => (
              <div key={job.id} className="rounded-md border border-border bg-background/70 p-4">
                <div className="flex items-start justify-between gap-4">
                  <div className="min-w-0">
                    <div className="flex flex-wrap items-center gap-2">
                      <span className="text-xs font-medium text-muted-foreground">No. {sortedJobs.length - (pageStart + index)}</span>
                      <Badge tone={statusTone(job.status)}>{statusText(job.status)}</Badge>
                      <span className="font-medium">{job.target}</span>
                    </div>
                    <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
                      <span>브랜치 <b className="text-foreground">{job.branch}</b></span>
                      <span>커밋 <b className="font-mono text-foreground">{job.commitSha || '-'}</b></span>
                      <span>생성 <b className="text-foreground">{formatDate(job.createdAt)}</b></span>
                    </div>
                  </div>
                  <Button variant="outline" className="size-8 px-0" title="로그" aria-label="로그" onClick={() => setSelectedJob(job)}>
                    <MoreHorizontal className="size-4" />
                  </Button>
                </div>
                <div className="mt-3 grid gap-3 rounded-md border border-border bg-card px-3 py-2 text-xs md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
                  <div className="min-w-0">
                    <p className="text-muted-foreground">산출물</p>
                    <p className="mt-1 truncate font-mono font-medium">{job.artifact}</p>
                  </div>
                  <div className="min-w-0">
                    <p className="text-muted-foreground">다운로드 URL</p>
                    <p className="mt-1 truncate font-mono font-medium">{job.downloadUrl || '-'}</p>
                  </div>
                  <div className="min-w-0 md:col-span-2">
                    <p className="text-muted-foreground">R2 Object Key</p>
                    <p className="mt-1 truncate font-mono font-medium">{job.uploadPath}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="flex items-center justify-between gap-4 border-t border-border px-5 py-3 text-sm">
            <span className="text-xs text-muted-foreground">
              {loading ? '불러오는 중' : `총 ${sortedJobs.length}건 · ${currentPage} / ${totalPages}`}
            </span>
            <div className="flex gap-2">
              <Button
                variant="outline"
                className="h-8 px-3 text-[13px]"
                disabled={currentPage <= 1}
                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
              >
                <ChevronLeft className="size-4" />
                이전
              </Button>
              <Button
                variant="outline"
                className="h-8 px-3 text-[13px]"
                disabled={currentPage >= totalPages}
                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
              >
                다음
                <ChevronRight className="size-4" />
              </Button>
            </div>
          </div>
        </Card>
      </div>

      <Modal
        open={Boolean(selectedJob)}
        title="런처 빌드 로그"
        onClose={() => setSelectedJob(null)}
        className="log-modal-shell"
        footer={<Button variant="outline" onClick={() => setSelectedJob(null)}>닫기</Button>}
      >
        <pre className="whitespace-pre-wrap bg-background p-4 font-mono text-xs leading-6 text-muted-foreground">
          {selectedJob?.logs || '작업을 선택하면 로그가 표시됩니다.'}
        </pre>
      </Modal>
      <Modal
        open={confirmOpen}
        title="빌드 실행 확인"
        onClose={() => setConfirmOpen(false)}
        footer={
          <>
            <Button variant="outline" onClick={() => setConfirmOpen(false)}>취소</Button>
            <Button onClick={createJob} disabled={loading || (isBackend && !version.trim())}>
              <Play className="size-4" />
              실행
            </Button>
          </>
        }
      >
        <div className="space-y-3 text-sm">
          <div className="rounded-md border border-border bg-muted/20 px-4 py-3">
            <p className="font-medium">{isBackend ? '런처 백엔드 이미지 빌드' : '런처 클라이언트 설치 파일 빌드'}를 실행합니다.</p>
            <p className="mt-1 text-xs leading-5 text-muted-foreground">
              실행 후 빌드 작업이 생성되고, 작업 목록에서 진행 상태와 로그를 확인할 수 있습니다.
            </p>
          </div>
          <div className="grid gap-2 rounded-md border border-border bg-background p-4">
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">대상</span>
              <span className="font-medium">{isBackend ? '백엔드' : '클라이언트'}</span>
            </div>
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">저장소</span>
              <span className="truncate font-medium">
                {isBackend ? backendSource?.repository || '-' : clientSource?.repository || activeVersion?.repository || '-'}
              </span>
            </div>
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">브랜치</span>
              <span className="font-medium">{branch}</span>
            </div>
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">커밋</span>
              <span className="font-mono text-xs font-medium">{commitSha.trim() || '브랜치 최신'}</span>
            </div>
            {isBackend ? (
              <div className="flex items-center justify-between gap-4">
                <span className="text-muted-foreground">이미지</span>
                <span className="truncate font-mono text-xs font-medium">{backendImageTag}</span>
              </div>
            ) : null}
          </div>
        </div>
      </Modal>
      <LoadingModal open={loadingVisible} />
    </>
  );
}