import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { MapPin, Phone, Mail } from "lucide-react";
import { toast } from "sonner";

const apiBase = import.meta.env.VITE_API_URL;

const ContactSection = () => {
  const [form, setForm] = useState({
    firstName: "",
    lastName: "",
    email: "",
    subject: "",
    message: "",
  });

  const [submitting, setSubmitting] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setForm({ ...form, [e.target.id]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    setSubmitting(true);
    try {
      const res = await fetch(`${apiBase}/api/contact`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });

      if (!res.ok) throw new Error("Fehler beim Senden der Nachricht");

      toast.success("Nachricht erfolgreich gesendet!");
      setForm({ firstName: "", lastName: "", email: "", subject: "", message: "" });
    } catch (err) {
      console.error(err);
      toast.error("Fehler beim Senden der Nachricht");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="contact" className="py-16 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-900">Kontakt</h2>
          <p className="mt-4 text-xl text-gray-600">Wir freuen uns auf deine Nachricht</p>
        </div>

        <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
          <div>
            <Card>
              <CardContent className="p-6">
                <form className="space-y-4" onSubmit={handleSubmit}>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label htmlFor="firstName" className="text-sm font-medium">Vorname</label>
                      <Input id="firstName" value={form.firstName} onChange={handleChange} />
                    </div>
                    <div className="space-y-2">
                      <label htmlFor="lastName" className="text-sm font-medium">Nachname</label>
                      <Input id="lastName" value={form.lastName} onChange={handleChange} />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="email" className="text-sm font-medium">E-Mail</label>
                    <Input id="email" type="email" value={form.email} onChange={handleChange} />
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="subject" className="text-sm font-medium">Betreff</label>
                    <Input id="subject" value={form.subject} onChange={handleChange} />
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="message" className="text-sm font-medium">Nachricht</label>
                    <Textarea id="message" value={form.message} onChange={handleChange} rows={4} />
                  </div>
                  <Button type="submit" className="w-full bg-frog-500 hover:bg-frog-600" disabled={submitting}>
                    {submitting ? "Wird gesendet..." : "Nachricht senden"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>

          {/* Kontaktinfos & Karte */}
          <div className="space-y-6">
            <div className="bg-white rounded-lg shadow p-6">
              <h3 className="text-xl font-bold mb-4">Kontaktinformationen</h3>
              <div className="space-y-4">
                <div className="flex items-start">
                  <MapPin className="h-5 w-5 text-frog-500 mt-1 mr-3" />
                  <div>
                    <p className="font-medium">Adresse</p>
                    <p className="text-gray-600">TG Laudenbach<br />Eleker Straße 3<br />69514 Laudenbach</p>
                  </div>
                </div>
                <div className="flex items-start">
                  <Phone className="h-5 w-5 text-frog-500 mt-1 mr-3" />
                  <div>
                    <p className="font-medium">Telefon</p>
                    <p className="text-gray-600">+49 6201 7835919</p>
                  </div>
                </div>
                <div className="flex items-start">
                  <Mail className="h-5 w-5 text-frog-500 mt-1 mr-3" />
                  <div>
                    <p className="font-medium">E-Mail</p>
                    <p className="text-gray-600">info@tg-laudenbach-volleyball.de</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-lg shadow overflow-hidden">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d646.3176722545943!2d8.640956290509195!3d49.61150128349905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sde!2sde!4v1746366691389!5m2!1sde!2sde"
                width="100%"
                height="250"
                style={{ border: 0 }}
                allowFullScreen={false}
                loading="lazy"
                title="Google Maps Standort TG Laudenbach"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ContactSection;