import { useCallback, useEffect, useMemo, useState } from 'react';

import { api, isElectronMode } from '@renderer/api';
import { Badge } from '@renderer/components/ui/badge';
import { Button } from '@renderer/components/ui/button';
import { Input } from '@renderer/components/ui/input';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@renderer/components/ui/tooltip';
import { getTeamColorSet } from '@renderer/constants/teamColors';
import { useStore } from '@renderer/store';
import { buildTaskCountsByTeam, normalizePath } from '@renderer/utils/pathNormalize';
import { getBaseName } from '@renderer/utils/pathUtils';
import {
  CheckCircle,
  Clock,
  Copy,
  FolderOpen,
  GitBranch,
  Play,
  Search,
  Square,
  Trash2,
} from 'lucide-react';
import { useShallow } from 'zustand/react/shallow';

import { CreateTeamDialog } from './dialogs/CreateTeamDialog';
import { TeamEmptyState } from './TeamEmptyState';

import type { ActiveTeamRef, TeamCopyData } from './dialogs/CreateTeamDialog';
import type { TeamCreateRequest, TeamProvisioningProgress, TeamSummary } from '@shared/types';

function generateUniqueName(sourceName: string, existingNames: string[]): string {
  const base = sourceName.replace(/-\d+$/, '');
  const existing = new Set(existingNames);
  for (let i = 1; ; i++) {
    const candidate = `${base}-${i}`;
    if (!existing.has(candidate)) {
      return candidate;
    }
  }
}

type TeamStatus = 'running' | 'provisioning' | 'offline';

function getRecentProjects(team: TeamSummary): string[] {
  const history = team.projectPathHistory;
  if (!history || history.length === 0) {
    return team.projectPath ? [team.projectPath] : [];
  }
  return history.slice(-3).reverse();
}

function folderName(fullPath: string): string {
  return getBaseName(fullPath) || fullPath;
}

function resolveTeamStatus(
  teamName: string,
  aliveTeams: string[],
  provisioningRuns: Record<string, TeamProvisioningProgress>
): TeamStatus {
  if (aliveTeams.includes(teamName)) {
    return 'running';
  }
  const activeStates = new Set(['validating', 'spawning', 'monitoring', 'verifying']);
  for (const run of Object.values(provisioningRuns)) {
    if (run.teamName === teamName && activeStates.has(run.state)) {
      return 'provisioning';
    }
  }
  return 'offline';
}

const StatusBadge = ({ status }: { status: TeamStatus }): React.JSX.Element => {
  switch (status) {
    case 'running':
      return (
        <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-medium text-emerald-400">
          <span className="size-1.5 animate-pulse rounded-full bg-emerald-400" />
          Running
        </span>
      );
    case 'provisioning':
      return (
        <span className="inline-flex items-center gap-1 rounded-full bg-amber-500/15 px-2 py-0.5 text-[10px] font-medium text-amber-400">
          <span className="size-1.5 animate-pulse rounded-full bg-amber-400" />
          Launching...
        </span>
      );
    case 'offline':
      return (
        <span className="inline-flex items-center gap-1 rounded-full bg-zinc-500/15 px-2 py-0.5 text-[10px] font-medium text-zinc-500">
          <span className="size-1.5 rounded-full bg-zinc-500" />
          Offline
        </span>
      );
  }
};

