import { Box, Text } from "ink";
import { useStore } from "../state/store.tsx";
import { SORT_FIELDS } from "../state/reducer.ts";

export function FilterOptionsOverlay() {
  const { state } = useStore();
  const { quickFilter, viewMode, sortBy, languageFilter } = state;
  
  // Highlight the currently active filter
  const isActive = (filter: string) => quickFilter === filter;
  
  return (
    <Box
      flexDirection="column"
      borderStyle="round"
      borderColor="cyan"
      paddingX={2}
      paddingY={1}
    >
      {/* Title */}
      <Box marginBottom={1}>
        <Text bold color="cyan">Filter Options</Text>
      </Box>
      
      {/* Quick Filters section */}
      <Box marginBottom={1}>
        <Text bold underline>Quick Filters:</Text>
      </Box>
      <Box flexDirection="column" marginBottom={1}>
        <Box gap={2}>
          <FilterKey num="0" label="All repos" active={isActive("all")} />
          <FilterKey num="1" label="Dirty (uncommitted)" active={isActive("dirty")} />
        </Box>
        <Box gap={2}>
          <FilterKey num="2" label="Unpushed commits" active={isActive("unpushed")} />
          <FilterKey num="3" label="No remote configured" active={isActive("no-remote")} />
        </Box>
        <Box gap={2}>
          <FilterKey num="4" label="GitHub-only" active={isActive("github-only")} />
          <FilterKey num="5" label="Local-only" active={isActive("local-only")} />
        </Box>
        <Box gap={2}>
          <FilterKey num="6" label="Private repos" active={isActive("private")} />
          <FilterKey num="7" label="Public repos" active={isActive("public")} />
        </Box>
        <Box gap={2}>
          <FilterKey num="8" label="Archived" active={isActive("archived")} />
          <FilterKey num="9" label="Forks" active={isActive("forks")} />
        </Box>
      </Box>
      
      {/* View Modes */}
      <Box marginBottom={1}>
        <Text bold underline>View Modes:</Text>
        <Text dimColor> (Tab to cycle)</Text>
      </Box>
      <Box marginBottom={1}>
        <ViewModeOption mode="local" current={viewMode} />
        <Text dimColor> → </Text>
        <ViewModeOption mode="github" current={viewMode} />
        <Text dimColor> → </Text>
        <ViewModeOption mode="combined" current={viewMode} />
      </Box>
      
      {/* Sort */}
      <Box marginBottom={1}>
        <Text bold underline>Sort:</Text>
        <Text dimColor> (s to cycle)</Text>
      </Box>
      <Box marginBottom={1}>
        {SORT_FIELDS.map((field, index) => (
          <Box key={field}>
            <SortOption field={field} current={sortBy} />
            {index < SORT_FIELDS.length - 1 && <Text dimColor> → </Text>}
          </Box>
        ))}
      </Box>
      
      {/* Search */}
      <Box marginBottom={1}>
        <Text bold underline>Search:</Text>
      </Box>
      <Box marginBottom={1}>
        <Text color="yellow">/</Text>
        <Text>  Start text search (by name, description, path)</Text>
      </Box>
      
      {/* Language Filter */}
      <Box marginBottom={1}>
        <Text bold underline>Language Filter:</Text>
      </Box>
      <Box marginBottom={1}>
        <Text>Type language name to filter (e.g., typescript, rust)</Text>
      </Box>
      <Box marginBottom={1}>
        <Text>Current: </Text>
        <Text color={languageFilter ? "cyan" : "gray"}>
          {languageFilter || "[none]"}
        </Text>
      </Box>
      
      {/* Footer */}
      <Box marginTop={1}>
        <Text dimColor>Press any key to close</Text>
      </Box>
    </Box>
  );
}

// Helper components
function FilterKey({ num, label, active }: { num: string; label: string; active: boolean }) {
  return (
    <Box width={24}>
      <Text color="yellow">{num}</Text>
      <Text color={active ? "cyan" : undefined}> {label}</Text>
      {active && <Text color="green"> ✓</Text>}
    </Box>
  );
}

function ViewModeOption({ mode, current }: { mode: string; current: string }) {
  const isActive = mode === current;
  return <Text color={isActive ? "cyan" : "gray"}>{mode}</Text>;
}

function SortOption({ field, current }: { field: string; current: string }) {
  const isActive = field === current;
  return <Text color={isActive ? "cyan" : "gray"}>{field}</Text>;
}