import { FileText, 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 { cn } from '../../lib/utils';
import type { GiteaRepo } from '../../types/application';
import {
  getGiteaCommitDiff,
  listGiteaCommitsPage,
  listStudioRepos,
  type GiteaCommit
} from '../launcher/launcher-api';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
import { listCommonAppPipelines, type CommonAppPipeline } from './common-app-api';
import { commonAppComponents, formatRepositoryName } from './common-app-utils';

type CommitRange = 'week' | 'month' | 'all';

const commitRangeLabels: Record<CommitRange, string> = {
  week: '일주일',
  month: '한달',
  all: '전체'
};

const commitPageSize = 5;
const branchOptions = ['develop', 'release', 'main'];

function repoFullName(repo: GiteaRepo) {
  return repo.fullName ?? repo.full_name ?? repo.name;
}

function repoHtmlUrl(repo?: GiteaRepo) {
  return repo?.htmlUrl ?? repo?.html_url ?? '';
}

function splitRepository(repository: string) {
  const [owner, ...repoParts] = repository.split('/');
  const repo = repoParts.join('/');
  return owner && repo ? { owner, repo } : null;
}

function cicdLabel(pipeline?: CommonAppPipeline) {
  if (!pipeline) return '-';
  return pipeline.ciUrl ? `Woodpecker / ${pipeline.ciUrl}` : 'Woodpecker';
}

function commitAuthor(commit: GiteaCommit) {
  return commit.author?.login
    || commit.author?.username
    || commit.author?.full_name
    || commit.author?.name
    || commit.commit?.author?.name
    || commit.committer?.login
    || '-';
}

function commitMessage(commit: GiteaCommit) {
  return (commit.commit?.message || '').split(/\r?\n/)[0]?.trim() || '-';
}

function commitDate(commit: GiteaCommit) {
  return commit.commit?.author?.date
    || commit.commit?.committer?.date
    || commit.created
    || '';
}

function relativeTime(value?: string | null) {
  if (!value) return '-';
  const time = new Date(value).getTime();
  if (Number.isNaN(time)) return '-';
  const seconds = Math.max(1, Math.floor((Date.now() - time) / 1000));
  if (seconds < 60) return '방금 전';
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes}분 전`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}시간 전`;
  const days = Math.floor(hours / 24);
  if (days === 1) return '어제';
  if (days < 7) return `${days}일 전`;
  return new Intl.DateTimeFormat('ko-KR', { month: '2-digit', day: '2-digit' }).format(new Date(value));
}

function commitRangeSince(range: CommitRange) {
  if (range === 'all') return undefined;
  const date = new Date();
  date.setDate(date.getDate() - (range === 'week' ? 7 : 30));
  return date.toISOString();
}

function diffLineClass(line: string) {
  if (line.startsWith('+++') || line.startsWith('---')) return 'bg-[#111827] text-sky-200';
  if (line.startsWith('@@')) return 'bg-[#1e1b4b] text-violet-100';
  if (line.startsWith('+')) return 'bg-[#123524] text-emerald-50';
  if (line.startsWith('-')) return 'bg-[#3a1418] text-rose-50';
  if (line.startsWith('diff --git') || line.startsWith('index ') || line.startsWith('new file mode') || line.startsWith('deleted file mode')) {
    return 'bg-[#0f172a] text-slate-200';
  }
  return 'text-slate-300';
}

function DiffViewer({ diff }: { diff: string }) {
  const lines = diff.trim() ? diff.split(/\r?\n/) : ['표시할 변경 내역이 없습니다.'];
  return (
    <div className="max-h-[64vh] overflow-auto rounded-md border border-border bg-[#020617] font-mono text-xs">
      {lines.map((line, index) => (
        <div key={`${index}-${line}`} className={`grid grid-cols-[64px_minmax(0,1fr)] ${diffLineClass(line)}`}>
          <span className="select-none border-r border-white/10 px-3 py-0.5 text-right text-slate-500">{index + 1}</span>
          <span className="whitespace-pre px-3 py-0.5">{line || ' '}</span>
        </div>
      ))}
    </div>
  );
}

