import type { ReactNode } from "react";
import { LayoutGrid, Plus, Search, Table2 } from "lucide-react";
import { Box, Button, Group, SegmentedControl, TextInput } from "@mantine/core";

import type { FleetViewMode } from "./useFleetViewMode";

export interface FleetToolbarProps {
  search?: string;
  onSearchChange?: (value: string) => void;
  searchPlaceholder?: string;
  showSearch?: boolean;
  onAdd?: () => void;
  addLabel?: string;
  viewMode: FleetViewMode;
  onViewModeChange: (mode: FleetViewMode) => void;
  /** Optional filters rendered beside search (status, freight type, etc.) */
  filters?: ReactNode;
}

const FleetToolbar = ({
  search = "",
  onSearchChange,
  searchPlaceholder = "Search…",
  showSearch = true,
  onAdd,
  addLabel = "Add",
  viewMode,
  onViewModeChange,
  filters,
}: FleetToolbarProps) => (
  <Box w="100%">
    <Group
      gap="md"
      justify="space-between"
      align="center"
      wrap="wrap"
      style={{ width: "100%" }}
    >
      <Group
        gap="sm"
        align="center"
        wrap="wrap"
        style={{ flex: "1 1 280px", minWidth: 0 }}
      >
        {showSearch && onSearchChange ? (
          <TextInput
            placeholder={searchPlaceholder}
            value={search}
            onChange={(e) => onSearchChange(e.currentTarget.value)}
            leftSection={<Search size={16} />}
            size="sm"
            radius="lg"
            style={{ flex: "1 1 200px", minWidth: 180, maxWidth: 360 }}
            styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
          />
        ) : null}
        {filters ? (
          <Group gap="sm" align="center" wrap="nowrap" style={{ flexShrink: 0 }}>
            {filters}
          </Group>
        ) : null}
      </Group>

      <Group gap="sm" align="center" wrap="nowrap" style={{ flexShrink: 0 }}>
        <SegmentedControl
          value={viewMode}
          onChange={(value) => onViewModeChange(value as FleetViewMode)}
          size="sm"
          radius="lg"
          color="green"
          data={[
            {
              value: "table",
              label: (
                <Group gap={6} justify="center" wrap="nowrap">
                  <Table2 size={14} />
                  <span>Table</span>
                </Group>
              ),
            },
            {
              value: "cards",
              label: (
                <Group gap={6} justify="center" wrap="nowrap">
                  <LayoutGrid size={14} />
                  <span>Cards</span>
                </Group>
              ),
            },
          ]}
          styles={{
            root: { background: "var(--mantine-color-gray-1)" },
          }}
        />
        {onAdd ? (
          <Button
            color="green"
            radius="lg"
            size="sm"
            fw={600}
            leftSection={<Plus size={16} />}
            onClick={onAdd}
            style={{ whiteSpace: "nowrap" }}
          >
            {addLabel}
          </Button>
        ) : null}
      </Group>
    </Group>
  </Box>
);

export default FleetToolbar;