import { useState, useEffect, useRef } from "react";
import { Box, Text } from "ink";
import { useStore } from "../state/store.tsx";
import { ProgressBar } from "./ProgressBar.tsx";
import { palette } from "../ui/theme.ts";
import type { QuickFilter } from "../types/index.ts";

// Animated spinner for refresh indicator
function RefreshSpinner() {
  const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
  const [frameIndex, setFrameIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setFrameIndex((prev) => (prev + 1) % frames.length);
    }, 80);
    return () => clearInterval(timer);
  }, []);

  return <Text color="blue">{frames[frameIndex]} Syncing</Text>;
}

interface StatusBarProps {
  projectCount: number;
  dirtyCount: number;
  unpushedCount: number;
  localOnlyCount?: number;
  githubOnlyCount?: number;
  syncedCount?: number;
}

const QUICK_FILTER_LABELS: Record<QuickFilter, string | null> = {
  all: null,
  dirty: "dirty",
  unpushed: "unpushed",
  "no-remote": "no-remote",
  "github-only": "github-only",
  "local-only": "local-only",
  private: "private",
  public: "public",
  archived: "archived",
  forks: "forks",
};

export function StatusBar({ 
  projectCount, 
  dirtyCount, 
  unpushedCount,
  localOnlyCount = 0,
  githubOnlyCount = 0,
  syncedCount = 0,
}: StatusBarProps) {
  const { state } = useStore();
  const { 
    actionInProgress, 
    actionProgress, 
    message, 
    error, 
    sortBy, 
    sortDirection, 
    quickFilter,
    viewMode,
    isLoadingGitHub,
    githubError,
    isRefreshing,
  } = state;

  // Debounce + hysteresis for spinner: avoid flicker but keep visible for real work
  const [showRefreshSpinner, setShowRefreshSpinner] = useState(false);
  const visibleSinceRef = useRef<number | null>(null);
  const timersRef = useRef<{ show?: ReturnType<typeof setTimeout>; hide?: ReturnType<typeof setTimeout> }>({});

  useEffect(() => {
    const clearTimers = () => {
      if (timersRef.current.show) clearTimeout(timersRef.current.show);
      if (timersRef.current.hide) clearTimeout(timersRef.current.hide);
      timersRef.current = {};
    };

    const spinnerActive = actionInProgress || isLoadingGitHub || isRefreshing;

    // Immediate show for explicit actions; delayed show for background loading
    if (spinnerActive) {
      clearTimers();
      if (actionInProgress) {
        if (!showRefreshSpinner) visibleSinceRef.current = Date.now();
        setShowRefreshSpinner(true);
        return;
      }
      timersRef.current.show = setTimeout(() => {
        if (!showRefreshSpinner) visibleSinceRef.current = Date.now();
        setShowRefreshSpinner(true);
      }, 400);
      return () => clearTimers();
    }

    // spinnerActive is false: hide after minimum visible time (500ms) to prevent flicker
    clearTimers();
    const elapsed = visibleSinceRef.current ? Date.now() - visibleSinceRef.current : 0;
    const remaining = elapsed < 500 ? 500 - elapsed : 0;
    timersRef.current.hide = setTimeout(() => {
      setShowRefreshSpinner(false);
      visibleSinceRef.current = null;
    }, remaining);

    return () => clearTimers();
  }, [actionInProgress, isLoadingGitHub, isRefreshing, showRefreshSpinner]);

  const quickFilterLabel = QUICK_FILTER_LABELS[quickFilter];
  const showLocalStats = viewMode === "local" || viewMode === "combined";
  const showRemoteStats = viewMode === "github" || viewMode === "combined";

  // Build static segments with separators for stability
  const segments: { text: string; color?: string }[] = [];
  segments.push({ text: `${projectCount} repos`, color: palette.text.muted });
  if (showLocalStats && syncedCount > 0) {
    segments.push({ text: "•", color: palette.text.muted });
    segments.push({ text: `${syncedCount} synced`, color: palette.text.info });
  }
  if (showLocalStats && localOnlyCount > 0) {
    segments.push({ text: "•", color: palette.text.muted });
    segments.push({ text: `${localOnlyCount} local`, color: palette.text.success });
  }
  if (showRemoteStats && githubOnlyCount > 0) {
    segments.push({ text: "•", color: palette.text.muted });
    segments.push({ text: `${githubOnlyCount} remote`, color: palette.text.muted });
  }
  if (showLocalStats && dirtyCount > 0) {
    segments.push({ text: "•", color: palette.text.muted });
    segments.push({ text: `${dirtyCount} dirty`, color: palette.text.warning });
  }
  if (showLocalStats && unpushedCount > 0) {
    segments.push({ text: "•", color: palette.text.muted });
    segments.push({ text: `${unpushedCount} unpushed`, color: palette.badge.push.bg });
  }
  if (quickFilterLabel) {
    segments.push({ text: "•", color: palette.text.muted });
    segments.push({ text: `[${quickFilterLabel}]`, color: palette.text.warning });
  }

  // Show action in progress with progress bar
  if (actionInProgress) {
    if (actionProgress) {
      return (
        <ProgressBar
          label={actionInProgress}
          current={actionProgress.current}
          total={actionProgress.total}
        />
      );
    }
    return (
      <Box paddingX={1}>
        <Text color={palette.text.warning}>{actionInProgress}...</Text>
      </Box>
    );
  }

  const sortArrow = sortDirection === "desc" ? "↓" : "↑";

  return (
    <Box flexDirection="column" paddingX={1} width="100%">
      <Box gap={2} alignItems="center" justifyContent="space-between" width="100%" flexWrap="wrap">
        <Box gap={1} alignItems="center" flexWrap="wrap">
          {error && <Text color={palette.text.danger}>⚠ {error}</Text>}
          {message && !error && <Text color={palette.text.success}>{message}</Text>}
          {isLoadingGitHub && <Text color={palette.text.warning}>⟳ GitHub</Text>}
          {showRefreshSpinner && <RefreshSpinner />}
          {githubError && !isLoadingGitHub && <Text color={palette.text.danger}>⚠ {githubError}</Text>}
          {segments.map((seg, idx) => (
            <Text key={idx} color={seg.color}>
              {seg.text}
            </Text>
          ))}
        </Box>

        <Text dimColor>
          sort: {sortBy} {sortArrow}
        </Text>
      </Box>

      <Box justifyContent="flex-end" width="100%" gap={1}>
        <Text dimColor>Tab:</Text>
        <Text color={viewMode === "local" ? "cyan" : undefined} dimColor={viewMode !== "local"}>local</Text>
        <Text dimColor>·</Text>
        <Text color={viewMode === "github" ? "cyan" : undefined} dimColor={viewMode !== "github"}>github</Text>
        <Text dimColor>·</Text>
        <Text color={viewMode === "combined" ? "cyan" : undefined} dimColor={viewMode !== "combined"}>all</Text>
        <Text dimColor>  D:clone ?:help</Text>
      </Box>
    </Box>
  );
}