import { useEffect, useMemo, useState } from 'react';
import { ChevronLeft, ChevronRight, MoreHorizontal, Play, RotateCcw, Search, Square, Trash2 } from 'lucide-react';
import { Button, Card, CardHeader, Modal } from '../../components/ui';
import { useToast } from '../../components/toast';
import { PageTitle } from '../../layout/AppLayout';
import type { BuildJob, SourceComponent } from '../../types/application';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
import { AppSelector, StatusBadge, formatDate, isBuildDone, useApps } from './ApplicationControls';
import { cancelBuildJob, createBuildJob, deleteBuildJob, listBuildJobs, listSources } from './application-api';

function buildTargetForType(type?: string | null) {
  return {
    ELECTRON: 'AppImage',
    CONTAINER: 'container-image',
    STATIC_WEB: 'web-image',
    DATABASE: 'database',
    MIGRATION: 'prisma/migrations'
  }[type ?? ''] ?? 'container-image';
}

function predictedArtifact(component: SourceComponent | undefined, branch: string, commitSha: string) {
  if (!component) return '-';
  const suffix = commitSha.trim() ? commitSha.trim().slice(0, 7) : branch;
  if (component.type === 'ELECTRON') return `${component.name}-${suffix}.AppImage`;
  if (component.type === 'DATABASE' || component.type === 'MIGRATION') return `${component.name}:${branch}:migration-check`;
  return `localhost:5000/${component.name}:${suffix}`;
}

function statusLabel(status: string) {
  return {
    PENDING: '대기',
    RUNNING: '실행 중',
    SUCCEEDED: '성공',
    FAILED: '실패',
    CANCELED: '취소'
  }[status] ?? status;
}

function durationLabel(job: BuildJob) {
  if (job.status === 'PENDING') return '대기 중';
  if (job.status === 'RUNNING') return '진행 중';
  if (!job.startedAt || !job.finishedAt) return '-';

  const startedAt = new Date(job.startedAt).getTime();
  const finishedAt = new Date(job.finishedAt).getTime();
  if (Number.isNaN(startedAt) || Number.isNaN(finishedAt) || finishedAt < startedAt) return '-';

  const seconds = Math.max(1, Math.round((finishedAt - startedAt) / 1000));
  const minutes = Math.floor(seconds / 60);
  const restSeconds = seconds % 60;
  return minutes ? `${minutes}분 ${restSeconds}초` : `${restSeconds}초`;
}

function resultArtifact(job: BuildJob) {
  return job.image || job.artifact || '-';
}

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

const buildJobPageSize = 3;