export function CommonAppSourcePage() {
  const { toast } = useToast();
  const [repos, setRepos] = useState<GiteaRepo[]>([]);
  const [pipelines, setPipelines] = useState<CommonAppPipeline[]>([]);
  const [selectedRepository, setSelectedRepository] = useState(commonAppComponents[0]?.repository ?? '');
  const [selectedBranch, setSelectedBranch] = useState('develop');
  const [commitRange, setCommitRange] = useState<CommitRange>('week');
  const [commitPage, setCommitPage] = useState(1);
  const [commits, setCommits] = useState<GiteaCommit[]>([]);
  const [totalCommits, setTotalCommits] = useState<number | null>(null);
  const [hasNextCommitPage, setHasNextCommitPage] = useState(false);
  const [loading, setLoading] = useState(true);
  const [commitsLoading, setCommitsLoading] = useState(false);
  const [commitsError, setCommitsError] = useState('');
  const [diffTarget, setDiffTarget] = useState<GiteaCommit | null>(null);
  const [diffContent, setDiffContent] = useState('');
  const [diffLoading, setDiffLoading] = useState(false);
  const [diffError, setDiffError] = useState('');
  const loadingVisible = useMinimumLoading(loading);

  const pipelineByRepo = useMemo(() => new Map(pipelines.map((pipeline) => [pipeline.repository, pipeline])), [pipelines]);
  const knownCommonRepos = useMemo(() => new Set(commonAppComponents.map((component) => component.repository)), []);
  const sortedRepos = useMemo(() => {
    return [...repos].sort((a, b) => {
      const aKnown = knownCommonRepos.has(repoFullName(a)) ? 0 : 1;
      const bKnown = knownCommonRepos.has(repoFullName(b)) ? 0 : 1;
      if (aKnown !== bKnown) return aKnown - bKnown;
      return repoFullName(a).localeCompare(repoFullName(b));
    });
  }, [knownCommonRepos, repos]);
  const selectedRepo = useMemo(() => repos.find((repo) => repoFullName(repo) === selectedRepository), [repos, selectedRepository]);
  const selectedPipeline = pipelineByRepo.get(selectedRepository);
  const repositoryParts = useMemo(() => splitRepository(selectedRepository), [selectedRepository]);
  const totalCommitPages = totalCommits === null ? null : Math.max(1, Math.ceil(totalCommits / commitPageSize));

  const refresh = () => {
    setLoading(true);
    Promise.all([
      listStudioRepos(100),
      listCommonAppPipelines()
    ])
      .then(([nextRepos, nextPipelines]) => {
        setRepos(nextRepos);
        setPipelines(nextPipelines);
        if (!nextRepos.some((repo) => repoFullName(repo) === selectedRepository)) {
          setSelectedRepository(repoFullName(nextRepos.find((repo) => knownCommonRepos.has(repoFullName(repo))) ?? nextRepos[0]) || '');
        }
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '공통앱 소스 조회 실패', message: error.message });
      })
      .finally(() => setLoading(false));
  };

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

  useEffect(() => {
    setCommitPage(1);
  }, [selectedRepository, selectedBranch, commitRange]);

  useEffect(() => {
    let canceled = false;
    if (!repositoryParts) {
      setCommits([]);
      setTotalCommits(null);
      setHasNextCommitPage(false);
      return;
    }

    setCommitsLoading(true);
    setCommitsError('');
    listGiteaCommitsPage(repositoryParts.owner, repositoryParts.repo, selectedBranch, {
      page: commitPage,
      limit: commitPageSize,
      since: commitRangeSince(commitRange)
    })
      .then((result) => {
        if (canceled) return;
        setCommits(result.commits);
        setTotalCommits(result.total);
        setHasNextCommitPage(result.total === null ? result.commits.length === commitPageSize : commitPage < Math.max(1, Math.ceil(result.total / commitPageSize)));
      })
      .catch((error: Error) => {
        if (canceled) return;
        setCommits([]);
        setTotalCommits(null);
        setHasNextCommitPage(false);
        setCommitsError(error.message);
      })
      .finally(() => {
        if (!canceled) setCommitsLoading(false);
      });

    return () => {
      canceled = true;
    };
  }, [commitPage, commitRange, repositoryParts?.owner, repositoryParts?.repo, selectedBranch]);

  const openCommitDiff = (commit: GiteaCommit) => {
    if (!repositoryParts) return;
    setDiffTarget(commit);
    setDiffContent('');
    setDiffError('');
    setDiffLoading(true);
    getGiteaCommitDiff(repositoryParts.owner, repositoryParts.repo, commit.sha)
      .then((diff) => setDiffContent(diff))
      .catch((error: Error) => setDiffError(error.message))
      .finally(() => setDiffLoading(false));
  };

  return (
    <>
      <PageTitle
        eyebrow="공통앱"
        title="소스 관리"
        description="Gitea 저장소와 브랜치별 커밋 내역을 확인합니다."
        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-[minmax(320px,0.8fr)_minmax(0,1.2fr)]">
        <Card className="min-w-0 overflow-hidden">
          <CardHeader title="Gitea 저장소" description="studio 조직 저장소 기준입니다." />
          <div className="max-h-[520px] overflow-y-auto">
            {sortedRepos.length === 0 && !loading ? (
              <div className="flex min-h-36 items-center justify-center px-5 text-sm text-muted-foreground">표시할 저장소가 없습니다.</div>
            ) : null}
            <div className="divide-y divide-border">
              {sortedRepos.map((repo) => {
                const fullName = repoFullName(repo);
                const selected = fullName === selectedRepository;
                return (
                  <button
                    key={fullName}
                    type="button"
                    className={cn(
                      'block w-full px-5 py-4 text-left transition-colors hover:bg-muted/20',
                      selected && 'bg-primary/20 shadow-[inset_4px_0_0_var(--color-primary)] hover:bg-primary/25'
                    )}
                    onClick={() => setSelectedRepository(fullName)}
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div className="min-w-0">
                        <p className="truncate text-sm font-semibold">{formatRepositoryName(fullName)}</p>
                        <p className="mt-1 truncate text-xs text-muted-foreground">{repo.private ? 'Private' : 'Public'}</p>
                      </div>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
        </Card>

        <Card className="min-w-0 overflow-hidden">
          <CardHeader title="소스 기준" description="커밋 내역을 확인할 저장소와 브랜치입니다." />
          <div className="grid gap-4 p-5 md:grid-cols-2">
            <div className="rounded-md border border-border bg-muted/20 p-4">
              <p className="text-xs text-muted-foreground">저장소</p>
              <p className="mt-2 truncate text-sm font-semibold">{selectedRepository ? formatRepositoryName(selectedRepository) : '-'}</p>
            </div>
            <div className="rounded-md border border-border bg-muted/20 p-4">
              <p className="text-xs text-muted-foreground">CI/CD</p>
              <p className="mt-2 truncate text-sm font-semibold">{cicdLabel(selectedPipeline)}</p>
            </div>
            <div>
              <p className="text-xs text-muted-foreground">조회 브랜치</p>
              <select
                className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground outline-none focus:ring-2 focus:ring-ring"
                value={selectedBranch}
                onChange={(event) => setSelectedBranch(event.target.value)}
              >
                {branchOptions.map((option) => (
                  <option key={option} value={option}>{option}</option>
                ))}
              </select>
            </div>
            <div>
              <p className="text-xs text-muted-foreground">Gitea URL</p>
              <div className="mt-2 flex h-9 items-center gap-2 rounded-md border border-border bg-background px-3">
                <p className="min-w-0 flex-1 truncate text-xs text-muted-foreground">{repoHtmlUrl(selectedRepo) || '-'}</p>
              </div>
            </div>
          </div>
        </Card>
      </div>

      <Card className="mt-4 min-w-0 overflow-hidden">
        <CardHeader
          title="커밋 목록"
          description={`${selectedRepository ? formatRepositoryName(selectedRepository) : '-'} 저장소의 ${selectedBranch} 브랜치 기준 커밋 내역입니다.`}
          action={
            <div className="flex items-center gap-2">
              {(Object.keys(commitRangeLabels) as CommitRange[]).map((range) => (
                <Button
                  key={range}
                  variant={commitRange === range ? 'default' : 'outline'}
                  className="h-8 px-3 text-[13px]"
                  onClick={() => setCommitRange(range)}
                >
                  {commitRangeLabels[range]}
                </Button>
              ))}
            </div>
          }
        />
        <div className="min-h-[284px] overflow-x-auto">
          <table className="w-full min-w-[760px] text-left text-sm">
            <thead className="border-y border-border bg-muted/30 text-xs text-muted-foreground">
              <tr>
                <th className="px-5 py-3 font-medium">작성자</th>
                <th className="px-5 py-3 font-medium">SHA1</th>
                <th className="px-5 py-3 font-medium">메시지</th>
                <th className="px-5 py-3 font-medium">날짜</th>
                <th className="w-16 px-5 py-3 text-right font-medium">상세</th>
              </tr>
            </thead>
            <tbody>
              {commitsLoading ? (
                <tr>
                  <td colSpan={5} className="h-[240px] px-5 py-10 text-center text-sm text-muted-foreground">커밋을 불러오는 중입니다.</td>
                </tr>
              ) : null}
              {!commitsLoading && commitsError ? (
                <tr>
                  <td colSpan={5} className="h-[240px] px-5 py-10 text-center text-sm text-muted-foreground">커밋 조회 실패: {commitsError}</td>
                </tr>
              ) : null}
              {!commitsLoading && !commitsError && commits.length === 0 ? (
                <tr>
                  <td colSpan={5} className="h-[240px] px-5 py-10 text-center text-sm text-muted-foreground">표시할 커밋이 없습니다.</td>
                </tr>
              ) : null}
              {!commitsLoading && !commitsError ? commits.map((commit) => (
                <tr key={commit.sha} className="border-b border-border last:border-0">
                  <td className="whitespace-nowrap px-5 py-3 font-medium">{commitAuthor(commit)}</td>
                  <td className="whitespace-nowrap px-5 py-3 font-mono text-xs text-muted-foreground">{commit.sha.slice(0, 10)}</td>
                  <td className="max-w-[360px] truncate px-5 py-3">{commitMessage(commit)}</td>
                  <td className="whitespace-nowrap px-5 py-3 text-muted-foreground">{relativeTime(commitDate(commit))}</td>
                  <td className="whitespace-nowrap px-5 py-3 text-right">
                    <Button variant="outline" className="size-8 px-0" title="내역 상세" aria-label="내역 상세" onClick={() => openCommitDiff(commit)}>
                      <FileText className="size-4" />
                    </Button>
                  </td>
                </tr>
              )) : null}
            </tbody>
          </table>
        </div>
        <div className="flex items-center justify-between gap-3 border-t border-border px-5 py-4 text-sm">
          <span className="text-muted-foreground">
            {totalCommits === null ? `페이지 ${commitPage}` : `총 ${totalCommits}건 · ${commitPage} / ${totalCommitPages}`}
          </span>
          <div className="flex items-center gap-2">
            <Button variant="outline" className="h-8 px-3 text-[13px]" disabled={commitPage <= 1 || commitsLoading} onClick={() => setCommitPage((page) => Math.max(1, page - 1))}>
              이전
            </Button>
            <Button
              variant="outline"
              className="h-8 px-3 text-[13px]"
              disabled={commitsLoading || (totalCommitPages !== null ? commitPage >= totalCommitPages : !hasNextCommitPage)}
              onClick={() => setCommitPage((page) => totalCommitPages === null ? page + 1 : Math.min(totalCommitPages, page + 1))}
            >
              다음
            </Button>
          </div>
        </div>
      </Card>

      <Modal
        open={Boolean(diffTarget)}
        title="커밋 내역 상세"
        onClose={() => setDiffTarget(null)}
        className="!max-w-[1400px]"
        bodyClassName="max-h-[70vh] px-4 py-4"
        footer={<Button variant="outline" onClick={() => setDiffTarget(null)}>닫기</Button>}
      >
        {diffTarget ? (
          <div className="space-y-4">
            <div className="rounded-md border border-border bg-muted/20 px-4 py-3 text-sm">
              <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
                <span className="font-mono text-xs text-muted-foreground">{diffTarget.sha.slice(0, 10)}</span>
                <span className="font-medium">{commitMessage(diffTarget)}</span>
              </div>
              <p className="mt-1 text-xs text-muted-foreground">
                {commitAuthor(diffTarget)} · {relativeTime(commitDate(diffTarget))}
              </p>
            </div>
            {diffLoading ? (
              <div className="flex min-h-40 items-center justify-center text-sm text-muted-foreground">Diff를 불러오는 중입니다.</div>
            ) : diffError ? (
              <div className="rounded-md border border-rose-500/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">Diff 조회 실패: {diffError}</div>
            ) : (
              <DiffViewer diff={diffContent} />
            )}
          </div>
        ) : null}
      </Modal>

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