import { Button } from "@repo/shadcn-ui/components/button";
import type { ReactNode } from "react";
import { useState } from "react";

import { EmptyState } from "./empty-state";
import type { PickerOption } from "./option-picker-dialog";
import { OptionPickerDialog } from "./option-picker-dialog";
import { SelectionSummaryCard } from "./selection-summary-card";

/** Selección visual con estado vacío, ficha y listado; no conoce consultas ni entidades. */
export function OptionSelectionField({
  title,
  description,
  icon,
  options,
  value,
  onChange,
  labels,
  locale,
  disabled = false,
  locked = false,
  loading = false,
  createAction,
  clearLabel,
}: {
  title: string;
  description: string;
  icon: ReactNode;
  options: readonly PickerOption[];
  value: string;
  onChange: (id: string) => void;
  labels: {
    select: string;
    change: string;
    selection: string;
    name: string;
    description: string;
    confirm: string;
    cancel: string;
    search: string;
  };
  locale: string;
  disabled?: boolean;
  locked?: boolean;
  loading?: boolean;
  createAction?: { label: string; onClick: () => void; disabled?: boolean } | undefined;
  clearLabel?: string | undefined;
}) {
  const [open, setOpen] = useState(false);
  const selected = options.find((option) => option.id === value);
  const actions = (
    <>
      <Button
        aria-haspopup="dialog"
        disabled={disabled || locked || loading}
        onClick={() => setOpen(true)}
        type="button"
      >
        {selected ? labels.change : labels.select}
      </Button>
      {createAction && !locked && (
        <Button
          aria-haspopup="dialog"
          disabled={disabled || loading || createAction.disabled}
          onClick={createAction.onClick}
          type="button"
          variant="outline"
        >
          {createAction.label}
        </Button>
      )}
      {selected && clearLabel && (
        <Button
          disabled={disabled || locked}
          onClick={() => onChange("")}
          type="button"
          variant="ghost"
        >
          {clearLabel}
        </Button>
      )}
    </>
  );

  return (
    <>
      {selected ? (
        <div className="space-y-3">
          <ul className="grid items-stretch gap-3">
            <li className="min-w-0">
              <SelectionSummaryCard
                description={selected.description || "—"}
                icon={icon}
                title={selected.label}
              />
            </li>
          </ul>
          <div className="flex flex-wrap gap-3">{actions}</div>
        </div>
      ) : (
        <EmptyState actions={actions} description={description} icon={icon} title={title} />
      )}
      {open && (
        <OptionPickerDialog
          labels={labels}
          loading={loading}
          locale={locale}
          onClose={() => setOpen(false)}
          onSelect={onChange}
          options={options}
          title={labels.select}
          value={value}
        />
      )}
    </>
  );
}