import React from "react";
import SeaQaFilterDropdown from "./SeaQaFilterDropdown";
import { ICategory } from "@/api/types/common";

interface SeaQaFiltersProps {
  topics: ICategory[];
  selectedTypes: string[];
  onToggleType: (type: string) => void;
  selectedTopics: number[];
  onToggleTopic: (id: number) => void;
  onReset: () => void;
}

const SeaQaFilters: React.FC<SeaQaFiltersProps> = ({
  topics,
  selectedTypes,
  onToggleType,
  selectedTopics,
  onToggleTopic,
  onReset,
}) => {
  const typeOptions = ["Answered", "Unanswered"];

  const topicGroups = topics.map((parent) => ({
    name: parent.name,
    options: parent.childCategories.map((c) => c.name),
  }));

  const allChildren = topics.flatMap((p) => p.childCategories);

  return (
    <div className="bg-brand-blue-primary py-6 px-4">
      <div className="max-w-[1440px] px-4 md:px-[118px] mx-auto flex flex-wrap gap-8 justify-center items-center">
        <SeaQaFilterDropdown
          label="Filter by type"
          placeholder="Type"
          options={typeOptions}
          selected={selectedTypes}
          onToggle={onToggleType}
          width="162px"
        />

        {/* Topic filter — groups child categories under their parent name */}
        <SeaQaFilterDropdown
          label="Filter by topic"
          placeholder="Topic"
          groups={topicGroups}
          selected={allChildren
            .filter((c) => selectedTopics.includes(c.id))
            .map((c) => c.name)}
          onToggle={(name) => {
            const topic = allChildren.find((c) => c.name === name);
            if (topic) onToggleTopic(topic.id);
          }}
          width="240px"
        />

        <button
          type="button"
          onClick={onReset}
          disabled={selectedTypes.length === 0 && selectedTopics.length === 0}
          className="self-end h-[38px] px-5 rounded-lg bg-white/90 text-sm font-semibold text-gray-600 shadow-sm hover:bg-white hover:text-gray-900 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-all"
        >
          Reset
        </button>
      </div>
    </div>
  );
};

export default SeaQaFilters;