import React, { useRef } from "react";
import { Button, Stack, Flex, Field, NativeSelect, Input, HoverCard, Text, NumberInput, Box } from "@chakra-ui/react";
import { Plus, CircleMinus, Files, ClipboardPaste, Trash } from 'lucide-react';
// import { GrAdd, GrSubtractCircle } from "react-icons/gr";
// import { FaCopy, FaPaste, FaTrash } from "react-icons/fa";

// ============================================================================
// 1. FILTER ROW (The individual criteria inputs)
// ============================================================================
const FilterRow = React.memo(({ filter, columns, setUrl, bundleId, copiedFilter }) => {
  const types = {
    AutoField: ["=", "<", ">", "<=", ">="],
    IntegerField: ["=", "<", ">", "<=", ">="],
    CharField: ["=", "contains"],
    DateTimeField: ["range"],
  };

  const columnType = columns[filter.column];
  const operators = types[columnType] || ["="]; // default to equals if unknown

  const handleRemoveFilter = () => {
    setUrl(prev => ({
      ...prev,
      bundles: prev.bundles.map((bundle) =>
        bundle.id === bundleId ?
          { ...bundle, filters: bundle.filters.filter((fil) => fil.id !== filter.id) }
          : bundle
      ),
    }));
  };

  const updateFilterField = (field, value) => {
    setUrl(prev => ({
      ...prev,
      bundles: prev.bundles.map(bundle =>
        bundle.id === bundleId
          ? {
            ...bundle,
            filters: bundle.filters.map(fil =>
              fil.id === filter.id ? { ...fil, [field]: value } : fil
            ),
          }
          : bundle
      ),
    }));
  };

  const handleColumnChange = (newCol) => {
    setUrl((prev) => ({
      ...prev,
      bundles: prev.bundles.map((bundle) =>
        bundle.id === bundleId
          ? {
            ...bundle,
            filters: bundle.filters.map((fil) =>
              fil.id === filter.id
                ? { ...fil, column: newCol, type: columns[newCol], operator: null, value: null }
                : fil
            ),
          }
          : bundle
      ),
    }));
  };

  const handleDateChange = (type, newDate) => {
    const currentValue = filter.value || { start: null, end: null };
    const updatedValue = { ...currentValue, [type]: newDate || null };
    updateFilterField("value", updatedValue);
    updateFilterField("operator", "range");
  };

  return (
    <Flex gap="2" align="center">
      {/* Remove button */}
      <HoverCard.Root positioning={{ placement: "top" }}>
        <HoverCard.Trigger asChild>
          <Button onClick={handleRemoveFilter} variant="ghost" size="sm" color="red.400">
            <CircleMinus />
          </Button>
        </HoverCard.Trigger>
        <HoverCard.Positioner>
          <HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Remove Filter</Text></HoverCard.Content>
        </HoverCard.Positioner>
      </HoverCard.Root>

      {/* Copy / Paste Buttons */}
      <HoverCard.Root positioning={{ placement: "top" }}>
        <HoverCard.Trigger asChild>
          <Button onClick={() => (copiedFilter.current = { ...filter })} variant="ghost" size="sm" color="text">
            <Files />
          </Button>
        </HoverCard.Trigger>
        <HoverCard.Positioner>
          <HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Copy Filter</Text></HoverCard.Content>
        </HoverCard.Positioner>
      </HoverCard.Root>

      <HoverCard.Root positioning={{ placement: "top" }}>
        <HoverCard.Trigger asChild>
          <Button
            onClick={() => {
              if (copiedFilter.current) {
                setUrl((prev) => ({
                  ...prev,
                  bundles: prev.bundles.map((bundle) =>
                    bundle.id === bundleId
                      ? {
                        ...bundle,
                        filters: bundle.filters.map((fil) =>
                          fil.id === filter.id ? { ...copiedFilter.current, id: filter.id } : fil
                        ),
                      }
                      : bundle
                  ),
                }));
              }
            }}
            variant="ghost"
            size="sm"
            color="text"
          >
            <ClipboardPaste />
          </Button>
        </HoverCard.Trigger>
        <HoverCard.Positioner>
          <HoverCard.Content p="2" bg="widgetItemExpandedBg"><Text fontSize="sm">Paste Filter</Text></HoverCard.Content>
        </HoverCard.Positioner>
      </HoverCard.Root>

      {/* Column selector */}
      <Field.Root w={columnType === "DateTimeField" ? "30%" : "30%"}>
        <NativeSelect.Root>
          <NativeSelect.Field
            bg="widgetItemBg"
            color="text"
            value={filter.column ?? ""}
            onChange={(e) => handleColumnChange(e.target.value)}
          >
            <option value="" disabled hidden>Select Column</option>
            {Object.keys(columns).map((colName) => (
              <option key={colName} value={colName}>{colName}</option>
            ))}
          </NativeSelect.Field>
          <NativeSelect.Indicator />
        </NativeSelect.Root>
      </Field.Root>

      {/* Operator selector */}
      <Field.Root w={columnType === "DateTimeField" ? "20%" : "20%"}>
        {columnType === "DateTimeField" ? (
          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.start || ""} onChange={(e) => handleDateChange("start", e.target.value)} />
        ) : (
          <NativeSelect.Root>
            <NativeSelect.Field bg="widgetItemBg" color="text" value={filter.operator ?? ""} onChange={(e) => updateFilterField("operator", e.target.value)}>
              <option value="" disabled hidden>Operator</option>
              {filter.type && operators.map((op) => <option key={op} value={op}>{op}</option>)}
            </NativeSelect.Field>
            <NativeSelect.Indicator />
          </NativeSelect.Root>
        )}
      </Field.Root>

      {/* Value input */}
      <Field.Root w={columnType === "DateTimeField" ? "20%" : "50%"}>
        {columnType === "DateTimeField" ? (
          <Input type="date" bg="widgetItemBg" color="text" value={filter.value?.end || ""} onChange={(e) => handleDateChange("end", e.target.value)} />
        ) : columnType === "IntegerField" || columnType === "AutoField" ? (
          <NumberInput.Root value={filter.value ?? ""} onValueChange={(e) => updateFilterField("value", e.value)}>
            <NumberInput.Input placeholder="Value" bg="widgetItemBg" color="text" />
          </NumberInput.Root>
        ) : (
          <Input placeholder="Value" bg="widgetItemBg" color="text" value={filter.value ?? ""} onChange={(e) => updateFilterField("value", e.target.value)} />
        )}
      </Field.Root>
    </Flex>
  );
});

