import React, { useState, useCallback } from 'react';
import { Plus, Pencil, Trash2 } from 'lucide-react';
import Button from './common/Button';
import Input from './common/Input';
import { normalizeAssetTypeName } from '../utils/assetTypeCatalog';

const ADD_TYPE_SENTINEL = '__amom_add_asset_type__';

export type AssetTypeCatalogFieldProps = {
  label?: string;
  value: string;
  /** Danh mục hiển thị trong dropdown (đã merge) */
  options: readonly string[];
  onChange: (next: string) => void;
  error?: string;
  selectClassName?: string;
  onAddType: (name: string) => Promise<boolean>;
  onRenameType: (oldName: string, newName: string) => Promise<boolean>;
  /** False nếu không xóa được (còn tài sản, v.v.) */
  onDeleteType: (name: string) => Promise<boolean>;
  /** true = loại đang chọn có tài sản — khóa nút gỡ / xóa */
  deleteBlockedByAssets?: boolean;
};

const toolbarIconBtn =
  'inline-flex shrink-0 items-center justify-center rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 p-2 shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-slate-900 disabled:pointer-events-none disabled:opacity-35';

const AssetTypeCatalogField: React.FC<AssetTypeCatalogFieldProps> = ({
  label = 'Loại *',
  value,
  options,
  onChange,
  error,
  selectClassName = '',
  onAddType,
  onRenameType,
  onDeleteType,
  deleteBlockedByAssets = false,
}) => {
  const [panel, setPanel] = useState<'idle' | 'add' | 'rename'>('idle');
  const [draft, setDraft] = useState('');

  const closePanel = useCallback(() => {
    setPanel('idle');
    setDraft('');
  }, []);

  const openAdd = useCallback(() => {
    setPanel('add');
    setDraft('');
  }, []);

  const openRename = useCallback(() => {
    if (!value) return;
    setPanel('rename');
    setDraft(value);
  }, [value]);

  const submitAdd = useCallback(async () => {
    const n = normalizeAssetTypeName(draft);
    if (!n) return;
    const ok = await onAddType(n);
    if (ok) {
      onChange(n);
      closePanel();
    }
  }, [draft, onAddType, onChange, closePanel]);

  const submitRename = useCallback(async () => {
    const n = normalizeAssetTypeName(draft);
    if (!n || !value) return;
    const ok = await onRenameType(value, n);
    if (ok) {
      onChange(n);
      closePanel();
    }
  }, [draft, value, onRenameType, onChange, closePanel]);

  const submitDelete = useCallback(async () => {
    if (!value || deleteBlockedByAssets) return;
    const ok = await onDeleteType(value);
    if (ok && options.length > 0) {
      const next = options[0];
      if (next !== value) onChange(next);
      else if (options[1]) onChange(options[1]);
      else onChange('');
    }
  }, [value, options, onDeleteType, onChange, deleteBlockedByAssets]);

  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const v = e.target.value;
    if (v === ADD_TYPE_SENTINEL) {
      openAdd();
      return;
    }
    onChange(v);
    if (panel !== 'idle') closePanel();
  };

  const canRename = !!value;
  const canDelete = !!value && !deleteBlockedByAssets;

  const renameTitle = !value ? 'Chọn loại trong danh sách' : 'Đổi tên loại đang chọn';

  const deleteTitle = !value
    ? 'Chọn loại trong danh sách'
    : deleteBlockedByAssets
      ? 'Không thể gỡ: loại này đang có tài sản trong dự án. Đổi loại tài sản hoặc xóa thiết bị trước.'
      : 'Gỡ loại khỏi danh mục chọn';

  return (
    <div className="space-y-2">
      <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">{label}</label>

      <div className="flex gap-2 items-stretch">
        <select
          className={`${selectClassName} flex-1 min-w-0`}
          value={value}
          onChange={handleSelectChange}
        >
          {options.map((t) => (
            <option key={t} value={t}>
              {t}
            </option>
          ))}
          <option disabled value="">
            ─────────────
          </option>
          <option value={ADD_TYPE_SENTINEL}>＋ Thêm loại mới…</option>
        </select>

        <div className="flex shrink-0 gap-1" role="toolbar" aria-label="Thao tác danh mục loại">
          <button
            type="button"
            className={`${toolbarIconBtn} text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-600`}
            onClick={openAdd}
            title="Thêm loại vào danh mục"
            aria-label="Thêm loại vào danh mục"
          >
            <Plus size={16} strokeWidth={2} aria-hidden />
          </button>
          <button
            type="button"
            className={`${toolbarIconBtn} text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-600`}
            disabled={!canRename}
            onClick={openRename}
            title={renameTitle}
            aria-label={renameTitle}
          >
            <Pencil size={16} strokeWidth={2} aria-hidden />
          </button>
          <button
            type="button"
            className={`${toolbarIconBtn} enabled:text-red-600 enabled:border-red-200 enabled:hover:bg-red-50 dark:enabled:border-red-900 dark:enabled:hover:bg-red-950/40 dark:enabled:text-red-400`}
            disabled={!canDelete}
            onClick={() => void submitDelete()}
            title={deleteTitle}
            aria-label={deleteTitle}
          >
            <Trash2 size={16} strokeWidth={2} aria-hidden />
          </button>
        </div>
      </div>

      {panel === 'add' && (
        <div className="rounded-md border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-900/50 px-3 py-2 space-y-2">
          <p className="text-xs text-slate-600 dark:text-slate-400">Tên loại mới</p>
          <div className="flex flex-wrap gap-2 items-end">
            <div className="flex-1 min-w-[140px]">
              <Input
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                placeholder="Ví dụ: Trafo MV"
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    e.preventDefault();
                    void submitAdd();
                  }
                  if (e.key === 'Escape') closePanel();
                }}
              />
            </div>
            <div className="flex gap-1.5 shrink-0">
              <Button type="button" className="!py-1.5 !px-3 !text-xs" onClick={() => void submitAdd()}>
                Lưu
              </Button>
              <Button type="button" variant="secondary" className="!py-1.5 !px-3 !text-xs" onClick={closePanel}>
                Hủy
              </Button>
            </div>
          </div>
        </div>
      )}

      {panel === 'rename' && (
        <div className="rounded-md border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-900/50 px-3 py-2 space-y-2">
          <p className="text-xs text-slate-600 dark:text-slate-400">
            Đổi tên và đồng bộ các tài sản đang dùng loại này
          </p>
          <div className="flex flex-wrap gap-2 items-end">
            <div className="flex-1 min-w-[140px]">
              <Input
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                placeholder="Tên mới"
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    e.preventDefault();
                    void submitRename();
                  }
                  if (e.key === 'Escape') closePanel();
                }}
              />
            </div>
            <div className="flex gap-1.5 shrink-0">
              <Button type="button" className="!py-1.5 !px-3 !text-xs" onClick={() => void submitRename()}>
                Lưu
              </Button>
              <Button type="button" variant="secondary" className="!py-1.5 !px-3 !text-xs" onClick={closePanel}>
                Hủy
              </Button>
            </div>
          </div>
        </div>
      )}

      {error ? <p className="text-xs text-red-600 dark:text-red-400">{error}</p> : null}
    </div>
  );
};

export default AssetTypeCatalogField;