import { useRef, useState } from "react";
import { useDetailsBackLayer } from "../../app/useBackLayer.js";
import { useI18n } from "../../shared/I18nProvider.jsx";
import { useOutsideDismiss } from "../../shared/hooks/useOutsideDismiss.js";
import { closeComposerModelMenu, effectiveEffort, modelButtonLabel, reasoningEffortOptions, selectedOrDefaultModel } from "./composer-menus.js";
import { CheckIcon, CloseIcon } from "../../shared/ActionIcons.jsx";

export function ComposerModelMenu({ models, options, disabled, onOption, onModelChange }) {
  const { t } = useI18n();
  const menuRef = useRef(null);
  const [modelPickerOpen, setModelPickerOpen] = useState(false);
  useDetailsBackLayer(menuRef, "model-menu");
  const selectedModel = selectedOrDefaultModel(models, options.model);
  const selectedEffort = effectiveEffort(selectedModel, options.effort);
  const effortOptions = reasoningEffortOptions(selectedModel, t);
  const closeMenu = () => { closeComposerModelMenu(menuRef.current); setModelPickerOpen(false); };
  useOutsideDismiss(menuRef, closeMenu);
  const selectEffort = (effort) => { onOption("effort", effort); closeMenu(); };
  const selectModel = (model) => {
    const nextModel = models.find((item) => item.model === model || item.id === model);
    if (selectedModel?.model !== nextModel?.model) onModelChange?.(selectedModel, nextModel);
    onOption("model", model);
    onOption("effort", "");
    closeMenu();
  };

  return <details className="composer-menu composer-model-menu" ref={menuRef}>
    <summary className="composer-pill" aria-label={t("composer.modelAndEffort")}><span>{modelButtonLabel(models, options, t)}</span></summary>
    <div className="composer-popover model-popover compact-menu">
      <div className="popover-title">{t("composer.reasoningEffort")}</div>
      {effortOptions.map((effort) => <button type="button" className={selectedEffort === effort.id ? "menu-option selected" : "menu-option"} key={effort.id} disabled={disabled} title={effort.description || undefined} onClick={() => selectEffort(effort.id)}>
        <span>{effort.label}</span>{selectedEffort === effort.id && <CheckIcon />}
      </button>)}
      <div className="menu-divider" />
      <button type="button" className="menu-option model-picker-trigger" disabled={disabled} onClick={() => setModelPickerOpen(true)}>
        <span>{t("composer.model")}<small>{selectedModel?.displayName || selectedModel?.model || t("composer.defaultModel")}</small></span>
      </button>
    </div>
    {modelPickerOpen && <div className="composer-popover model-picker-popover compact-menu" role="dialog" aria-label={t("composer.modelPickerTitle")}>
      <div className="model-picker-heading"><div className="popover-title">{t("composer.modelPickerTitle")}</div><button type="button" className="model-picker-dismiss" aria-label={t("composer.closeModelPicker")} onClick={() => setModelPickerOpen(false)}><CloseIcon /></button></div>
      <div className="model-options">
        {models.map((model) => <button type="button" className={selectedModel?.id === model.id ? "menu-option selected" : "menu-option"} key={model.id} disabled={disabled} onClick={() => selectModel(model.model)}>
          <span><strong>{model.displayName || model.model}</strong><small>{model.description}</small></span>{selectedModel?.id === model.id && <CheckIcon />}
        </button>)}
      </div>
    </div>}
  </details>;
}
