"use client";

import { useState, useEffect } from "react";
import { MapPin, Mail, Send, ChevronDown, Instagram, Twitter, Linkedin, CheckCircle2, AlertCircle } from "lucide-react";
import { getSettings, submitLead } from "@/app/actions";

export default function Contact() {
    const [formData, setFormData] = useState({
        firstName: "",
        lastName: "",
        email: "",
        projectType: "Drone Çekimi",
        message: ""
    });

    const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
    const [settings, setSettings] = useState<any>(null);

    useEffect(() => {
        async function fetchSettings() {
            const data = await getSettings();
            if (data) setSettings(data);
        }
        fetchSettings();
    }, []);

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

        try {
            const result = await submitLead(formData);

            if (result.error) throw new Error(result.error);
            setStatus('success');
            setFormData({ firstName: "", lastName: "", email: "", projectType: "Drone Çekimi", message: "" });
        } catch (error) {
            console.error('Error submitting form:', error);
            setStatus('error');
        }
    };

    return (
        <section className="min-h-screen py-24 px-6 md:px-12 bg-[#f5f5f0]">
            <div className="max-w-7xl mx-auto">
                {/* Header Area */}
                <div className="mb-20">
                    <span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-6">İletişim</span>
                    <h1 className="editorial-headline text-4xl md:text-6xl text-black reveal opacity-0 uppercase">
                        Markanızı Dijitalde <br /> <span className="text-primary">Büyütelim.</span>
                    </h1>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-start border-t border-black/10 pt-16">
                    
                    {/* Left Side - Info */}
                    <div className="lg:col-span-5 space-y-16">
                        <div className="space-y-6">
                            <p className="text-black/60 text-[14px] leading-relaxed max-w-sm">
                                {settings?.site_description || "Dijital dünyada fark yaratmaya hazır mısınız? Sosyal medya yönetimi, reklam stratejileri veya SEO çözümleri için vizyonunuzu hayata geçirelim."}
                            </p>
                        </div>

                        {/* Contact Channels */}
                        <div className="space-y-10">
                            <div className="flex items-start gap-4">
                                <div className="w-10 h-10 border border-black/10 flex items-center justify-center text-primary shrink-0">
                                    <MapPin className="w-5 h-5" />
                                </div>
                                <div>
                                    <h3 className="text-[10px] tracking-[0.2em] uppercase text-black/40 mb-2">Konum</h3>
                                    <p className="text-[13px] text-black font-medium leading-relaxed">
                                        {settings?.office_address || "Muğla / Marmaris\nDijital Medya Merkezi"}
                                    </p>
                                </div>
                            </div>

                            <div className="flex items-start gap-4">
                                <div className="w-10 h-10 border border-black/10 flex items-center justify-center text-primary shrink-0">
                                    <Mail className="w-5 h-5" />
                                </div>
                                <div>
                                    <h3 className="text-[10px] tracking-[0.2em] uppercase text-black/40 mb-2">E-Posta & Telefon</h3>
                                    <p className="text-[13px] text-black font-medium hover:text-primary transition-colors cursor-pointer mb-1">
                                        {settings?.contact_email || "hello@mugladijital.com"}
                                    </p>
                                    <p className="text-[13px] text-black font-medium">
                                        {settings?.contact_phone || "+90 (555) 000 00 00"}
                                    </p>
                                </div>
                            </div>
                        </div>

                        {/* Social Links */}
                        <div className="space-y-6">
                            <h3 className="text-[10px] tracking-[0.2em] uppercase text-black/40">Sosyal Medya</h3>
                            <div className="flex gap-4">
                                {[
                                    { icon: Instagram, label: "Instagram", href: settings?.instagram_url },
                                    { icon: Twitter, label: "Twitter", href: settings?.twitter_url },
                                    { icon: Linkedin, label: "LinkedIn", href: settings?.linkedin_url }
                                ].map((social) => (
                                    <a
                                        key={social.label}
                                        href={social.href || "#"}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="w-10 h-10 border border-black/10 flex items-center justify-center text-black/40 hover:text-primary hover:border-primary/50 transition-all"
                                        aria-label={social.label}
                                    >
                                        <social.icon className="w-4 h-4" />
                                    </a>
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* Right Side - Form */}
                    <div className="lg:col-span-7">
                        <div className="border border-black/10 p-8 md:p-12 relative overflow-hidden bg-white/30 backdrop-blur-sm">
                            {status === 'success' ? (
                                <div className="flex flex-col items-center justify-center text-center py-12 space-y-6">
                                    <div className="w-16 h-16 border border-primary/20 flex items-center justify-center text-primary">
                                        <CheckCircle2 className="w-8 h-8" />
                                    </div>
                                    <h3 className="editorial-headline text-2xl text-black uppercase">Mesajınız Alındı!</h3>
                                    <p className="text-black/40 text-[12px] max-w-sm">
                                        Ekibimiz en kısa sürede sizinle iletişime geçecektir.
                                    </p>
                                    <button
                                        onClick={() => setStatus('idle')}
                                        className="button-secondary text-[11px]"
                                    >
                                        Yeni Mesaj Gönder
                                    </button>
                                </div>
                            ) : (
                                <form onSubmit={handleSubmit} className="space-y-10">
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
                                        <div className="space-y-3">
                                            <label className="text-[10px] tracking-[0.2em] uppercase text-black/40 ml-1">Adınız</label>
                                            <input
                                                required
                                                type="text"
                                                value={formData.firstName}
                                                onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
                                                placeholder="Adınız"
                                                className="w-full bg-transparent border-b border-black/10 py-3 text-[13px] text-black placeholder:text-black/10 outline-none focus:border-primary transition-colors"
                                            />
                                        </div>
                                        <div className="space-y-3">
                                            <label className="text-[10px] tracking-[0.2em] uppercase text-black/40 ml-1">Soyadınız</label>
                                            <input
                                                required
                                                type="text"
                                                value={formData.lastName}
                                                onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
                                                placeholder="Soyadınız"
                                                className="w-full bg-transparent border-b border-black/10 py-3 text-[13px] text-black placeholder:text-black/10 outline-none focus:border-primary transition-colors"
                                            />
                                        </div>
                                    </div>

                                    <div className="space-y-3">
                                        <label className="text-[10px] tracking-[0.2em] uppercase text-black/40 ml-1">E-posta Adresiniz</label>
                                        <input
                                            required
                                            type="email"
                                            value={formData.email}
                                            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                                            placeholder="ornek@email.com"
                                            className="w-full bg-transparent border-b border-black/10 py-3 text-[13px] text-black placeholder:text-black/10 outline-none focus:border-primary transition-colors"
                                        />
                                    </div>

                                    <div className="space-y-3 relative">
                                        <label className="text-[10px] tracking-[0.2em] uppercase text-black/40 ml-1">Hizmet Türü</label>
                                        <div className="relative">
                                            <select
                                                value={formData.projectType}
                                                onChange={(e) => setFormData({ ...formData, projectType: e.target.value })}
                                                className="w-full bg-transparent border-b border-black/10 py-3 text-[13px] text-black/60 appearance-none outline-none focus:border-primary transition-colors cursor-pointer"
                                            >
                                                <option>Drone Çekimi</option>
                                                <option>Fotoğraf & Video Çekimi</option>
                                                <option>Düğün / Nişan Çekimi</option>
                                                <option>Sosyal Medya Yönetimi</option>
                                                <option>Meta Reklam Yönetimi</option>
                                                <option>Google Reklam Yönetimi</option>
                                                <option>Web Site Tasarımı</option>
                                                <option>SEO Optimizasyonu</option>
                                                <option>Otel Tanıtım Çekimi</option>
                                            </select>
                                            <ChevronDown className="absolute right-0 top-1/2 -translate-y-1/2 w-4 h-4 text-black/20 pointer-events-none" />
                                        </div>
                                    </div>

                                    <div className="space-y-3">
                                        <label className="text-[10px] tracking-[0.2em] uppercase text-black/40 ml-1">Mesajınız</label>
                                        <textarea
                                            required
                                            rows={4}
                                            value={formData.message}
                                            onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                                            placeholder="Projenizden bahsedin..."
                                            className="w-full bg-transparent border-b border-black/10 py-3 text-[13px] text-black placeholder:text-black/10 outline-none focus:border-primary transition-colors resize-none"
                                        />
                                    </div>

                                    {status === 'error' && (
                                        <div className="flex items-center gap-2 text-red-600 text-[11px] font-bold bg-red-50 p-4 border border-red-100">
                                            <AlertCircle className="w-4 h-4" />
                                            Bir hata oluştu. Lütfen tekrar deneyin.
                                        </div>
                                    )}

                                    <button
                                        disabled={status === 'loading'}
                                        className="button-primary w-full justify-center group disabled:opacity-50"
                                    >
                                        {status === 'loading' ? 'Gönderiliyor...' : 'Ücretsiz Analiz Talebi Gönder'}
                                        <Send className="w-3 h-3 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />
                                    </button>
                                </form>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}