"use client";
import * as React from "react";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Input, Textarea } from "@/components/ui/input";

export interface PromptDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: React.ReactNode;
  description?: React.ReactNode;
  label?: string;
  placeholder?: string;
  defaultValue?: string;
  confirmLabel?: string;
  multiline?: boolean;
  maxLength?: number;
  onSubmit: (value: string) => Promise<void> | void;
}

/**
 * Replacement for `window.prompt()`: bottom sheet on phones, small dialog on desktop.
 * Resolves with the trimmed value; empty submissions are ignored.
 */
export function PromptDialog({ open, onOpenChange, title, description, label, placeholder, defaultValue = "", confirmLabel = "Save", multiline, maxLength = 200, onSubmit }: PromptDialogProps) {
  const [value, setValue] = React.useState(defaultValue);
  const [busy, setBusy] = React.useState(false);
  const ref = React.useRef<HTMLInputElement & HTMLTextAreaElement>(null);
  React.useEffect(() => {
    if (open) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setValue(defaultValue);
      setTimeout(() => {
        ref.current?.focus();
        ref.current?.select();
      }, 60);
    }
  }, [open, defaultValue]);

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

  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={onOpenChange}
      title={title}
      description={description}
      size="sm"
      footer={
        <div className="flex gap-2 sm:justify-end">
          <Button variant="ghost" className="flex-1 sm:flex-none" onClick={() => onOpenChange(false)} disabled={busy}>
            Cancel
          </Button>
          <Button className="flex-1 sm:flex-none" loading={busy} disabled={!value.trim()} onClick={submit}>
            {confirmLabel}
          </Button>
        </div>
      }
    >
      <form
        className="space-y-1.5 pt-1"
        onSubmit={(e) => {
          e.preventDefault();
          void submit();
        }}
      >
        {label ? <label className="text-[13px] font-medium text-fg-muted">{label}</label> : null}
        {multiline ? (
          <Textarea ref={ref} value={value} onChange={(e) => setValue(e.target.value)} placeholder={placeholder} maxLength={maxLength} className="min-h-[120px]" />
        ) : (
          <Input ref={ref} value={value} onChange={(e) => setValue(e.target.value)} placeholder={placeholder} maxLength={maxLength} className="h-11 sm:h-9" />
        )}
      </form>
    </ResponsiveDialog>
  );
}