"use client";

import { useMemo, useState } from "react";
import { IconSelect } from "@/components/icon-select";
import { CategoryCreateModal } from "@/features/categories/components/category-create-modal";
import { categoriesDict } from "@/features/categories/dict";
import {
  useCategories,
  useCreateUserCategoryMutation,
} from "@/features/categories/hooks/use-categories";
import {
  categoriesToIconSelectOptions,
  decodeCategoryOptionValue,
  encodeCategoryOptionValue,
} from "@/features/categories/utils/category-helpers";
import type { CategoryDomain, CategorySelection } from "@/types/category";

type CategoryPickerProps = {
  domain: CategoryDomain;
  value: CategorySelection | null;
  onChange: (value: CategorySelection | null) => void;
  id?: string;
  label?: string;
};

export function CategoryPicker({
  domain,
  value,
  onChange,
  id = "category-picker",
  label = categoriesDict.label,
}: CategoryPickerProps) {
  const { data: categories = [], isLoading } = useCategories(domain);
  const createCategoryMutation = useCreateUserCategoryMutation(domain);
  const [createModalOpen, setCreateModalOpen] = useState(false);

  const selectValue = value ? encodeCategoryOptionValue(value) : "";

  const options = useMemo(
    () =>
      categoriesToIconSelectOptions(
        categories,
        categoriesDict.personalCategorySuffix,
      ),
    [categories],
  );

  const handleSelectChange = (nextValue: string) => {
    onChange(decodeCategoryOptionValue(nextValue));
  };

  return (
    <div className="space-y-2">
      <label htmlFor={id} className="text-sm font-medium">
        {label}
      </label>

      <IconSelect
        id={id}
        value={selectValue}
        options={[
          { value: "", label: categoriesDict.none },
          ...options,
        ]}
        placeholder={categoriesDict.none}
        disabled={isLoading || createCategoryMutation.isPending}
        onChange={handleSelectChange}
      />

      <button
        type="button"
        onClick={() => setCreateModalOpen(true)}
        className="text-sm font-medium text-primary transition-colors hover:underline"
      >
        {categoriesDict.addCategory}
      </button>

      <CategoryCreateModal
        open={createModalOpen}
        isSubmitting={createCategoryMutation.isPending}
        onClose={() => setCreateModalOpen(false)}
        onSubmit={({ label: categoryLabel, details }) => {
          createCategoryMutation.mutate(
            { domain, label: categoryLabel, details },
            {
              onSuccess: (created) => {
                onChange({
                  categoryId: created.id,
                  categorySource: "USER",
                });
                setCreateModalOpen(false);
              },
            },
          );
        }}
      />
    </div>
  );
}