export function BuildManagementPage() {
  const { apps, selectedApp, selectedAppId, selectApp, loading: appsLoading } = useApps();
  const { toast } = useToast();
  const [sources, setSources] = useState<SourceComponent[]>([]);
  const [jobs, setJobs] = useState<BuildJob[]>([]);
  const [selectedComponentId, setSelectedComponentId] = useState('');
  const [branch, setBranch] = useState('develop');
  const [commitSha, setCommitSha] = useState('');
  const [selectedJob, setSelectedJob] = useState<BuildJob | null>(null);
  const [loading, setLoading] = useState(false);
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [page, setPage] = useState(1);
  const loadingVisible = useMinimumLoading(appsLoading || loading);

  const componentOptions = useMemo(
    () => {
      const appSources = selectedAppId ? sources.filter((source) => source.appId === selectedAppId) : sources;
      return appSources.filter((source) => (source.imageSource ?? 'SOURCE') === 'SOURCE');
    },
    [selectedAppId, sources]
  );
  const selectedComponent = componentOptions.find((source) => source.id === selectedComponentId) ?? componentOptions[0];
  const selectedTarget = selectedComponent?.buildTarget || buildTargetForType(selectedComponent?.type);
  const predicted = predictedArtifact(selectedComponent, branch, commitSha);

  const refresh = async () => {
    setLoading(true);
    try {
      const [nextSources, nextJobs] = await Promise.all([listSources(), listBuildJobs(selectedApp?.key)]);
      setSources(nextSources);
      setJobs(nextJobs);
      const filteredSources = (selectedAppId ? nextSources.filter((source) => source.appId === selectedAppId) : nextSources)
        .filter((source) => (source.imageSource ?? 'SOURCE') === 'SOURCE');
      setSelectedComponentId((prev) => {
        const valid = filteredSources.some((source) => source.id === prev);
        const next = valid ? prev : filteredSources[0]?.id || '';
        const nextSource = filteredSources.find((source) => source.id === next);
        setBranch(nextSource?.branch || 'develop');
        return next;
      });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void refresh();
  }, [selectedAppId, selectedApp?.key]);

  useEffect(() => {
    if (!componentOptions.some((source) => source.id === selectedComponentId)) {
      const nextComponent = componentOptions[0];
      setSelectedComponentId(nextComponent?.id || '');
      setBranch(nextComponent?.branch || 'develop');
    }
  }, [componentOptions, selectedComponentId]);

  const filteredJobs = useMemo(() => {
    const normalizedSearch = search.trim().toLowerCase();
    return jobs
      .filter((job) => {
        const text = `${job.component.app.name} ${job.component.name} ${job.component.repository ?? ''} ${job.branch} ${job.commitSha ?? ''} ${resultArtifact(job)} ${job.status}`.toLowerCase();
        const matchesSearch = normalizedSearch ? text.includes(normalizedSearch) : true;
        const matchesStatus = statusFilter ? job.status === statusFilter : true;
        return matchesSearch && matchesStatus;
      })
      .sort((a, b) => jobTime(b) - jobTime(a));
  }, [jobs, search, statusFilter]);

  const totalPages = Math.max(1, Math.ceil(filteredJobs.length / buildJobPageSize));
  const currentPage = Math.min(page, totalPages);
  const pageStart = (currentPage - 1) * buildJobPageSize;
  const pagedJobs = filteredJobs.slice(pageStart, pageStart + buildJobPageSize);

  useEffect(() => {
    setPage(1);
  }, [search, statusFilter, selectedAppId]);

  const startBuild = async () => {
    if (!selectedComponent) return;
    try {
      const result = await createBuildJob({ componentId: selectedComponent.id, branch, commitSha });
      toast({ type: 'success', message: '빌드 작업이 생성되었습니다.' });
      setSelectedJob(result.buildJob);
      await refresh();
    } catch (error) {
      toast({ type: 'error', message: error instanceof Error ? error.message : '빌드 생성에 실패했습니다.' });
    }
  };

  const retryBuild = async (job: BuildJob) => {
    try {
      const result = await createBuildJob({ componentId: job.componentId, branch: job.branch, commitSha: job.commitSha ?? '' });
      toast({ type: 'success', message: '빌드 작업이 다시 생성되었습니다.' });
      setSelectedJob(result.buildJob);
      await refresh();
    } catch (error) {
      toast({ type: 'error', message: error instanceof Error ? error.message : '빌드 재실행에 실패했습니다.' });
    }
  };

  const stopJob = async (id: string) => {
    try {
      await cancelBuildJob(id);
      toast({ type: 'success', message: '빌드 중지를 요청했습니다.' });
      await refresh();
    } catch (error) {
      toast({ type: 'error', message: error instanceof Error ? error.message : '빌드 중지에 실패했습니다.' });
    }
  };

  const removeJob = async (id: string) => {
    try {
      await deleteBuildJob(id);
      toast({ type: 'success', message: '빌드 작업이 삭제되었습니다.' });
      await refresh();
    } catch (error) {
      toast({ type: 'error', message: error instanceof Error ? error.message : '삭제에 실패했습니다.' });
    }
  };

  return (
    <>
      <PageTitle
        eyebrow="어플리케이션"
        title="빌드 관리"
        description="저장소 소스에서 컨테이너 이미지와 런처 다운로드용 클라이언트 산출물을 만드는 작업을 관리합니다."
      />

      <AppSelector apps={apps} value={selectedAppId} loading={appsLoading} onChange={selectApp} />

      <Card className="mb-4">
        <CardHeader title="빌드 요청" description="구성요소, 브랜치, 커밋 기준으로 빌드 작업을 생성합니다." />
        <div className="grid gap-4 p-5 xl:grid-cols-[1.2fr_1fr]">
          <div className="grid gap-4 md:grid-cols-2">
            <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={selectedComponent?.id ?? ''}
                onChange={(event) => {
                  const next = componentOptions.find((source) => source.id === event.target.value);
                  setSelectedComponentId(event.target.value);
                  setBranch(next?.branch || 'develop');
                }}
              >
                {componentOptions.length === 0 ? <option value="">구성요소 없음</option> : null}
                {componentOptions.map((component) => <option key={component.id} value={component.id}>{component.name}</option>)}
              </select>
            </label>
            <label className="block">
              <span className="text-xs font-medium text-muted-foreground">Branch</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 md:col-span-2">
              <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 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>
          </div>
          <div className="grid gap-3 rounded-md border border-border bg-muted/20 p-4 text-sm">
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">Repository</span>
              <span className="truncate font-medium">{selectedComponent?.repository || '미연결'}</span>
            </div>
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">빌드 대상</span>
              <span className="truncate font-medium">{selectedTarget}</span>
            </div>
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">예상 결과물</span>
              <span className="truncate font-medium">{predicted}</span>
            </div>
            <Button className="mt-1 h-8 px-3 text-[13px]" onClick={startBuild} disabled={!selectedComponent || appsLoading || loading}>
              <Play className="size-4" />
              빌드 실행
            </Button>
          </div>
        </div>
      </Card>

      <Card className="min-w-0 overflow-hidden">
        <div className="flex flex-col gap-3 border-b border-border px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
          <h2 className="text-sm font-semibold text-foreground">빌드 작업 목록</h2>
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
            <div className="relative w-full sm:w-80">
              <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
              <input
                className="h-9 w-full rounded-md border border-input bg-background pl-9 pr-3 text-sm outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
                placeholder="앱, 구성요소, 저장소 검색"
                value={search}
                onChange={(event) => setSearch(event.target.value)}
              />
            </div>
            <select
              className="h-9 rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground outline-none focus:ring-2 focus:ring-ring"
              value={statusFilter}
              onChange={(event) => setStatusFilter(event.target.value)}
            >
              <option value="">전체 상태</option>
              {[...new Set(jobs.map((job) => job.status))].map((status) => (
                <option key={status} value={status}>{statusLabel(status)}</option>
              ))}
            </select>
          </div>
        </div>
        <div className="space-y-3 p-4">
          {!loading && filteredJobs.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. {filteredJobs.length - pageStart - index}</span>
                    <StatusBadge status={statusLabel(job.status)} />
                    <span className="font-medium">{job.component.app.name}</span>
                    <span className="text-muted-foreground">/</span>
                    <span className="font-medium">{job.component.name}</span>
                  </div>
                  <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs">
                    <span className="text-muted-foreground">Repository <b className="text-foreground">{job.component.repository || '-'}</b></span>
                    <span className="text-muted-foreground">Branch <b className="text-foreground">{job.branch}</b></span>
                    <span className="text-muted-foreground">Commit <b className="font-mono text-foreground">{job.commitSha || '-'}</b></span>
                    <span className="text-muted-foreground">대상 <b className="text-foreground">{job.component.buildTarget || buildTargetForType(job.component.type)}</b></span>
                  </div>
                </div>
                <div className="flex shrink-0 justify-end gap-2">
                  <Button variant="outline" className="size-8 px-0" title="로그" aria-label="로그" onClick={() => setSelectedJob(job)}>
                    <MoreHorizontal className="size-4" />
                  </Button>
                  {!isBuildDone(job.status) ? (
                    <Button variant="outline" className="size-8 px-0" title="중지" aria-label="중지" onClick={() => stopJob(job.id)}>
                      <Square className="size-4" />
                    </Button>
                  ) : (
                    <Button variant="outline" className="size-8 px-0" title="재실행" aria-label="재실행" onClick={() => retryBuild(job)}>
                      <RotateCcw className="size-4" />
                    </Button>
                  )}
                  {isBuildDone(job.status) ? (
                    <Button variant="outline" className="size-8 px-0" title="삭제" aria-label="삭제" onClick={() => removeJob(job.id)}>
                      <Trash2 className="size-4" />
                    </Button>
                  ) : null}
                </div>
              </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,1fr)_220px_120px]">
                <div className="min-w-0">
                  <p className="text-muted-foreground">결과물</p>
                  <p className="mt-1 truncate font-mono font-medium">{resultArtifact(job)}</p>
                </div>
                <div>
                  <p className="text-muted-foreground">시작 / 종료</p>
                  <p className="mt-1 font-medium">{formatDate(job.startedAt || job.createdAt)} / {formatDate(job.finishedAt)}</p>
                </div>
                <div>
                  <p className="text-muted-foreground">소요시간</p>
                  <p className="mt-1 font-medium">{durationLabel(job)}</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 ? '불러오는 중' : `총 ${filteredJobs.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>

      <Modal
        open={Boolean(selectedJob)}
        title="빌드 로그"
        onClose={() => setSelectedJob(null)}
        className="log-modal-shell"
        footer={<Button variant="outline" onClick={() => setSelectedJob(null)}>닫기</Button>}
      >
        {selectedJob?.logs ? (
          <pre className="whitespace-pre-wrap bg-background p-4 font-mono text-xs leading-6 text-muted-foreground">
            {selectedJob.logs}
          </pre>
        ) : (
          <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
            작업을 선택하면 로그가 표시됩니다.
          </div>
        )}
      </Modal>
      <LoadingModal open={loadingVisible} />
    </>
  );
}