/* global React, ReactDOM, Icon, IconBtn */
const { useState, useEffect, useRef, useCallback } = React;

// ============================================================
// Dialog host — replaces native prompt() / confirm() with styled
// modals. Mounted once in App. Anywhere can call:
//   await window.lhDialog.prompt({ title, initial })
//   await window.lhDialog.confirm({ title, message, danger })
// Both return Promise<string|null> and Promise<boolean>.
// ============================================================

function DialogHost() {
  const [dialog, setDialog] = useState(null);
  const inputRef = useRef(null);
  const resolverRef = useRef(null);

  // Wire global API
  useEffect(() => {
    window.lhDialog = {
      prompt: (opts) => new Promise(resolve => {
        resolverRef.current = resolve;
        setDialog({
          kind: 'prompt',
          title: opts?.title || 'Enter a value',
          message: opts?.message || '',
          placeholder: opts?.placeholder || '',
          initial: opts?.initial || '',
          confirmLabel: opts?.confirmLabel || 'OK',
          cancelLabel: opts?.cancelLabel || 'Cancel',
          icon: opts?.icon || 'edit',
          maxLength: opts?.maxLength,
        });
      }),
      confirm: (opts) => new Promise(resolve => {
        resolverRef.current = resolve;
        setDialog({
          kind: 'confirm',
          title: opts?.title || 'Are you sure?',
          message: opts?.message || '',
          confirmLabel: opts?.confirmLabel || 'Confirm',
          cancelLabel: opts?.cancelLabel || 'Cancel',
          danger: !!opts?.danger,
          icon: opts?.icon || (opts?.danger ? 'warning' : 'help'),
        });
      }),
    };
    return () => { delete window.lhDialog; };
  }, []);

  // Focus input on open
  useEffect(() => {
    if (dialog?.kind === 'prompt') {
      requestAnimationFrame(() => {
        inputRef.current?.focus();
        inputRef.current?.select();
      });
    }
  }, [dialog]);

  const resolve = useCallback((value) => {
    const r = resolverRef.current;
    resolverRef.current = null;
    setDialog(null);
    if (r) r(value);
  }, []);

  if (!dialog) return null;

  const cancel = () => resolve(dialog.kind === 'prompt' ? null : false);
  const confirm = (value) => resolve(dialog.kind === 'prompt' ? value : true);

  return (
    <div className="lh-dialog-overlay" onMouseDown={cancel}>
      <div className="lh-dialog" onMouseDown={e => e.stopPropagation()}>
        <div className={`lh-dialog-icon ${dialog.danger ? 'is-danger' : ''}`}>
          <Icon name={dialog.icon} />
        </div>
        <div className="lh-dialog-body">
          <div className="lh-dialog-title">{dialog.title}</div>
          {dialog.message && <div className="lh-dialog-message">{dialog.message}</div>}
          {dialog.kind === 'prompt' && (
            <PromptInput
              ref={inputRef}
              initial={dialog.initial}
              placeholder={dialog.placeholder}
              maxLength={dialog.maxLength}
              onSubmit={(v) => confirm(v)}
              onCancel={cancel}
            />
          )}
        </div>
        <div className="lh-dialog-actions">
          <button className="lh-btn ghost" onClick={cancel}>{dialog.cancelLabel}</button>
          <button
            className={`lh-btn ${dialog.danger ? 'danger-solid' : 'primary'}`}
            onClick={() => {
              if (dialog.kind === 'prompt') confirm(inputRef.current?.value || '');
              else confirm(true);
            }}
          >
            {dialog.confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

const PromptInput = React.forwardRef(function PromptInput({ initial, placeholder, maxLength, onSubmit, onCancel }, ref) {
  const [val, setVal] = useState(initial || '');
  useEffect(() => { setVal(initial || ''); }, [initial]);
  return (
    <input
      ref={ref}
      type="text"
      className="lh-input lh-dialog-input"
      value={val}
      placeholder={placeholder}
      maxLength={maxLength}
      onChange={e => setVal(e.target.value)}
      onKeyDown={(e) => {
        if (e.key === 'Enter') { e.preventDefault(); onSubmit(val); }
        if (e.key === 'Escape') { e.preventDefault(); onCancel(); }
      }}
    />
  );
});

window.DialogHost = DialogHost;