"use client";

import { MapPin, Phone, Mail, Clock, Send } from "lucide-react";
import { useState } from "react";
import { submitContactMessage } from "@/app/actions";

export default function Contact({ dict, dbSettings }: { dict: any, dbSettings?: any }) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [status, setStatus] = useState<{ type: 'success' | 'error', message: string } | null>(null);

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

    const formData = new FormData(e.currentTarget);
    const result = await submitContactMessage(formData);

    if (result.error) {
      setStatus({ type: 'error', message: result.error });
    } else {
      setStatus({ type: 'success', message: 'Mesajınız başarıyla gönderildi. En kısa sürede dönüş yapacağız.' });
      (e.target as HTMLFormElement).reset();
    }
    setIsSubmitting(false);
  };

  return (
    <section id="contact" className="py-24 bg-sand-light text-sea-dark relative">
      <div className="container mx-auto px-6 max-w-7xl">
        <div className="text-center mb-16">
          <h2 className="text-sm font-bold tracking-widest uppercase text-coral mb-4">{dict.contact.title}</h2>
          <h3 className="text-4xl md:text-5xl font-serif">{dict.contact.heading}</h3>
        </div>

        <div className="grid lg:grid-cols-2 gap-12 items-start mb-16">
          
          {/* İletişim Bilgileri */}
          <div className="space-y-8">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
                <MapPin className="text-coral w-6 h-6" />
              </div>
              <div>
                <h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.address.title}</h4>
                <p className="text-gray-600 leading-relaxed">
                  {dbSettings?.addressText1 || dict.contact.address.text1}<br />
                  {dbSettings?.addressText2 || dict.contact.address.text2}
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
                <Phone className="text-coral w-6 h-6" />
              </div>
              <div>
                <h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.phone}</h4>
                <p className="text-gray-600">
                  <a href={`tel:${dbSettings?.phone?.replace(/\s+/g, '') || '+905344656235'}`} className="hover:text-coral transition-colors">
                    {dbSettings?.phone || '+90 534 465 62 35'}
                  </a>
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
                <Mail className="text-coral w-6 h-6" />
              </div>
              <div>
                <h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.email}</h4>
                <p className="text-gray-600">
                  <a href={`mailto:${dbSettings?.email || 'info@moybeachakyaka.com'}`} className="hover:text-coral transition-colors">
                    {dbSettings?.email || 'info@moybeachakyaka.com'}
                  </a>
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
                <Clock className="text-coral w-6 h-6" />
              </div>
              <div>
                <h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.hours.title}</h4>
                <p className="text-gray-600">
                  {dbSettings?.workingHours || dict.contact.hours.text}
                </p>
              </div>
            </div>
          </div>

          {/* İletişim Formu */}
          <div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-8">
            <h4 className="font-bold text-2xl mb-6 font-serif">Bize Ulaşın</h4>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Adınız Soyadınız</label>
                  <input type="text" name="name" required className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors" placeholder="Adınız Soyadınız" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">E-Posta Adresi</label>
                  <input type="email" name="email" required className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors" placeholder="ornek@email.com" />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Konu</label>
                <input type="text" name="subject" className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors" placeholder="Konu (İsteğe bağlı)" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Mesajınız</label>
                <textarea name="message" required rows={4} className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors resize-none" placeholder="Mesajınızı buraya yazabilirsiniz..." />
              </div>
              
              {status && (
                <div className={`p-4 rounded-xl text-sm ${status.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
                  {status.message}
                </div>
              )}

              <button type="submit" disabled={isSubmitting} className="w-full bg-sea-dark hover:bg-sea text-white font-medium py-4 rounded-xl transition-colors shadow-md hover:shadow-lg flex items-center justify-center gap-2 disabled:opacity-70">
                <Send className="w-5 h-5" />
                {isSubmitting ? 'Gönderiliyor...' : 'Mesajı Gönder'}
              </button>
            </form>
          </div>

        </div>

        {/* Google Maps Embed */}
        <div className="w-full h-[400px] bg-gray-200 rounded-2xl overflow-hidden shadow-lg border-4 border-white">
          <iframe 
            src="https://maps.google.com/maps?hl=tr&gl=TR&cid=17585469489776666725&output=embed" 
            width="100%" 
            height="100%" 
            style={{ border: 0 }} 
            allowFullScreen={false} 
            loading="lazy" 
            referrerPolicy="no-referrer-when-downgrade"
            title="Moy Beach Konum"
          />
        </div>

      </div>
    </section>
  );
}