'use client';

import React, { useEffect, useRef, useState } from 'react';

interface NameDialogProps {
  open: boolean;
  title: string;
  initial: string;
  confirmText: string;
  onConfirm: (name: string) => void | Promise<void>;
  onCancel: () => void;
}

// Malé okno na zadanie názvu (premenovanie, duplikovanie newslettera).
// Pri každom otvorení sa obsah pripojí nanovo, takže začína s predvyplneným názvom.
export const NameDialog: React.FC<NameDialogProps> = ({ open, ...props }) => (open ? <NameDialogBody {...props} /> : null);

const NameDialogBody: React.FC<Omit<NameDialogProps, 'open'>> = ({ title, initial, confirmText, onConfirm, onCancel }) => {
  const [value, setValue] = useState(initial);
  const [busy, setBusy] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  // predvyplnený názov označíme, aby sa dal hneď prepísať alebo len doplniť
  useEffect(() => {
    const t = setTimeout(() => inputRef.current?.select(), 30);
    return () => clearTimeout(t);
  }, []);

  const submit = async () => {
    const name = value.trim();
    if (!name || busy) return;
    setBusy(true);
    try {
      await onConfirm(name);
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="fixed inset-0 z-[60] bg-black/50 flex items-center justify-center p-4" onMouseDown={onCancel}>
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-5 space-y-4" onMouseDown={(e) => e.stopPropagation()}>
        <h3 className="text-sm font-bold text-gray-900">{title}</h3>
        <input
          ref={inputRef}
          autoFocus
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Enter') submit();
            if (e.key === 'Escape') onCancel();
          }}
          placeholder="Názov newslettera"
          className="w-full text-sm border border-gray-300 rounded-xl px-3 py-2 outline-none focus:border-red-500 focus:ring-2 focus:ring-red-500/15"
        />
        <div className="flex justify-end gap-2">
          <button type="button" onClick={onCancel} className="px-4 py-1.5 text-xs font-bold text-gray-600 hover:bg-gray-100 rounded-xl">
            Zrušiť
          </button>
          <button
            type="button"
            onClick={submit}
            disabled={!value.trim() || busy}
            className="px-4 py-1.5 text-xs font-bold bg-red-600 hover:bg-red-700 disabled:opacity-40 text-white rounded-xl"
          >
            {busy ? 'Ukladám…' : confirmText}
          </button>
        </div>
      </div>
    </div>
  );
};