import * as React from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { cn } from '@/lib/utils';
import { getRegisteredRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
import { useProjectsStore } from '@/stores/useProjectsStore';
import { useUIStore } from '@/stores/useUIStore';
import { useGitLabAuthStore } from '@/stores/useGitLabAuthStore';
import { validateWorktreeCreate } from '@/lib/worktrees/worktreeManager';
import { SortableTabsStrip } from '@/components/ui/sortable-tabs-strip';
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
import { Icon } from "@/components/icon/Icon";
import { useDebouncedValue } from '@/hooks/useDebouncedValue';
import type {
  GitLabIssueSummary,
  GitLabMergeRequestSummary,
} from '@/lib/api/types';
import type { ProjectRef } from '@/lib/worktrees/worktreeManager';
import { useI18n } from '@/lib/i18n';

type GitLabTab = 'issues' | 'mrs';

interface GitLabIntegrationDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSelect: (result: {
    type: 'issue';
    number: number;
    title: string;
    url: string;
  } | {
    type: 'mr';
    number: number;
    title: string;
    url: string;
    sourceBranch: string;
    includeDiff: boolean;
  } | null) => void;
}

interface ValidationResult {
  isValid: boolean;
  error: string | null;
}

export function GitLabIntegrationDialog({
  open,
  onOpenChange,
  onSelect,
}: GitLabIntegrationDialogProps) {
  const { t } = useI18n();
  const isMobile = useUIStore((state) => state.isMobile);
  const gitlab = getRegisteredRuntimeAPIs()?.gitlab;
  const gitlabAuthStatus = useGitLabAuthStore((state) => state.status);
  const gitlabAuthChecked = useGitLabAuthStore((state) => state.hasChecked);
  const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
  const setSettingsPage = useUIStore((state) => state.setSettingsPage);
  const activeProject = useProjectsStore((state) => state.getActiveProject());

  const projectDirectory = activeProject?.path ?? null;
  const projectRef: ProjectRef | null = React.useMemo(() => {
    if (projectDirectory && activeProject) {
      return { id: activeProject.id, path: projectDirectory };
    }
    return null;
  }, [activeProject, projectDirectory]);

  // State
  const [activeTab, setActiveTab] = React.useState<GitLabTab>('issues');
  const [searchQuery, setSearchQuery] = React.useState('');
  const [issues, setIssues] = React.useState<GitLabIssueSummary[]>([]);
  const [mrs, setMrs] = React.useState<GitLabMergeRequestSummary[]>([]);
  const [loading, setLoading] = React.useState(false);
  const [loadingMore, setLoadingMore] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [selectedIssue, setSelectedIssue] = React.useState<GitLabIssueSummary | null>(null);
  const [selectedMr, setSelectedMr] = React.useState<GitLabMergeRequestSummary | null>(null);
  const [includeDiff, setIncludeDiff] = React.useState(false);
  const [validations, setValidations] = React.useState<Map<string, ValidationResult>>(new Map());
  const [page, setPage] = React.useState(1);
  const [hasMore, setHasMore] = React.useState(false);

  const debouncedSearchQuery = useDebouncedValue(searchQuery, 350);

  const loadData = React.useCallback(async (query?: string) => {
    if (!projectDirectory || !gitlab) return;
    if (gitlabAuthChecked && gitlabAuthStatus?.connected === false) return;

    setLoading(true);
    setError(null);
    setPage(1);
    setHasMore(false);

    try {
      if (activeTab === 'issues' && gitlab.issuesList) {
        const result = await gitlab.issuesList(projectDirectory, { page: 1, query });
        if (result.connected === false) {
          setError(t('session.gitlabIntegration.error.notConnected'));
          setIssues([]);
        } else {
          setIssues(result.issues ?? []);
          setPage(result.page ?? 1);
          setHasMore(Boolean(result.hasMore));
        }
      } else if (activeTab === 'mrs' && gitlab.mrsList) {
        const result = await gitlab.mrsList(projectDirectory, { page: 1, query });
        if (result.connected === false) {
          setError(t('session.gitlabIntegration.error.notConnected'));
          setMrs([]);
        } else {
          setMrs(result.mrs ?? []);
          setPage(result.page ?? 1);
          setHasMore(Boolean(result.hasMore));
        }
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : t('session.gitlabIntegration.error.loadDataFailed'));
    } finally {
      setLoading(false);
    }
  }, [projectDirectory, gitlab, gitlabAuthChecked, gitlabAuthStatus, activeTab, t]);

  React.useEffect(() => {
    if (!open || !projectDirectory) return;
    if (gitlabAuthChecked && gitlabAuthStatus?.connected === false) return;
    if (!gitlab) return;
    if (!debouncedSearchQuery.trim()) {
      void loadData();
      return;
    }

    const controller = new AbortController();
    setLoading(true);
    setError(null);
    setPage(1);
    setHasMore(false);

    const apiCall = activeTab === 'issues' && gitlab.issuesList
      ? gitlab.issuesList(projectDirectory, { page: 1, query: debouncedSearchQuery.trim() })
      : activeTab === 'mrs' && gitlab.mrsList
        ? gitlab.mrsList(projectDirectory, { page: 1, query: debouncedSearchQuery.trim() })
        : null;

    if (!apiCall) {
      setLoading(false);
      return;
    }

    apiCall
      .then((result) => {
        if (controller.signal.aborted) return;
        if ('issues' in result) {
          if (result.connected === false) {
            setError(t('session.gitlabIntegration.error.notConnected'));
            setIssues([]);
          } else {
            setIssues(result.issues ?? []);
            setPage(result.page ?? 1);
            setHasMore(Boolean(result.hasMore));
          }
        } else if ('mrs' in result) {
          if (result.connected === false) {
            setError(t('session.gitlabIntegration.error.notConnected'));
            setMrs([]);
          } else {
            setMrs(result.mrs ?? []);
            setPage(result.page ?? 1);
            setHasMore(Boolean(result.hasMore));
          }
        }
      })
      .catch((err) => {
        if (controller.signal.aborted) return;
        setError(err instanceof Error ? err.message : t('session.gitlabIntegration.error.loadDataFailed'));
      })
      .finally(() => {
        if (!controller.signal.aborted) setLoading(false);
      });

    return () => controller.abort();
  }, [open, projectDirectory, gitlab, gitlabAuthChecked, gitlabAuthStatus, activeTab, debouncedSearchQuery, loadData, t]);

  const loadMore = React.useCallback(async () => {
    if (!projectDirectory || !gitlab) return;
    if (loading || loadingMore) return;
    if (!hasMore) return;

    setLoadingMore(true);

    try {
      const nextPage = page + 1;

      if (activeTab === 'issues' && gitlab.issuesList) {
        const result = debouncedSearchQuery.trim()
          ? await gitlab.issuesList(projectDirectory, { page: nextPage, query: debouncedSearchQuery.trim() })
          : await gitlab.issuesList(projectDirectory, { page: nextPage });
        if (result.connected !== false) {
          setIssues(prev => [...prev, ...(result.issues ?? [])]);
          setPage(result.page ?? nextPage);
          setHasMore(Boolean(result.hasMore));
        }
      } else if (activeTab === 'mrs' && gitlab.mrsList) {
        const result = debouncedSearchQuery.trim()
          ? await gitlab.mrsList(projectDirectory, { page: nextPage, query: debouncedSearchQuery.trim() })
          : await gitlab.mrsList(projectDirectory, { page: nextPage });
        if (result.connected !== false) {
          setMrs(prev => [...prev, ...(result.mrs ?? [])]);
          setPage(result.page ?? nextPage);
          setHasMore(Boolean(result.hasMore));
        }
      }
    } catch {
      // Silently fail on load more errors
    } finally {
      setLoadingMore(false);
    }
  }, [projectDirectory, gitlab, activeTab, page, hasMore, loading, loadingMore, debouncedSearchQuery]);

  // Reset state when dialog opens/closes
  React.useEffect(() => {
    if (!open) {
      setActiveTab('issues');
      setSearchQuery('');
      setIssues([]);
      setMrs([]);
      setSelectedIssue(null);
      setSelectedMr(null);
      setIncludeDiff(false);
      setError(null);
      setValidations(new Map());
      setPage(1);
      setHasMore(false);
      return;
    }

    void loadData();
  }, [open, loadData]);

  // Validate branches for worktree creation
  const validateBranch = React.useCallback(async (branchName: string) => {
    if (!projectRef || !branchName) return;

    // Check cache first
    if (validations.has(branchName)) return;

    try {
      const result = await validateWorktreeCreate(projectRef, {
        mode: 'new',
        branchName,
        worktreeName: branchName,
      });

      const blockingError = result.errors.find((entry) => entry.code === 'branch_in_use');

      setValidations(prev => new Map(prev).set(branchName, {
        isValid: !blockingError,
        error: blockingError
          ? t(blockingError.code === 'branch_exists'
            ? 'session.gitlabIntegration.validation.branchAlreadyExists'
            : 'session.gitlabIntegration.validation.branchAlreadyCheckedOut')
          : null,
      }));
    } catch {
      setValidations(prev => new Map(prev).set(branchName, {
        isValid: false,
        error: t('session.gitlabIntegration.validation.failed'),
      }));
    }
  }, [projectRef, validations, t]);

  // Validate MR branches when loaded
  React.useEffect(() => {
    if (!open || activeTab !== 'mrs') return;

    mrs.forEach(mr => {
      if (mr.sourceBranch) {
        void validateBranch(mr.sourceBranch);
      }
    });
  }, [open, activeTab, mrs, validateBranch]);

  // GitLab connection check
  const isGitLabConnected = gitlabAuthChecked && gitlabAuthStatus?.connected === true;

  const openGitLabSettings = () => {
    setSettingsPage('git');
    setSettingsDialogOpen(true);
  };

  // Handle selection
  const handleSelectIssue = (issue: GitLabIssueSummary) => {
    setSelectedIssue(issue);
    setSelectedMr(null);
  };

  const handleSelectMr = (mr: GitLabMergeRequestSummary) => {
    setSelectedMr(mr);
    setSelectedIssue(null);
  };

  const handleConfirm = () => {
    if (selectedIssue) {
      onSelect({
        type: 'issue',
        number: selectedIssue.number,
        title: selectedIssue.title,
        url: selectedIssue.url,
      });
    } else if (selectedMr) {
      onSelect({
        type: 'mr',
        number: selectedMr.number,
        title: selectedMr.title,
        url: selectedMr.url,
        sourceBranch: selectedMr.sourceBranch,
        includeDiff,
      });
    }
    onOpenChange(false);
  };

  const handleClear = () => {
    setSelectedIssue(null);
    setSelectedMr(null);
    setIncludeDiff(false);
  };

  // Check if selection is valid
  const canConfirm = selectedIssue || (selectedMr && validations.get(selectedMr.sourceBranch)?.isValid !== false);

  // Check if MR is blocked
  const isMrBlocked = (mr: GitLabMergeRequestSummary): boolean => {
    if (!mr.sourceBranch) return true;
    const validation = validations.get(mr.sourceBranch);
    return validation?.isValid === false;
  };

  // Content for the dialog (shared between mobile and desktop)
  const dialogContent = (
    <>
      {!isGitLabConnected ? (
        <div className="flex-1 flex flex-col items-center justify-center p-8 gap-4">
          <Icon name="gitlab" className="h-12 w-12 text-muted-foreground" />
          <div className="text-center">
            <p className="typography-ui-label text-foreground">{t('session.gitlabIntegration.connect.title')}</p>
            <p className="typography-small text-muted-foreground mt-1">
              {t('session.gitlabIntegration.connect.description')}
            </p>
          </div>
          <Button onClick={openGitLabSettings} size="sm">{t('session.gitlabIntegration.connect.action')}</Button>
        </div>
      ) : (
        <>
          {/* Search */}
          <div className="relative mt-2">
            <Icon name="search" className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder={activeTab === 'issues'
                ? t('session.gitlabIntegration.search.issuesPlaceholder')
                : t('session.gitlabIntegration.search.mrsPlaceholder')}
              className="h-8 pl-9"
            />
          </div>

          {/* List Content */}
          <div className="mt-2 h-[300px] overflow-hidden">
            <div className="h-full overflow-y-auto">
              {/* Loading */}
              {loading && (
                <div className="flex items-center justify-center h-full">
                  <Icon name="loader-4" className="h-5 w-5 animate-spin text-muted-foreground" />
                </div>
              )}

              {/* Error */}
              {error && (
                <div className="flex items-center justify-center h-full">
                  <div className="flex items-center gap-2 p-2 rounded-md bg-destructive/10 text-destructive">
                    <Icon name="error-warning" className="h-4 w-4" />
                    <span className="typography-small">{error}</span>
                  </div>
                </div>
              )}

              {/* Issues List */}
              {!loading && !error && activeTab === 'issues' && (
                <div className="space-y-0.5 min-h-full">
                  {issues.length > 0 ? (
                    issues.map(issue => (
                      <button
                        key={issue.number}
                        onClick={() => handleSelectIssue(issue)}
                        className={cn(
                          'w-full text-left px-2 py-1.5 rounded transition-colors',
                          selectedIssue?.number === issue.number
                            ? 'bg-interactive-selection text-interactive-selection-foreground'
                            : 'hover:bg-interactive-hover'
                        )}
                      >
                        <div className="flex items-start gap-2">
                          <span className="text-muted-foreground shrink-0 typography-micro">#{issue.number}</span>
                          <div className="min-w-0 flex-1">
                            <span className="typography-small line-clamp-2">{issue.title}</span>
                          </div>
                        </div>
                      </button>
                    ))
                  ) : (
                    <div className="flex items-center justify-center h-[300px] text-center typography-small text-muted-foreground">
                      {t('session.gitlabIntegration.empty.noIssuesFound')}
                    </div>
                  )}

                  {hasMore && !loadingMore && (
                    <div className="flex justify-center pt-2">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => void loadMore()}
                        className="h-7 text-xs"
                      >
                        {t('session.gitlabIntegration.actions.loadMore')}
                      </Button>
                    </div>
                  )}
                  {loadingMore && (
                    <div className="flex items-center justify-center py-2">
                      <Icon name="loader-4" className="h-4 w-4 animate-spin text-muted-foreground" />
                    </div>
                  )}
                </div>
              )}

              {/* MRs List */}
              {!loading && !error && activeTab === 'mrs' && (
                <div className="space-y-0.5 min-h-full">
                  {mrs.length > 0 ? (
                    mrs.map(mr => {
                      const blocked = isMrBlocked(mr);
                      const validation = mr.sourceBranch ? validations.get(mr.sourceBranch) : undefined;

                      return (
                        <button
                          key={mr.number}
                          onClick={() => !blocked && handleSelectMr(mr)}
                          disabled={blocked}
                          className={cn(
                            'w-full text-left px-2 py-1.5 rounded transition-colors',
                            selectedMr?.number === mr.number
                              ? 'bg-interactive-selection text-interactive-selection-foreground'
                              : blocked
                                ? 'opacity-50 cursor-not-allowed'
                                : 'hover:bg-interactive-hover'
                          )}
                        >
                          <div className="flex items-start gap-2">
                            <span className="text-muted-foreground shrink-0 typography-micro">!{mr.number}</span>
                            <div className="min-w-0 flex-1">
                              <span className="typography-small line-clamp-1">{mr.title}</span>
                              <div className="flex items-center gap-2 mt-0.5">
                                <span className="typography-micro text-muted-foreground">
                                  {mr.sourceBranch} → {mr.targetBranch}
                                </span>
                                {mr.draft && (
                                  <span className="typography-micro px-1 py-0.5 rounded bg-status-info/10 text-status-info">
                                    {t('session.gitlabIntegration.draftBadge')}
                                  </span>
                                )}
                                {blocked && validation?.error && (
                                  <span className="typography-micro text-destructive">
                                    {validation.error}
                                  </span>
                                )}
                              </div>
                            </div>
                          </div>
                        </button>
                      );
                    })
                  ) : (
                    <div className="flex items-center justify-center h-[300px] text-center typography-small text-muted-foreground">
                      {t('session.gitlabIntegration.empty.noMergeRequestsFound')}
                    </div>
                  )}

                  {hasMore && !loadingMore && (
                    <div className="flex justify-center pt-2">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => void loadMore()}
                        className="h-7 text-xs"
                      >
                        {t('session.gitlabIntegration.actions.loadMore')}
                      </Button>
                    </div>
                  )}
                  {loadingMore && (
                    <div className="flex items-center justify-center py-2">
                      <Icon name="loader-4" className="h-4 w-4 animate-spin text-muted-foreground" />
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        </>
      )}
    </>
  );

  // Footer content
  const footerContent = (
    <div className={cn(
      'w-full',
      isMobile ? 'flex flex-col gap-2' : 'flex flex-row items-center'
    )}>
      {/* Left side: Selected Item / Checkbox */}
      <div className={cn(
        'flex items-center gap-4',
        isMobile ? 'w-full justify-center order-1' : 'flex-1'
      )}>
        {/* Selected Issue/MR display - hidden on mobile (shown in header instead) */}
        {!isMobile && (selectedIssue || selectedMr) && (
          <div className="flex items-center gap-2 px-2 h-8 rounded-md bg-muted/50 border border-border/50">
            <Icon name="check" className="h-3.5 w-3.5 text-status-success shrink-0" />
            <span className="typography-small truncate max-w-[150px]">
              {selectedIssue
                ? t('session.gitlabIntegration.selected.issueNumber', { number: selectedIssue.number })
                : t('session.gitlabIntegration.selected.mrNumber', { number: selectedMr?.number ?? '' })}
            </span>
            <button
              onClick={handleClear}
              className="text-muted-foreground hover:text-foreground shrink-0 p-0.5 rounded hover:bg-muted transition-colors"
            >
              <Icon name="close" className="h-3.5 w-3.5" />
            </button>
          </div>
        )}

        {/* Include Diff Checkbox - only show when MR tab is active and MR is selected */}
        {activeTab === 'mrs' && selectedMr && (
          <label className="flex items-center gap-2 cursor-pointer h-8">
            <Checkbox
              checked={includeDiff}
              onChange={(checked) => setIncludeDiff(checked)}
              ariaLabel={t('session.gitlabIntegration.includeDiffAria')}
            />
            <span className="typography-small text-foreground">
              {t('session.gitlabIntegration.includeDiff')}
            </span>
          </label>
        )}
      </div>

      {/* Right side: Buttons */}
      <div className={cn(
        'flex gap-2',
        isMobile ? 'w-full order-2' : 'justify-end'
      )}>
        <Button
          variant="outline"
          size="sm"
          onClick={() => onOpenChange(false)}
          className={cn(isMobile && 'flex-1')}
        >
          {t('session.gitlabIntegration.actions.cancel')}
        </Button>
        <Button
          size="sm"
          onClick={handleConfirm}
          disabled={!canConfirm}
          className={cn(isMobile && 'flex-1')}
        >
          {t('session.gitlabIntegration.actions.select')}
        </Button>
      </div>
    </div>
  );

  return (
    <>
      {isMobile ? (
        <MobileOverlayPanel
          open={open}
          title={t('session.gitlabIntegration.title')}
          onClose={() => onOpenChange(false)}
          footer={!isGitLabConnected ? undefined : footerContent}
          renderHeader={(closeButton) => (
            <div className="flex flex-col gap-2 px-3 py-2 border-b border-border/40">
              <div className="flex items-center justify-between">
                <h2 className="typography-ui-label font-semibold text-foreground">{t('session.gitlabIntegration.title')}</h2>
                {closeButton}
              </div>
              {/* Tabs - using SortableTabsStrip */}
              <div className="w-full">
                <SortableTabsStrip
                  items={[
                    { id: 'issues', label: t('session.gitlabIntegration.tabs.issues'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
                    { id: 'mrs', label: t('session.gitlabIntegration.tabs.mergeRequests'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
                  ]}
                  activeId={activeTab}
                  onSelect={(id) => {
                    setActiveTab(id as GitLabTab);
                    setSearchQuery('');
                  }}
                  variant="active-pill"
                  layoutMode="fit"
                />
              </div>

              {/* Selected Item Inline Display */}
              {(selectedIssue || selectedMr) && (
                <div className="flex items-center gap-2 px-2 py-1 rounded-md bg-muted/50 border border-border/50">
                  <Icon name="check" className="h-3.5 w-3.5 text-status-success shrink-0" />
                  <span className="typography-small truncate flex-1">
                    {selectedIssue
                      ? t('session.gitlabIntegration.selected.issueNumber', { number: selectedIssue.number })
                      : t('session.gitlabIntegration.selected.mrNumber', { number: selectedMr?.number ?? '' })}
                  </span>
                  <button
                    onClick={handleClear}
                    className="text-muted-foreground hover:text-foreground shrink-0 p-0.5 rounded hover:bg-muted transition-colors"
                  >
                    <Icon name="close" className="h-3.5 w-3.5" />
                  </button>
                </div>
              )}
            </div>
          )}
        >
          {dialogContent}
        </MobileOverlayPanel>
      ) : (
        <Dialog open={open} onOpenChange={onOpenChange}>
          <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col">
            <DialogHeader className="flex flex-row items-center justify-between">
              <div className="flex items-center gap-3">
                <DialogTitle className="flex items-center gap-2 shrink-0">
                  <Icon name="gitlab" className="h-5 w-5" />
                  {t('session.gitlabIntegration.title')}
                </DialogTitle>

                {/* Tabs - using SortableTabsStrip */}
                <div className="w-[220px]">
                  <SortableTabsStrip
                    items={[
                      { id: 'issues', label: t('session.gitlabIntegration.tabs.issues'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
                      { id: 'mrs', label: t('session.gitlabIntegration.tabs.mergeRequests'), icon: <Icon name="gitlab" className="h-3.5 w-3.5" /> },
                    ]}
                    activeId={activeTab}
                    onSelect={(id) => {
                      setActiveTab(id as GitLabTab);
                      setSearchQuery('');
                    }}
                    variant="active-pill"
                    layoutMode="fit"
                  />
                </div>
              </div>
            </DialogHeader>

            {dialogContent}

            {/* Footer */}
            <DialogFooter className="mt-1">
              {footerContent}
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
    </>
  );
}