'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';
import { Modal, Form, Button, Alert } from 'react-bootstrap';

interface ContactModalProps {
  show: boolean;
  onHide: () => void;
  onSend: (message: string) => Promise<void>;
  recipientName?: string;
}

export default function ContactModal({ show, onHide, onSend, recipientName }: ContactModalProps) {
  const t = useTranslations('Carpool');
  const [message, setMessage] = useState('');
  const [sending, setSending] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!message.trim()) return;

    setSending(true);
    setError('');
    try {
      await onSend(message);
      setSuccess(true);
      setMessage('');
      setTimeout(() => {
        onHide();
        setSuccess(false);
      }, 2000);
    } catch {
      setError(t('contact_error'));
    } finally {
      setSending(false);
    }
  };

  return (
    <Modal show={show} onHide={onHide} centered>
      <Modal.Header closeButton>
        <Modal.Title>{t('contact_title')}{recipientName ? ` — ${recipientName}` : ''}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {success && <Alert variant="success">{t('contact_success')}</Alert>}
        {error && <Alert variant="danger">{error}</Alert>}
        {!success && (
          <Form onSubmit={handleSubmit}>
            <Form.Group className="mb-3">
              <Form.Label>{t('contact_message_label')}</Form.Label>
              <Form.Control
                as="textarea"
                rows={4}
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder={t('contact_message_placeholder')}
                required
                disabled={sending}
              />
            </Form.Group>
            <p className="tk-text-muted small">{t('contact_reply_info')}</p>
            <Button type="submit" disabled={sending || !message.trim()}>
              {sending ? '...' : t('contact_send')}
            </Button>
          </Form>
        )}
      </Modal.Body>
    </Modal>
  );
}