import { useState } from "react";
import { Modal, Button, Form } from "react-bootstrap";

type Props = {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (title: string, description: string) => Promise<void>;
};

/** Modální dialog pro přidání nového návrhu na vylepšení. */
export default function AddSuggestionModal({ isOpen, onClose, onSubmit }: Readonly<Props>) {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const reset = () => {
    setTitle("");
    setDescription("");
  };

  const handleClose = () => {
    reset();
    onClose();
  };

  const handleSubmit = async () => {
    if (!title.trim() || !description.trim()) return;
    setSubmitting(true);
    try {
      await onSubmit(title.trim(), description.trim());
      reset();
      onClose();
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Modal show={isOpen} onHide={handleClose} size="lg">
      <Modal.Header closeButton>
        <Modal.Title><h2>Nový návrh na vylepšení</h2></Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form.Group className="mb-3">
          <Form.Label>Název</Form.Label>
          <Form.Control
            type="text"
            placeholder="Stručný název návrhu"
            value={title}
            maxLength={120}
            onChange={e => setTitle(e.target.value)}
            onKeyDown={e => e.stopPropagation()}
            autoFocus
          />
          <Form.Text className="text-muted">Krátký, výstižný název navrhované úpravy.</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3">
          <Form.Label>Popis</Form.Label>
          <Form.Control
            as="textarea"
            rows={5}
            placeholder="Detailní popis navrhované úpravy, řešení apod."
            value={description}
            onChange={e => setDescription(e.target.value)}
            onKeyDown={e => e.stopPropagation()}
          />
        </Form.Group>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={handleClose}>
          Storno
        </Button>
        <Button onClick={handleSubmit} disabled={submitting || !title.trim() || !description.trim()}>
          Přidat
        </Button>
      </Modal.Footer>
    </Modal>
  );
}