export const TeamListView = (): React.JSX.Element => {
  const electronMode = isElectronMode();
  const [showCreateDialog, setShowCreateDialog] = useState(false);
  const [copyData, setCopyData] = useState<TeamCopyData | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [aliveTeams, setAliveTeams] = useState<string[]>([]);
  const [branchByPath, setBranchByPath] = useState<Map<string, string | null>>(new Map());
  const {
    teams,
    teamsLoading,
    teamsError,
    fetchTeams,
    openTeamTab,
    deleteTeam,
    projects,
    globalTasks,
    fetchAllTasks,
    viewMode,
    repositoryGroups,
    selectedRepositoryId,
    selectedWorktreeId,
    activeProjectId,
  } = useStore(
    useShallow((s) => ({
      teams: s.teams,
      teamsLoading: s.teamsLoading,
      teamsError: s.teamsError,
      fetchTeams: s.fetchTeams,
      openTeamTab: s.openTeamTab,
      deleteTeam: s.deleteTeam,
      projects: s.projects,
      globalTasks: s.globalTasks,
      fetchAllTasks: s.fetchAllTasks,
      viewMode: s.viewMode,
      repositoryGroups: s.repositoryGroups,
      selectedRepositoryId: s.selectedRepositoryId,
      selectedWorktreeId: s.selectedWorktreeId,
      activeProjectId: s.activeProjectId,
    }))
  );
  const { connectionMode, createTeam, provisioningError, provisioningRuns } = useStore(
    useShallow((s) => ({
      connectionMode: s.connectionMode,
      createTeam: s.createTeam,
      provisioningError: s.provisioningError,
      provisioningRuns: s.provisioningRuns,
    }))
  );
  const canCreate = electronMode && connectionMode === 'local';

  // Fetch alive teams on mount and when teams list changes
  useEffect(() => {
    if (!electronMode) return;
    let cancelled = false;
    const fetchAlive = async (): Promise<void> => {
      try {
        const list = await api.teams.aliveList();
        if (!cancelled) setAliveTeams(list);
      } catch {
        // best-effort
      }
    };
    void fetchAlive();
    return () => {
      cancelled = true;
    };
  }, [electronMode, teams]);

  const currentProjectPath = useMemo(() => {
    if (viewMode === 'grouped') {
      const repo = repositoryGroups.find((r) => r.id === selectedRepositoryId);
      const worktree = repo?.worktrees.find((w) => w.id === selectedWorktreeId);
      const path = worktree?.path ?? null;
      return path ? normalizePath(path) : null;
    }
    const project = projects.find((p) => p.id === activeProjectId);
    return project ? normalizePath(project.path) : null;
  }, [
    viewMode,
    repositoryGroups,
    selectedRepositoryId,
    selectedWorktreeId,
    projects,
    activeProjectId,
  ]);

  const filteredTeams = useMemo<TeamSummary[]>(() => {
    let result = teams;

    const q = searchQuery.trim().toLowerCase();
    if (q) {
      result = result.filter(
        (t) =>
          t.teamName.toLowerCase().includes(q) ||
          t.displayName.toLowerCase().includes(q) ||
          t.description.toLowerCase().includes(q)
      );
    }

    const aliveSet = new Set(aliveTeams);
    const matchesProject = currentProjectPath
      ? (t: TeamSummary): boolean => {
          if (t.projectPath && normalizePath(t.projectPath) === currentProjectPath) return true;
          return (
            t.projectPathHistory?.some((p) => normalizePath(p) === currentProjectPath) ?? false
          );
        }
      : null;

    result = [...result].sort((a, b) => {
      // 1. Alive (running) teams first
      const aliveA = aliveSet.has(a.teamName) ? 0 : 1;
      const aliveB = aliveSet.has(b.teamName) ? 0 : 1;
      if (aliveA !== aliveB) return aliveA - aliveB;

      // 2. Matching current project second
      if (matchesProject) {
        const projA = matchesProject(a) ? 0 : 1;
        const projB = matchesProject(b) ? 0 : 1;
        if (projA !== projB) return projA - projB;
      }

      return 0;
    });

    return result;
  }, [teams, searchQuery, currentProjectPath, aliveTeams]);

  // Live branch/worktree for team project paths (poll so it updates during process)
  const projectPathsToPoll = useMemo(() => {
    const byKey = new Map<string, string>();
    for (const team of filteredTeams) {
      const p = team.projectPath?.trim();
      if (p) {
        const key = normalizePath(p);
        if (!byKey.has(key)) byKey.set(key, p);
      }
    }
    return Array.from(byKey.entries());
  }, [filteredTeams]);

  useEffect(() => {
    if (!electronMode || projectPathsToPoll.length === 0) return;
    let cancelled = false;
    const poll = async (): Promise<void> => {
      const next = new Map<string, string | null>();
      for (const [pathKey, actualPath] of projectPathsToPoll) {
        if (cancelled) return;
        try {
          const branch = await api.teams.getProjectBranch(actualPath);
          if (!cancelled) next.set(pathKey, branch);
        } catch {
          if (!cancelled) next.set(pathKey, null);
        }
      }
      if (!cancelled && next.size > 0) {
        setBranchByPath((prev) => {
          const m = new Map(prev);
          for (const [k, v] of next) m.set(k, v);
          return m;
        });
      }
    };
    void poll();
    const interval = setInterval(poll, 6000);
    return () => {
      cancelled = true;
      clearInterval(interval);
    };
  }, [electronMode, projectPathsToPoll]);

  const handleDeleteTeam = useCallback(
    (teamName: string, e: React.MouseEvent) => {
      e.stopPropagation();
      const confirmed = window.confirm(`Delete team "${teamName}"? This action is irreversible.`);
      if (!confirmed) {
        return;
      }
      void deleteTeam(teamName);
    },
    [deleteTeam]
  );

  const handleCopyTeam = useCallback(
    (teamName: string, e: React.MouseEvent) => {
      e.stopPropagation();
      void (async () => {
        try {
          const data = await api.teams.getData(teamName);
          const existingNames = teams.map((t) => t.teamName);
          const uniqueName = generateUniqueName(teamName, existingNames);
          const members = (data.members ?? [])
            .filter((m) => !m.removedAt)
            .map((m) => {
              let role = m.role;
              if (!role && m.agentType && m.agentType !== 'general-purpose') {
                role = m.agentType === 'team-lead' ? 'lead' : m.agentType;
              }
              return { name: m.name, role };
            });
          setCopyData({
            teamName: uniqueName,
            description: data.config.description,
            color: data.config.color,
            members,
          });
          setShowCreateDialog(true);
        } catch {
          // silently ignore — team data may be unavailable
        }
      })();
    },
    [teams]
  );

  const [stoppingTeamName, setStoppingTeamName] = useState<string | null>(null);
  const handleStopTeam = useCallback(async (teamName: string, e: React.MouseEvent) => {
    e.stopPropagation();
    setStoppingTeamName(teamName);
    try {
      await api.teams.stop(teamName);
      setAliveTeams((prev) => prev.filter((n) => n !== teamName));
    } catch (err) {
      console.error('Failed to stop team:', err);
    } finally {
      setStoppingTeamName(null);
    }
  }, []);

  useEffect(() => {
    if (!electronMode) {
      return;
    }
    void fetchTeams();
    void fetchAllTasks();
  }, [electronMode, fetchTeams, fetchAllTasks]);

  const taskCountsByTeam = useMemo(() => buildTaskCountsByTeam(globalTasks), [globalTasks]);

  const activeTeams = useMemo<ActiveTeamRef[]>(() => {
    const aliveSet = new Set(aliveTeams);
    return teams
      .filter((t) => aliveSet.has(t.teamName) && t.projectPath)
      .map((t) => ({
        teamName: t.teamName,
        displayName: t.displayName,
        projectPath: t.projectPath!,
      }));
  }, [teams, aliveTeams]);

  const handleCreateDialogClose = useCallback(() => {
    setShowCreateDialog(false);
    setCopyData(null);
  }, []);

  const handleCreateSubmit = useCallback(
    async (request: TeamCreateRequest) => {
      await createTeam(request);
    },
    [createTeam]
  );

  if (!electronMode) {
    return (
      <div className="flex size-full items-center justify-center p-6">
        <div className="max-w-md text-center">
          <p className="text-sm font-medium text-[var(--color-text)]">
            Teams is only available in Electron mode
          </p>
          <p className="mt-2 text-xs text-[var(--color-text-muted)]">
            In browser mode, access to local `~/.claude/teams` directories is not available.
          </p>
        </div>
      </div>
    );
  }

  const createDialogElement = (
    <CreateTeamDialog
      open={showCreateDialog}
      canCreate={canCreate}
      provisioningError={provisioningError}
      existingTeamNames={teams.map((t) => t.teamName)}
      activeTeams={activeTeams}
      initialData={copyData ?? undefined}
      defaultProjectPath={currentProjectPath}
      onClose={handleCreateDialogClose}
      onCreate={handleCreateSubmit}
      onOpenTeam={openTeamTab}
    />
  );

  const renderHeader = (): React.JSX.Element => (
    <div className="mb-4">
      <div className="flex items-center justify-between">
        <h2 className="text-base font-semibold text-[var(--color-text)]">Teams</h2>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            disabled={!canCreate}
            onClick={() => setShowCreateDialog(true)}
          >
            Create Team
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              void fetchTeams();
            }}
          >
            Refresh
          </Button>
        </div>
      </div>
      {!canCreate ? (
        <p className="mt-2 text-xs text-[var(--color-text-muted)]">
          Only available in local Electron mode.
        </p>
      ) : null}

      {teams.length > 0 ? (
        <div className="relative mt-3">
          <Search
            size={14}
            className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]"
          />
          <Input
            type="text"
            placeholder="Search teams..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="h-8 pl-8 text-xs"
          />
        </div>
      ) : null}
    </div>
  );

  if (teamsLoading) {
    return (
      <div className="size-full overflow-auto p-4">
        {renderHeader()}
        <div className="flex size-full items-center justify-center text-sm text-[var(--color-text-muted)]">
          Loading teams...
        </div>
        {createDialogElement}
      </div>
    );
  }

  if (teamsError) {
    return (
      <div className="size-full overflow-auto p-4">
        {renderHeader()}
        <div className="flex size-full items-center justify-center p-6">
          <div className="text-center">
            <p className="text-sm font-medium text-red-400">Failed to load teams</p>
            <p className="mt-2 text-xs text-[var(--color-text-muted)]">{teamsError}</p>
            <Button
              variant="outline"
              size="sm"
              className="mt-4"
              onClick={() => {
                void fetchTeams();
              }}
            >
              Retry
            </Button>
          </div>
        </div>
        {createDialogElement}
      </div>
    );
  }

  if (teams.length === 0) {
    return (
      <div className="size-full overflow-auto p-4">
        {renderHeader()}
        <TeamEmptyState />
        {createDialogElement}
      </div>
    );
  }

  return (
    <TooltipProvider delayDuration={300}>
      <div className="size-full overflow-auto p-4">
        {renderHeader()}

        {filteredTeams.length === 0 && searchQuery.trim() ? (
          <div className="flex items-center justify-center py-12 text-sm text-[var(--color-text-muted)]">
            No teams matching &quot;{searchQuery.trim()}&quot;
          </div>
        ) : (
          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
            {filteredTeams.map((team) => {
              const status = resolveTeamStatus(team.teamName, aliveTeams, provisioningRuns);
              const teamColorSet = team.color ? getTeamColorSet(team.color) : null;
              const matchesCurrentProject =
                !!currentProjectPath &&
                (() => {
                  if (team.projectPath && normalizePath(team.projectPath) === currentProjectPath)
                    return true;
                  return (
                    team.projectPathHistory?.some((p) => normalizePath(p) === currentProjectPath) ??
                    false
                  );
                })();
              return (
                <div
                  key={team.teamName}
                  role="button"
                  tabIndex={0}
                  className={`group relative cursor-pointer overflow-hidden rounded-lg border bg-[var(--color-surface)] p-4 hover:bg-[var(--color-surface-raised)] ${
                    matchesCurrentProject
                      ? 'border-emerald-500/70 ring-1 ring-emerald-500/30'
                      : 'border-[var(--color-border)]'
                  }`}
                  style={
                    teamColorSet
                      ? { borderLeftWidth: '3px', borderLeftColor: teamColorSet.border }
                      : undefined
                  }
                  onClick={() => openTeamTab(team.teamName, team.projectPath)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      e.preventDefault();
                      openTeamTab(team.teamName, team.projectPath);
                    }
                  }}
                >
                  {teamColorSet ? (
                    <div
                      className="pointer-events-none absolute inset-0 z-0 rounded-lg"
                      style={{ backgroundColor: teamColorSet.badge }}
                    />
                  ) : null}
                  <div className={teamColorSet ? 'relative z-10' : undefined}>
                    <div className="flex items-start justify-between">
                      <div className="flex min-w-0 flex-1 items-center gap-2">
                        <h3 className="truncate text-sm font-semibold text-[var(--color-text)]">
                          {team.displayName}
                        </h3>
                        <StatusBadge status={status} />
                      </div>
                      <div className="flex shrink-0 gap-1">
                        {status === 'running' && (
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <button
                                type="button"
                                className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-amber-500/10 hover:text-amber-300 disabled:opacity-50 group-hover:opacity-100"
                                onClick={(e) => handleStopTeam(team.teamName, e)}
                                disabled={stoppingTeamName === team.teamName}
                                aria-label="Stop team"
                              >
                                <Square size={14} fill="currentColor" />
                              </button>
                            </TooltipTrigger>
                            <TooltipContent side="bottom">
                              {stoppingTeamName === team.teamName ? 'Stopping…' : 'Stop team'}
                            </TooltipContent>
                          </Tooltip>
                        )}
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <button
                              type="button"
                              className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-blue-500/10 hover:text-blue-300 group-hover:opacity-100"
                              onClick={(e) => handleCopyTeam(team.teamName, e)}
                            >
                              <Copy size={14} />
                            </button>
                          </TooltipTrigger>
                          <TooltipContent side="bottom">Copy team</TooltipContent>
                        </Tooltip>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <button
                              type="button"
                              className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-red-500/10 hover:text-red-300 group-hover:opacity-100"
                              onClick={(e) => handleDeleteTeam(team.teamName, e)}
                            >
                              <Trash2 size={14} />
                            </button>
                          </TooltipTrigger>
                          <TooltipContent side="bottom">Delete team</TooltipContent>
                        </Tooltip>
                      </div>
                    </div>
                    <div className="mt-2 flex min-h-10 items-start gap-2">
                      <p className="line-clamp-2 min-w-0 flex-1 text-xs text-[var(--color-text-muted)]">
                        {team.description || 'No description'}
                      </p>
                      {team.projectPath &&
                        (() => {
                          const branch = branchByPath.get(normalizePath(team.projectPath));
                          if (!branch) return null;
                          return (
                            <span
                              className="flex shrink-0 items-center gap-1 rounded bg-[var(--color-surface-raised)] px-1.5 py-0.5 text-[10px] text-[var(--color-text-muted)]"
                              title={branch}
                            >
                              <GitBranch size={10} />
                              <span className="max-w-24 truncate">{branch}</span>
                            </span>
                          );
                        })()}
                    </div>
                    <div className="mt-3 flex flex-wrap items-center gap-1.5">
                      {team.members && team.members.length > 0 ? (
                        team.members.map((m) => {
                          const memberColor = m.color ? getTeamColorSet(m.color) : null;
                          return (
                            <span key={m.name} className="inline-flex items-center gap-1">
                              <span
                                className="rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wide"
                                style={
                                  memberColor
                                    ? {
                                        backgroundColor: memberColor.badge,
                                        color: memberColor.text,
                                        border: `1px solid ${memberColor.border}40`,
                                      }
                                    : undefined
                                }
                              >
                                {m.name}
                              </span>
                              {m.role ? (
                                <span className="text-[9px] text-[var(--color-text-muted)]">
                                  {m.role}
                                </span>
                              ) : null}
                            </span>
                          );
                        })
                      ) : (
                        <Badge variant="secondary" className="text-[10px] font-normal">
                          Members: {team.memberCount}
                        </Badge>
                      )}
                      {(() => {
                        const tc = taskCountsByTeam.get(team.teamName);
                        const pending = tc?.pending ?? 0;
                        const inProgress = tc?.inProgress ?? 0;
                        const completed = tc?.completed ?? 0;
                        const totalTasks = pending + inProgress + completed;
                        const completedRatio = totalTasks > 0 ? completed / totalTasks : 0;
                        return (
                          <div className="mt-2 w-full space-y-1.5">
                            <div className="flex items-center gap-2">
                              <div
                                className="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--color-surface-raised)]"
                                role="progressbar"
                                aria-valuenow={completed}
                                aria-valuemin={0}
                                aria-valuemax={totalTasks}
                                aria-label={`Tasks ${completed}/${totalTasks} completed`}
                              >
                                <div
                                  className="h-full rounded-full bg-emerald-500 transition-all duration-200"
                                  style={{ width: `${Math.round(completedRatio * 100)}%` }}
                                />
                              </div>
                              <span className="shrink-0 text-[10px] font-medium tracking-tight text-[var(--color-text-muted)]">
                                {completed}/{totalTasks}
                              </span>
                            </div>
                            {totalTasks > 0 && (
                              <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-[10px] text-[var(--color-text-muted)]">
                                {inProgress > 0 && (
                                  <span className="inline-flex items-center gap-1">
                                    <Play size={10} className="shrink-0 text-blue-400" />
                                    {inProgress} in_progress
                                  </span>
                                )}
                                {pending > 0 && (
                                  <span className="inline-flex items-center gap-1">
                                    <Clock size={10} className="shrink-0 text-amber-400" />
                                    {pending} pending
                                  </span>
                                )}
                                {completed > 0 && (
                                  <span className="inline-flex items-center gap-1">
                                    <CheckCircle size={10} className="shrink-0 text-emerald-400" />
                                    {completed} completed
                                  </span>
                                )}
                              </div>
                            )}
                          </div>
                        );
                      })()}
                    </div>
                    {(() => {
                      const recentPaths = getRecentProjects(team);
                      if (recentPaths.length === 0) return null;
                      return (
                        <div className="mt-2 flex items-center gap-1 text-[10px] text-[var(--color-text-muted)]">
                          <FolderOpen size={10} className="shrink-0" />
                          <span className="truncate">
                            {recentPaths.map((p, i) => (
                              <span key={p} title={p}>
                                {i === 0 && status === 'running' ? (
                                  <span className="text-emerald-400">{folderName(p)}</span>
                                ) : (
                                  folderName(p)
                                )}
                                {i < recentPaths.length - 1 ? ', ' : ''}
                              </span>
                            ))}
                          </span>
                        </div>
                      );
                    })()}
                  </div>
                </div>
              );
            })}
          </div>
        )}
        {createDialogElement}
      </div>
    </TooltipProvider>
  );
};