"use client";

import { useMemo } from "react";

import Box from "@mui/material/Box";

import {
  Dropdown,
  type DropdownOption,
} from "@/components/ui/dropdown";
import { useAppLanguage } from "@/components/providers/app-language-provider";
import {
  type MeetingSummaryFiltersValue,
  type MeetingSummaryRow,
  type MeetingSummaryStatus,
} from "@/features/pswg/meeting-summary/meeting-summary-data";
import {
  meetingSummaryText,
  normalizeMeetingSummaryLanguage,
  translateMeetingSummaryValue,
} from "@/features/pswg/meeting-summary/meeting-summary-i18n";

type MeetingSummaryFiltersProps = {
  filters: MeetingSummaryFiltersValue;
  onFiltersChange: (filters: MeetingSummaryFiltersValue) => void;
  rows: MeetingSummaryRow[];
};

function toSelectedValues(value: string | string[]) {
  return Array.isArray(value) ? value : [value];
}

// Status is a fixed set; year / issue-count options come from the loaded rows.
const STATUS_OPTIONS: MeetingSummaryStatus[] = [
  "DRAFT",
  "REVIEWED",
  "SUBMITTED",
  "COMPLETED",
];

export function MeetingSummaryFilters({
  filters,
  onFiltersChange,
  rows,
}: MeetingSummaryFiltersProps) {
  const { language } = useAppLanguage();
  const meetingSummaryLanguage = normalizeMeetingSummaryLanguage(language);
  const text = meetingSummaryText[meetingSummaryLanguage];

  const options = useMemo(() => {
    const statuses = STATUS_OPTIONS;
    const years = Array.from(
      new Set(
        rows.map((row) =>
          new Date(row.meetingDate).getFullYear().toString(),
        ),
      ),
    ).sort((first, second) => Number(second) - Number(first));
    const issueCounts = Array.from(
      new Set(rows.map((row) => row.issueCount)),
    ).sort((first, second) => first - second);

    return {
      statuses: statuses.map<DropdownOption>((status) => ({
        label: translateMeetingSummaryValue(status, meetingSummaryLanguage),
        value: status,
      })),
      years: years.map<DropdownOption>((year) => ({
        label: year,
        value: year,
      })),
      issueCounts: issueCounts.map<DropdownOption>((count) => {
        const label = `${count} ${count === 1 ? "issue" : "issues"}`;

        return {
          label: translateMeetingSummaryValue(label, meetingSummaryLanguage),
          value: String(count),
        };
      }),
    };
  }, [meetingSummaryLanguage, rows]);

  return (
    <Box
      sx={{
        mt: 3,
        display: "flex",
        flexWrap: "wrap",
        gap: 0.75,
      }}
    >
      <Dropdown
        displayMode="count"
        label={text.filters.status}
        multiple
        onChange={(value) =>
          onFiltersChange({
            ...filters,
            statuses: toSelectedValues(value) as MeetingSummaryStatus[],
          })
        }
        options={options.statuses}
        showCheckbox
        value={filters.statuses}
        width={153}
      />

      <Dropdown
        displayMode="count"
        label={text.filters.year}
        multiple
        onChange={(value) =>
          onFiltersChange({
            ...filters,
            years: toSelectedValues(value),
          })
        }
        options={options.years}
        showCheckbox
        value={filters.years}
        width={132}
      />

      <Dropdown
        displayMode="count"
        label={text.filters.issues}
        multiple
        onChange={(value) =>
          onFiltersChange({
            ...filters,
            issueCounts: toSelectedValues(value),
          })
        }
        options={options.issueCounts}
        showCheckbox
        value={filters.issueCounts}
        width={188}
      />
    </Box>
  );
}