import { useState } from "react";
import { Plus, X } from "lucide-react";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import { useMenuBoardText } from "@/components/business/menu-boards/menuBoardI18n";
type Props = {
  open: boolean;
  saving: boolean;
  onClose: () => void;
  onCreate: (input: { name: string }) => void;
};

export default function MenuBoardCreateModal({ open, saving, onClose, onCreate }: Props) {
  const t = useMenuBoardText();
  const [name, setName] = useState("");

  if (!open) return null;

  const submit = () => {
    if (!name.trim()) return;
    onCreate({ name: name.trim() });
    setName("");
  };

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/70 p-0 backdrop-blur-sm sm:items-center sm:p-4">
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="create-menu-board-title"
        aria-describedby="create-menu-board-description"
        className="relative flex max-h-[92dvh] w-full flex-col overflow-hidden rounded-t-2xl border border-[var(--border)] bg-[var(--bg-elevated)] shadow-2xl sm:max-h-[90vh] sm:max-w-md sm:rounded-2xl"
      >
        <div className="flex items-start justify-between gap-3 border-b border-[var(--border)] px-5 py-4 sm:px-6">
          <div className="min-w-0">
            <h2 id="create-menu-board-title" className="text-base font-semibold tracking-tight text-[var(--text)] sm:text-lg">{t("createMenuBoard")}</h2>
            <p id="create-menu-board-description" className="mt-1 text-xs leading-relaxed text-[var(--text-faint)] sm:text-sm">{t("createDescription")}</p>
          </div>
          <button
            type="button"
            title={t("cancel")}
            aria-label={t("cancel")}
            disabled={saving}
            onClick={onClose}
            className="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-[var(--text-muted)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)] disabled:cursor-not-allowed disabled:opacity-50"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
        <div className="space-y-5 p-5 sm:p-6">
          <Input
            label={t("boardName")}
            placeholder={t("boardNamePlaceholder")}
            value={name}
            onChange={(event) => setName(event.target.value)}
            onKeyDown={(event) => event.key === "Enter" && submit()}
          />
        </div>
        <div className="flex justify-end gap-2 border-t border-[var(--border)] p-4 sm:px-6">
          <Button type="button" variant="secondary" onClick={onClose} disabled={saving}>
            {t("cancel")}
          </Button>
          <Button type="button" onClick={submit} disabled={saving || !name.trim()}>
            <Plus className="h-4 w-4" />
            {t("create")}
          </Button>
        </div>
      </div>
    </div>
  );
}