// ============================================================================
// 2. FILTER BUNDLES (The AND logic groups)
// ============================================================================
const FilterBundle = ({ bundle, columns, url, setUrl, copiedFilter }) => {
  const handleRemoveBundle = () => {
    setUrl(prev => ({
      ...prev,
      bundles: prev.bundles.filter(b => b.id !== bundle.id)
    }));
  };

  const handleAddFilter = () => {
    setUrl(prev => ({
      ...prev,
      bundles: prev.bundles.map(b =>
        b.id === bundle.id ? ({
          ...b,
          filters: [
            ...b.filters,
            {
              id: crypto.randomUUID(),
              column: null,
              type: null,
              operator: null,
              value: null
            }
          ]
        }) : (b)
      ),
    }));
  };

  return (
    <Stack bg="widgetItemBg" borderWidth="1px" borderColor="widgetBadgeBg" borderRadius="lg" p="3" spacing="3">
      <Flex justify="space-between" align="center">
        <Input placeholder="Group Name (Optional)" maxW="200px" size="sm" variant="flushed" color="text" />
        <Button onClick={handleRemoveBundle} variant="ghost" size="sm" color="red.400">
          <Trash />
        </Button>
      </Flex>

      <Stack spacing="2">
        {bundle.filters.map((filter) => (
          <FilterRow key={filter.id} filter={filter} columns={columns} setUrl={setUrl} bundleId={bundle.id} copiedFilter={copiedFilter} />
        ))}
        <Button onClick={handleAddFilter} variant="outline" size="sm" color="text" borderColor="widgetBadgeBg" _hover={{ bg: "widgetBadgeBg" }}>
          Add Filter <Plus />
        </Button>
      </Stack>
    </Stack>
  );
};

// ============================================================================
// 3. MAIN QUERY BUILDER (The Engine Wrapper)
// ============================================================================
export default function QueryBuilder({ url, setUrl, allColumns, getColumns, pullTable, isLoading, isReadyRef }) {
  const copiedFilter = useRef(null);

  const handleAddBundle = () => {
    setUrl(prev => ({
      ...prev,
      bundles: [
        ...prev.bundles,
        {
          id: crypto.randomUUID(),
          filters: [{
            id: crypto.randomUUID(),
            column: null,
            type: null,
            operator: null,
            value: null
          }],
        },
      ],
    }));
  };

  return (
    <Flex direction="column" gap="4" w="100%" p="4" bg="transparent">
      {/* Top Controls: Source & Execute */}
      <Flex gap="4" align="flex-end">
        <Field.Root maxW="300px">
          <Field.Label color="text">Data Source</Field.Label>
          <NativeSelect.Root>
            <NativeSelect.Field
              bg="widgetItemBg"
              color="text"
              value={url.source || ""}
              onChange={(e) => {
                const selectedView = e.target.value;
                setUrl(prev => ({ ...prev, source: selectedView }));
                // 🚨 FIXED: Now uses relative pathing for the production API
                const endpoint = "/api/v2/view_dash_event_search_columns";
                getColumns(endpoint);
              }}
            >
              <option value="" disabled hidden>Select View</option>
              <option value="main">Main View</option>
              <option value="test">Test View</option>
            </NativeSelect.Field>
            <NativeSelect.Indicator />
          </NativeSelect.Root>
        </Field.Root>

        <Button
          bg="blue.600"
          color="white"
          _hover={{ bg: "blue.500" }}
          loading={isLoading}
          onClick={() => {
            isReadyRef.current = true;
            pullTable();
          }}
        >
          Execute Search
        </Button>
      </Flex>

      {/* Filter Builder Engine */}
      {url.source && allColumns?.types && (
        <Stack w="100%" gap="4">
          <Text fontSize="lg" fontWeight="bold" color="text">Filters</Text>

          <Box w="100%" maxH="400px" overflow="auto">
            <Stack w="100%" gap="4" pr="4">
              {url.bundles.map((bundle) => (
                <FilterBundle key={bundle.id} bundle={bundle} columns={allColumns.types} url={url} setUrl={setUrl} copiedFilter={copiedFilter} />
              ))}
              <Button onClick={handleAddBundle} variant="outline" borderColor="widgetBadgeBg" color="text" _hover={{ bg: "widgetBadgeBg" }}>
                New Filter Group <Plus />
              </Button>
            </Stack>
          </Box>
        </Stack>
      )}
    </Flex>
  );
}