"use client";

import { Accordion, Checkbox, CheckboxGroup } from "@heroui/react";
import type { ShopFilterState } from "@/lib/shop/filterState";

export type ShopFilterOptions = {
  brands: string[];
  tags: string[];
  attributes: {
    petSize: string[];
    ageRange: string[];
    specialDiet: string[];
    material: string[];
    flavor: string[];
  };
};

type ShopFilterContentProps = {
  options: ShopFilterOptions | null | undefined;
  value: ShopFilterState;
  onChange: (state: ShopFilterState) => void;
  isLoading?: boolean;
};

export function ShopFilterContent({
  options,
  value,
  onChange,
  isLoading,
}: ShopFilterContentProps) {
  if (isLoading) {
    return (
      <div className="text-sm text-[var(--muted)] animate-pulse">
        Loading filters…
      </div>
    );
  }

  if (!options) {
    return null;
  }

  const updateState = (patch: Partial<ShopFilterState>) => {
    onChange({
      ...value,
      ...patch,
      attributes: { ...value.attributes, ...(patch.attributes ?? {}) },
    });
  };

  const setSingle = (
    key: "brand" | "material" | "flavor",
    item: string | undefined,
  ) => {
    if (key === "brand") {
      updateState({ brand: value.brand === item ? undefined : item });
    } else {
      updateState({
        attributes: {
          ...value.attributes,
          [key]: value.attributes[key] === item ? undefined : item ?? undefined,
        },
      });
    }
  };

  const hasAnyOptions =
    options.brands.length > 0 ||
    options.tags.length > 0 ||
    options.attributes.petSize.length > 0 ||
    options.attributes.ageRange.length > 0 ||
    options.attributes.specialDiet.length > 0 ||
    options.attributes.material.length > 0 ||
    options.attributes.flavor.length > 0;

  if (!hasAnyOptions) {
    return (
      <p className="text-sm text-[var(--muted)]">No filters available.</p>
    );
  }

  return (
    <Accordion
      allowsMultipleExpanded
      defaultExpandedKeys={['brand']}
      className="w-full"
      hideSeparator={false}
    >
      {options.brands.length > 0 && (
        <Accordion.Item id="brand">
          <Accordion.Heading>
            <Accordion.Trigger className="text-sm font-medium text-[var(--foreground)]">
              Brand
              <Accordion.Indicator />
            </Accordion.Trigger>
          </Accordion.Heading>
          <Accordion.Panel>
            <Accordion.Body className="pb-2 h-[200px] overflow-y-auto scrollbar-hide">
              <CheckboxGroup
                value={value.brand ? [value.brand] : []}
                onChange={(vals) =>
                  setSingle("brand", vals.length ? vals[vals.length - 1] : undefined)
                }
                className="gap-2 flex flex-col"
                variant="secondary"
              >
                {options.brands.map((b) => (
                  <Checkbox key={b} value={b} className="w-full">
                  <Checkbox.Control>
                    <Checkbox.Indicator />
                  </Checkbox.Control>
                  <Checkbox.Content>{b}</Checkbox.Content>
                </Checkbox>
                ))}
              </CheckboxGroup>
            </Accordion.Body>
          </Accordion.Panel>
        </Accordion.Item>
      )}

      {options.tags.length > 0 && (
        <Accordion.Item id="tags">
          <Accordion.Heading>
            <Accordion.Trigger className="text-sm font-medium text-[var(--foreground)]">
              Tags
              <Accordion.Indicator />
            </Accordion.Trigger>
          </Accordion.Heading>
          <Accordion.Panel>
            <Accordion.Body className="pb-2 h-[200px] overflow-y-auto scrollbar-hide">
              <CheckboxGroup
                value={value.tags}
                onChange={(vals) => updateState({ tags: vals })}
                className="gap-2 flex flex-col"
                variant="secondary"
              >
                {options.tags.map((t) => (
                  <Checkbox key={t} value={t} className="w-full">
                  <Checkbox.Control>
                    <Checkbox.Indicator />
                  </Checkbox.Control>
                  <Checkbox.Content>{t}</Checkbox.Content>
                </Checkbox>
                ))}
              </CheckboxGroup>
            </Accordion.Body>
          </Accordion.Panel>
        </Accordion.Item>
      )}

      {options.attributes.petSize.length > 0 && (
        <Accordion.Item id="petSize">
          <Accordion.Heading>
            <Accordion.Trigger className="text-sm font-medium text-[var(--foreground)]">
              Pet size
              <Accordion.Indicator />
            </Accordion.Trigger>
          </Accordion.Heading>
          <Accordion.Panel>
            <Accordion.Body className="pb-2 h-[200px] overflow-y-auto scrollbar-hide">
              <CheckboxGroup
                value={value.attributes.petSize}
                onChange={(vals) =>
                  updateState({ attributes: { ...value.attributes, petSize: vals } })
                }
                className="gap-2 flex flex-col"
                variant="secondary"
              >
                {options.attributes.petSize.map((v) => (
                  <Checkbox key={v} value={v} className="w-full">
                  <Checkbox.Control>
                    <Checkbox.Indicator />
                  </Checkbox.Control>
                  <Checkbox.Content>{v}</Checkbox.Content>
                </Checkbox>
                ))}
              </CheckboxGroup>
            </Accordion.Body>
          </Accordion.Panel>
        </Accordion.Item>
      )}

      {options.attributes.ageRange.length > 0 && (
        <Accordion.Item id="ageRange">
          <Accordion.Heading>
            <Accordion.Trigger className="text-sm font-medium text-[var(--foreground)]">
              Age range
              <Accordion.Indicator />
            </Accordion.Trigger>
          </Accordion.Heading>
          <Accordion.Panel>
            <Accordion.Body className="pb-2 h-[200px] overflow-y-auto scrollbar-hide">
              <CheckboxGroup
                value={value.attributes.ageRange}
                onChange={(vals) =>
                  updateState({
                    attributes: { ...value.attributes, ageRange: vals },
                  })
                }
                className="gap-2 flex flex-col"
                variant="secondary"
              >
                {options.attributes.ageRange.map((v) => (
                  <Checkbox key={v} value={v} className="w-full">
                  <Checkbox.Control>
                    <Checkbox.Indicator />
                  </Checkbox.Control>
                  <Checkbox.Content>{v}</Checkbox.Content>
                </Checkbox>
                ))}
              </CheckboxGroup>
            </Accordion.Body>
          </Accordion.Panel>
        </Accordion.Item>
      )}

      {options.attributes.specialDiet.length > 0 && (
        <Accordion.Item id="specialDiet">
          <Accordion.Heading>
            <Accordion.Trigger className="text-sm font-medium text-[var(--foreground)]">
              Special diet
              <Accordion.Indicator />
            </Accordion.Trigger>
          </Accordion.Heading>
          <Accordion.Panel>
            <Accordion.Body className="pb-2 h-[200px] overflow-y-auto scrollbar-hide">
              <CheckboxGroup
                value={value.attributes.specialDiet}
                onChange={(vals) =>
                  updateState({
                    attributes: { ...value.attributes, specialDiet: vals },
                  })
                }
                className="gap-2 flex flex-col"
                variant="secondary"
              >
                {options.attributes.specialDiet.map((v) => (
                  <Checkbox key={v} value={v} className="w-full">
                  <Checkbox.Control>
                    <Checkbox.Indicator />
                  </Checkbox.Control>
                  <Checkbox.Content>{v}</Checkbox.Content>
                </Checkbox>
                ))}
              </CheckboxGroup>
            </Accordion.Body>
          </Accordion.Panel>
        </Accordion.Item>
      )}

      {options.attributes.material.length > 0 && (
        <Accordion.Item id="material">
          <Accordion.Heading>
            <Accordion.Trigger className="text-sm font-medium text-[var(--foreground)]">
              Material
              <Accordion.Indicator />
            </Accordion.Trigger>
          </Accordion.Heading>
          <Accordion.Panel>
            <Accordion.Body className="pb-2 h-[200px] overflow-y-auto scrollbar-hide">
              <CheckboxGroup
                value={
                  value.attributes.material ? [value.attributes.material] : []
                }
                onChange={(vals) => setSingle("material", vals[0])}
                className="gap-2 flex flex-col"
                variant="secondary"
              >
                {options.attributes.material.map((v) => (
                  <Checkbox key={v} value={v} className="w-full">
                  <Checkbox.Control>
                    <Checkbox.Indicator />
                  </Checkbox.Control>
                  <Checkbox.Content>{v}</Checkbox.Content>
                </Checkbox>
                ))}
              </CheckboxGroup>
            </Accordion.Body>
          </Accordion.Panel>
        </Accordion.Item>
      )}

      {options.attributes.flavor.length > 0 && (
        <Accordion.Item id="flavor">
          <Accordion.Heading>
            <Accordion.Trigger className="text-sm font-medium text-[var(--foreground)]">
              Flavor
              <Accordion.Indicator />
            </Accordion.Trigger>
          </Accordion.Heading>
          <Accordion.Panel>
            <Accordion.Body className="pb-2 h-[200px] overflow-y-auto scrollbar-hide">
              <CheckboxGroup
                value={
                  value.attributes.flavor ? [value.attributes.flavor] : []
                }
                onChange={(vals) => setSingle("flavor", vals[0])}
                className="gap-2 flex flex-col"
                variant="secondary"
              >
                {options.attributes.flavor.map((v) => (
                  <Checkbox key={v} value={v} className="w-full">
                  <Checkbox.Control>
                    <Checkbox.Indicator />
                  </Checkbox.Control>
                  <Checkbox.Content>{v}</Checkbox.Content>
                </Checkbox>
                ))}
              </CheckboxGroup>
            </Accordion.Body>
          </Accordion.Panel>
        </Accordion.Item>
      )}
    </Accordion>
  );
}
