import { useMemo, useState, ReactNode } from "react";
import { View, useWindowDimensions } from "react-native";
import { Divider, Menu, Text } from "react-native-paper";

import { CombinedFilterAnchor } from "@/components/shared/filters/CombinedFilterAnchor";
import { CombinedFilterResetButton } from "@/components/shared/filters/CombinedFilterResetButton";

type CombinedFilterOption = {
  value: string;
  label: string;
  icon?: ReactNode;
};

export type CombinedFilterSection = {
  key: string;
  title: string;
  options: CombinedFilterOption[];
  selected: string[];
  onChange: (values: string[]) => void;
};

interface CombinedFilterMenuProps {
  sections: CombinedFilterSection[];
  onResetAll?: () => void;
  showResetButton?: boolean;
}

export const CombinedFilterMenu = ({
  sections,
  onResetAll,
  showResetButton = false,
}: CombinedFilterMenuProps) => {
  const [visible, setVisible] = useState(false);
  const { width } = useWindowDimensions();

  const totalSelected = useMemo(
    () => sections.reduce((sum, s) => sum + (s.selected?.length || 0), 0),
    [sections]
  );

  // Determine if mobile or desktop
  const isMobile = width < 768;

  const toggle = (sectionKey: string, value: string) => {
    const section = sections.find((s) => s.key === sectionKey);
    if (!section) return;
    const set = new Set(section.selected);
    if (set.has(value)) {
      set.delete(value);
    } else {
      set.add(value);
    }
    section.onChange(Array.from(set));
  };

  const clearAll = () => {
    sections.forEach((s) => s.onChange([]));
    if (onResetAll) onResetAll();
  };

  const columnSections = useMemo(() => {
    if (isMobile) {
      return [sections];
    }

    return sections.map((section) => [section]);
  }, [sections, isMobile]);

  const renderSection = (
    section: CombinedFilterSection
  ) => (
    <View key={section.key} className="mb-2">
      <Menu.Item
        title={<Text style={{ fontWeight: "bold" }}>{section.title}</Text>}
        disabled
      />
      {section.options.map((opt) => {
        const isSelected = section.selected.includes(opt.value);
        return (
          <Menu.Item
            key={`${section.key}-${opt.value}`}
            onPress={() => toggle(section.key, opt.value)}
            leadingIcon={
              isSelected ? "checkbox-marked" : "checkbox-blank-outline"
            }
            title={
              <View className="flex-row items-center">
                {opt.icon ? <View className="mr-2">{opt.icon}</View> : null}
                <Text>{opt.label}</Text>
              </View>
            }
          />
        );
      })}
    </View>
  );

  return (
    <View className="flex-row items-center">
      <Menu
        visible={visible}
        onDismiss={() => setVisible(false)}
        anchor={<CombinedFilterAnchor setVisible={setVisible} />}
        contentStyle={{
          minWidth: isMobile
            ? width - 32
            : Math.min(sections.length * 250, 800),
          maxWidth: isMobile ? width - 32 : undefined,
        }}
      >
        <View
          className="flex-row"
          style={{ flexWrap: isMobile ? "nowrap" : "wrap" }}
        >
          {columnSections.map((columnSects, colIndex) => (
            <View
              key={`column-${colIndex}`}
              style={{
                flex: 1,
                minWidth: isMobile ? undefined : 200,
                paddingRight: colIndex < columnSections.length - 1 ? 8 : 0,
              }}
            >
              {columnSects.map((section) => renderSection(section))}
            </View>
          ))}
        </View>
        <Divider />
        <Menu.Item
          onPress={clearAll}
          leadingIcon="close-circle-outline"
          disabled={totalSelected <= 1}
          title="Clear all"
        />
        <Menu.Item
          onPress={() => setVisible(false)}
          leadingIcon="check"
          title="Done"
        />
      </Menu>
      <CombinedFilterResetButton
        showResetButton={showResetButton}
        totalSelected={totalSelected}
        clearAll={clearAll}
      />
    </View>
  );
};
