import { Box, Text } from "ink";
import { TextInput } from "@inkjs/ui";
import { useStore } from "../state/store.tsx";
import { setFilter } from "../state/actions.ts";
import { ViewModeIndicator } from "./ViewModeIndicator.tsx";
import { palette } from "../ui/theme.ts";

export function FilterBar() {
  const { state, dispatch } = useStore();
  const {
    filterText,
    mode,
    sortBy,
    sortDirection,
    viewMode,
    isLoadingGitHub,
    githubError,
    quickFilter,
    languageFilter,
  } = state;

  const isFilterMode = mode === "filter";
  const sortArrow = sortDirection === "desc" ? "↓" : "↑";

  return (
    <Box gap={2} alignItems="center" flexWrap="wrap">
      {/* View mode indicator */}
      <ViewModeIndicator 
        mode={viewMode} 
        isLoadingGitHub={isLoadingGitHub}
        githubError={githubError}
      />

      {/* Filter input */}
      <Box>
        <Text color={isFilterMode ? "cyan" : "gray"}>Filter: </Text>
        {isFilterMode ? (
          <TextInput
            defaultValue={filterText}
            onChange={(value) => dispatch(setFilter(value))}
            placeholder="type to filter..."
          />
        ) : (
          <Text color={filterText ? "white" : "gray"}>
            {filterText || "(press / to filter)"}
          </Text>
        )}
      </Box>

      {/* Active filters summary */}
      <Box gap={1} alignItems="center" flexWrap="wrap">
        {quickFilter !== "all" && (
          <Text color={palette.text.warning}>[{quickFilter}]</Text>
        )}
        {languageFilter && (
          <Text color={palette.text.info}>Lang:{languageFilter}</Text>
        )}
      </Box>

      {/* Sort indicator */}
      <Box flexGrow={1} justifyContent="flex-end" gap={1} alignItems="center">
        <Text color={palette.text.muted} bold>
          Sort: {sortBy} {sortArrow}
        </Text>
        <Text color="gray">(press s to change)</Text>
      </Box>
    </Box>
  );
}