/**
 * DashboardFilterBar — global filter toolbar for the dashboard.
 *
 * Renders the time-range presets and origin filter as two labelled groups of
 * toggle buttons.  The component is fully controlled: it owns no state and
 * communicates changes through the provided callbacks.
 */

import {
  Divider,
  Input,
  Text,
  ToggleButton,
  Toolbar,
  makeStyles,
  tokens,
} from "@fluentui/react-components";
import { useCardStyles } from "../components/commonStyles";
import type { BanOriginFilter, TimeRange } from "../types/ban";
import {
  BAN_ORIGIN_FILTER_LABELS,
  TIME_RANGE_LABELS,
} from "../utils/constants";

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

/** Props for {@link DashboardFilterBar}. */
export interface DashboardFilterBarProps {
  /** Currently selected time-range preset. */
  timeRange: TimeRange;
  /** Called when the user selects a different time-range preset. */
  onTimeRangeChange: (value: TimeRange) => void;
  /** Currently selected origin filter. */
  originFilter: BanOriginFilter;
  /** Called when the user selects a different origin filter. */
  onOriginFilterChange: (value: BanOriginFilter) => void;
  /** Jail filter value (optional). */
  jail?: string;
  /** Called when the jail filter text changes (optional). */
  onJailChange?: (value: string) => void;
  /** IP address filter value (optional). */
  ip?: string;
  /** Called when the IP address filter text changes (optional). */
  onIpChange?: (value: string) => void;
}

// ---------------------------------------------------------------------------
// Constants
// ---------------------------------------------------------------------------

/** Ordered time-range presets rendered as toggle buttons. */
const TIME_RANGES: TimeRange[] = ["24h", "7d", "30d", "365d"];

/** Ordered origin filter options rendered as toggle buttons. */
const ORIGIN_FILTERS: BanOriginFilter[] = ["all", "blocklist", "selfblock"];

// ---------------------------------------------------------------------------
// Styles
// ---------------------------------------------------------------------------

const useStyles = makeStyles({
  container: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    flexWrap: "wrap",
    gap: tokens.spacingVerticalS,
    paddingTop: tokens.spacingVerticalS,
    paddingBottom: tokens.spacingVerticalS,
    paddingLeft: tokens.spacingHorizontalM,
    paddingRight: tokens.spacingHorizontalM,
  },
  group: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: tokens.spacingHorizontalM,
  },
  divider: {
    height: "24px",
    paddingLeft: tokens.spacingHorizontalXL,
    paddingRight: tokens.spacingHorizontalXL,
  },
});

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

/**
 * Renders a global filter bar with time-range and origin-filter toggle buttons.
 *
 * The bar is fully controlled — it does not maintain its own state.
 *
 * @param props - See {@link DashboardFilterBarProps}.
 */
export function DashboardFilterBar({
  timeRange,
  onTimeRangeChange,
  originFilter,
  onOriginFilterChange,
  jail,
  onJailChange,
  ip,
  onIpChange,
}: DashboardFilterBarProps): React.JSX.Element {
  const styles = useStyles();
  const cardStyles = useCardStyles();

  return (
    <div className={`${styles.container} ${cardStyles.card}`}>
      {/* Time-range group */}
      <div className={styles.group}>
        <Text weight="semibold" size={300}>
          Time Range
        </Text>
        <Toolbar aria-label="Time range" size="small">
          {TIME_RANGES.map((r) => (
            <ToggleButton
              key={r}
              size="small"
              checked={timeRange === r}
              aria-pressed={timeRange === r}
              onClick={() => {
                onTimeRangeChange(r);
              }}
            >
              {TIME_RANGE_LABELS[r]}
            </ToggleButton>
          ))}
        </Toolbar>
      </div>

      {/* Visual separator */}
      <div className={styles.divider}>
        <Divider vertical />
      </div>

      {/* Origin-filter group */}
      <div className={styles.group}>
        <Text weight="semibold" size={300}>
          Filter
        </Text>
        <Toolbar aria-label="Origin filter" size="small">
          {ORIGIN_FILTERS.map((f) => (
            <ToggleButton
              key={f}
              size="small"
              checked={originFilter === f}
              aria-pressed={originFilter === f}
              onClick={() => {
                onOriginFilterChange(f);
              }}
            >
              {BAN_ORIGIN_FILTER_LABELS[f]}
            </ToggleButton>
          ))}
        </Toolbar>
      </div>

      {onJailChange && (
        <>
          <div className={styles.divider}>
            <Divider vertical />
          </div>
          <div className={styles.group}>
            <Text weight="semibold" size={300}>
              Jail
            </Text>
            <Input
              placeholder="e.g. sshd"
              size="small"
              value={jail ?? ""}
              onChange={(_ev, data): void => {
                onJailChange(data.value);
              }}
            />
          </div>
        </>
      )}

      {onIpChange && (
        <>
          <div className={styles.divider}>
            <Divider vertical />
          </div>
          <div className={styles.group}>
            <Text weight="semibold" size={300}>
              IP Address
            </Text>
            <Input
              placeholder="e.g. 192.168"
              size="small"
              value={ip ?? ""}
              onChange={(_ev, data): void => {
                onIpChange(data.value);
              }}
            />
          </div>
        </>
      )}
    </div>
  );
}
