import { Menu, Transition } from "@headlessui/react";
import { Fragment } from "react";
import { Button } from "@/app/shadcn_components/ui/button";
import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
// import { Float } from "@headlessui-float/react";

export type Option = { label: string; value: string; disabled?: boolean };

// Extend ScenarioOption to include extra metadata
export type ScenarioOption = {
  label: string; // scenario name
  value: string; // scenario value
  housingType?: string; // existing scenario housing type
  goal?: string; // existing scenario goal
  goalValue?: string; // existing scenario goal value
};

interface ScenarioSelectProps {
  selectedValue: string | null;
  onSelect: (option: ScenarioOption) => void;
  scenarios: ScenarioOption[];
}

interface SelectDropdownProps {
  options: Option[];
  selectedOption: string;
  onSelectOption: (opt: Option) => void;
}

export function SelectScenarioDropdown({
  selectedValue,
  onSelect,
  scenarios,
}: ScenarioSelectProps) {
  const newOption: ScenarioOption = {
    label: "New scenario",
    value: "__new__",
  };
  const options = [newOption, ...scenarios];

  const selectedLabel =
    options.find((o) => o.value === selectedValue)?.label || "Choose scenario";

  return (
    <Menu as="div" className="relative w-full text-left">
      <Menu.Button
        as={Button}
        variant="default"
        className="w-full justify-start bg-brandblue text-white rounded-lg shadow-sm hover:bg-brandblue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brandmidblue"
      >
        {selectedValue === newOption.value && (
          <PlusIcon className="mr-2 h-5 w-5 text-white" aria-hidden="true" />
        )}
        <span className="flex-1 text-left">{selectedLabel}</span>
        <ChevronDownIcon
          className="ml-2 h-5 w-5 text-white"
          aria-hidden="true"
        />
      </Menu.Button>

      <Transition
        as={Fragment}
        enter="transition ease-out duration-150"
        enterFrom="opacity-0 scale-95"
        enterTo="opacity-100 scale-100"
        leave="transition ease-in duration-100"
        leaveFrom="opacity-100 scale-100"
        leaveTo="opacity-0 scale-95"
      >
        <Menu.Items className="absolute mt-2 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 py-1 overflow-auto max-h-60 scroll-py-1">
          {options.map((opt) => (
            <Menu.Item key={opt.value}>
              {({ active }) => (
                <button
                  type="button"
                  onClick={() => onSelect(opt)}
                  className={
                    `group w-full text-left px-4 py-3 text-sm transition-colors flex flex-col space-y-1 ` +
                    (active ? "bg-brandmidblue text-white" : "text-gray-800")
                  }
                >
                  {/* If new scenario, show plus icon and label only */}
                  {opt.value === newOption.value ? (
                    <div className="flex items-center">
                      <PlusIcon
                        className={`mr-2 h-5 w-5 ${
                          active ? "text-white" : "text-brandmidblue"
                        }`}
                        aria-hidden="true"
                      />
                      <span>{opt.label}</span>
                    </div>
                  ) : (
                    /* Existing scenario: show two rows side-by-side pairs */
                    <>
                      <div className="flex justify-between w-full">
                        <span className="font-medium">{opt.label}</span>
                        <span className="italic">{opt.housingType}</span>
                      </div>
                      <div className="flex justify-between w-full text-sm">
                        <span>{opt.goal}</span>
                        <span>{opt.goalValue}</span>
                      </div>
                    </>
                  )}
                </button>
              )}
            </Menu.Item>
          ))}
        </Menu.Items>
      </Transition>
    </Menu>
  );
}

export function SelectDropdown({
  options,
  selectedOption,
  onSelectOption,
}: {
  options: Option[];
  selectedOption: string;
  onSelectOption: (opt: Option) => void;
}) {
  const label =
    options.find((o) => o.value === selectedOption)?.label || "Select…";

  return (
    <Menu as="div" className="relative w-full text-left">
      <Menu.Button
        as={Button}
        variant="outline"
        className="w-full flex items-center justify-between gap-2 rounded-lg border border-brandbrown bg-white px-4 py-2 text-sm text-gray-700 shadow-sm hover:border-brandbrown focus:outline-none focus:ring-2 focus:ring-brandbrown"
      >
        <span className="truncate flex-1 text-left">{label}</span>
        <ChevronDownIcon className="h-5 w-5 text-gray-500" />
      </Menu.Button>

      <Transition
        as={Fragment}
        enter="transition ease-out duration-150"
        enterFrom="opacity-0 scale-95"
        enterTo="opacity-100 scale-100"
        leave="transition ease-in duration-100"
        leaveFrom="opacity-100 scale-100"
        leaveTo="opacity-0 scale-95"
      >
        <Menu.Items className="absolute z-10 mt-2 w-full rounded-lg border border-brandbrown bg-white shadow-xl focus:outline-none">
          {options.map((opt) => (
            <Menu.Item key={opt.value} disabled={opt.disabled}>
              {({ active, disabled }) => (
                <button
                  type="button"
                  onClick={() => onSelectOption(opt)}
                  disabled={disabled}
                  className={`w-full px-4 py-2 text-sm text-left transition-colors ${
                    disabled
                      ? "cursor-not-allowed text-gray-400"
                      : active
                        ? "bg-brandbrown text-white"
                        : "text-gray-700 hover:bg-gray-50"
                  }`}
                >
                  {opt.label}
                </button>
              )}
            </Menu.Item>
          ))}
        </Menu.Items>
      </Transition>
    </Menu>
  );
}
