duelfi/src/components/SupportModal.tsx

"use client";

import { useState } from "react";
import { API_URL } from '../data/shared';

interface SupportModalProps {
  isOpen: boolean;
  onClose: () => void;
}

interface FormData {
  email: string;
  subject: string;
  message: string;
}

export default function SupportModal({ isOpen, onClose }: SupportModalProps) {
  const [formData, setFormData] = useState<FormData>({
    email: "",
    subject: "",
    message: ""
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState<"success" | "error" | null>(null);

  if (!isOpen) return null;

  const handleModalClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitStatus(null);

    try {
      const params = new URLSearchParams({
        email: formData.email,
        subject: formData.subject,
        message: formData.message
      });

      const response = await fetch(`${API_URL}add_feedback.php?${params}`, {
        method: 'GET',
      });

      if (response.ok) {
        setSubmitStatus("success");
        setFormData({ email: "", subject: "", message: "" });
        setTimeout(() => {
          onClose();
        }, 2000);
      } else {
        setSubmitStatus("error");
      }
    } catch {
      setSubmitStatus("error");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div 
      className="fixed inset-0 bg-black/70 flex justify-center items-center z-50"
      onClick={handleModalClick}
    >
      <div className="bg-[rgb(30,30,30)] text-white w-full max-w-lg p-6 rounded-2xl shadow-lg space-y-6 transform transition-all duration-300 ease-out translate-y-0 opacity-100">
        <div className="flex justify-between items-center">
          <h2 className="text-2xl font-bold">Support</h2>
          <button 
            onClick={onClose}
            className="text-gray-400 hover:text-white"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div className="space-y-4">
          <div>
            <h3 className="text-lg font-semibold">Looking for support?</h3>
            <p className="text-gray-300">
              Join our{" "}
              <a 
                href="https://t.me/duelfidotio" 
                target="_blank" 
                rel="noopener noreferrer"
                className="text-[rgb(248,144,22)] hover:underline"
              >
                Telegram group
              </a>{" "}
              &mdash; our mods and community are always happy to help!
            </p>
          </div>

          <div>
            <h3 className="text-lg font-semibold">Interested in a collaboration or partnership?</h3>
            <p className="text-gray-300 mb-4">Fill out the form below and we&apos;ll get back to you as soon as possible.</p>
            
            <form onSubmit={handleSubmit} className="space-y-4">
              <input
                type="email"
                name="email"
                placeholder="Email"
                value={formData.email}
                onChange={handleInputChange}
                required
                className="w-full bg-[rgb(10,10,10)] text-white p-2 rounded-md border border-gray-700"
              />
              <input
                type="text"
                name="subject"
                placeholder="Subject"
                value={formData.subject}
                onChange={handleInputChange}
                required
                className="w-full bg-[rgb(10,10,10)] text-white p-2 rounded-md border border-gray-700"
              />
              <textarea
                name="message"
                placeholder="Message"
                value={formData.message}
                onChange={handleInputChange}
                rows={4}
                required
                className="w-full bg-[rgb(10,10,10)] text-white p-2 rounded-md border border-gray-700"
              />
              <button
                type="submit"
                disabled={isSubmitting}
                className="w-full bg-[rgb(248,144,22)] hover:bg-orange-400 text-black font-semibold px-4 py-2 rounded-md transition duration-500 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isSubmitting ? "Submitting..." : "Submit"}
              </button>
              {submitStatus === "success" && (
                <p className="text-green-500 text-center">Thank you for your message! We&apos;ll get back to you soon.</p>
              )}
              {submitStatus === "error" && (
                <p className="text-red-500 text-center">Something went wrong. Please try again later.</p>
              )}
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}