"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Send, CheckCircle2, AlertCircle, Building2, User, Mail, Phone, FileText, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import CustomSelect from "@/components/ui/custom-select"

interface FormData {
  firmaAdi: string
  yetkiliAdi: string
  email: string
  telefon: string
  calisanSayisi: string
  hizmetTuru: string
  mesaj: string
}

type FormStatus = "idle" | "loading" | "success" | "error" | "rateLimit"

export default function BasvuruFormu() {
  const [formData, setFormData] = useState<FormData>({
    firmaAdi: "", yetkiliAdi: "", email: "", telefon: "", calisanSayisi: "", hizmetTuru: "", mesaj: "",
  })
  const [status, setStatus] = useState<FormStatus>("idle")
  const [errorMessage, setErrorMessage] = useState("")

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setStatus("loading")
    try {
      const response = await fetch("/api/basvuru", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData) })
      const data = await response.json()
      if (response.status === 429) { setStatus("rateLimit"); setErrorMessage(data.message || "Çok fazla istek. Lütfen bekleyin."); return }
      if (!response.ok) throw new Error(data.message || "Bir hata oluştu")
      setStatus("success")
      setFormData({ firmaAdi: "", yetkiliAdi: "", email: "", telefon: "", calisanSayisi: "", hizmetTuru: "", mesaj: "" })
    } catch { setStatus("error"); setErrorMessage("Başvurunuz gönderilemedi. Lütfen tekrar deneyin.") }
  }

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
  }

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { type: "spring" as const, stiffness: 100 } }
  }

  return (
    <section id="basvuru" className="py-10 sm:py-20 bg-white scroll-mt-24">
      <div className="container mx-auto px-4 sm:px-6">
        <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center max-w-6xl mx-auto">
          {/* Sol taraf - Sadece büyük ekranlarda göster */}
          <motion.div 
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-100px" }}
            variants={containerVariants}
            className="hidden lg:block"
          >
            <motion.span variants={itemVariants} className="text-[#C8102E] font-semibold text-sm uppercase tracking-wide">Online Başvuru</motion.span>
            <motion.h2 variants={itemVariants} className="text-3xl sm:text-4xl font-bold text-[#0F2A44] mt-2 mb-4">Hemen <span className="text-[#C8102E]">Teklif</span> Alın</motion.h2>
            <motion.p variants={itemVariants} className="text-[#2E2E2E]/70 mb-8">Firmanız için en uygun İSG çözümlerini sunmak için buradayız.</motion.p>
            <motion.div variants={containerVariants} className="space-y-4 mb-8">
              {["Ücretsiz keşif ve analiz", "24 saat içinde geri dönüş", "Özel fiyat teklifleri"].map((b, i) => (
                <motion.div 
                  key={b} 
                  variants={itemVariants}
                  whileHover={{ x: 5 }}
                  className="flex items-center gap-3"
                >
                  <motion.div
                    initial={{ scale: 0 }}
                    whileInView={{ scale: 1 }}
                    viewport={{ once: true }}
                    transition={{ delay: 0.3 + i * 0.1, type: "spring" as const }}
                  >
                    <CheckCircle2 className="w-5 h-5 text-emerald-600" />
                  </motion.div>
                  <span className="text-[#2E2E2E]">{b}</span>
                </motion.div>
              ))}
            </motion.div>
            <motion.div 
              variants={itemVariants}
              whileHover={{ scale: 1.02 }}
              className="p-6 rounded-xl bg-[#0F2A44] text-white"
            >
              <h4 className="font-semibold mb-4">Hızlı İletişim</h4>
              <motion.a 
                href="tel:+905551234567" 
                className="flex items-center gap-3 text-slate-300 hover:text-[#F2B705] mb-3 transition-colors"
                whileHover={{ x: 5 }}
              >
                <Phone className="w-5 h-5" /><span>0555 123 45 67</span>
              </motion.a>
              <motion.a 
                href="mailto:info@analitikisg.com" 
                className="flex items-center gap-3 text-slate-300 hover:text-[#F2B705] transition-colors"
                whileHover={{ x: 5 }}
              >
                <Mail className="w-5 h-5" /><span>info@analitikisg.com</span>
              </motion.a>
            </motion.div>
          </motion.div>
          <div className="fade-in">
            {/* Mobilde başlık göster */}
            <div className="lg:hidden text-center mb-5">
              <h2 className="text-2xl font-bold text-[#0F2A44]">Hemen <span className="text-[#C8102E]">Teklif</span> Alın</h2>
              <p className="text-sm text-[#2E2E2E]/60 mt-2">24 saat içinde geri dönüş garantisi</p>
            </div>
            
            <div className="bg-white rounded-2xl shadow-xl border border-[#0F2A44]/10 p-5 sm:p-8 hover:shadow-2xl transition-shadow duration-300">
              {status === "success" ? (
                <motion.div 
                  initial={{ scale: 0.8, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  className="text-center py-10 sm:py-12"
                >
                  <motion.div 
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    transition={{ type: "spring" as const, stiffness: 200 }}
                    className="w-14 h-14 sm:w-16 sm:h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-5 sm:mb-6"
                  >
                    <CheckCircle2 className="w-7 h-7 sm:w-8 sm:h-8 text-emerald-600" />
                  </motion.div>
                  <h3 className="text-xl font-bold text-[#0F2A44] mb-2">Başvurunuz Alındı!</h3>
                  <p className="text-[#2E2E2E]/70 mb-5 sm:mb-6">En kısa sürede sizinle iletişime geçeceğiz.</p>
                  <Button onClick={() => setStatus("idle")} variant="outline" className="border-[#0F2A44]/20">Yeni Başvuru</Button>
                </motion.div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
                  <h3 className="hidden sm:block text-xl font-bold text-[#0F2A44] mb-6">Başvuru Formu</h3>
                  {(status === "error" || status === "rateLimit") && (
                    <motion.div 
                      initial={{ opacity: 0, y: -10 }}
                      animate={{ opacity: 1, y: 0 }}
                      className={`p-3 sm:p-4 rounded-lg flex items-center gap-3 ${status === "rateLimit" ? "bg-amber-50 text-amber-700" : "bg-red-50 text-red-700"}`}
                    >
                      <AlertCircle className="w-5 h-5" /><span className="text-sm">{errorMessage}</span>
                    </motion.div>
                  )}
                  <div className="space-y-3 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-4">
                    <div className="relative">
                      <Building2 className="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-[#2E2E2E]/40" />
                      <Input name="firmaAdi" placeholder="Firma Adı" value={formData.firmaAdi} onChange={handleChange} className="pl-11 h-11 sm:h-12 border-[#0F2A44]/20 focus:border-[#0F2A44] focus:ring-[#0F2A44]/20" required />
                    </div>
                    <div className="relative">
                      <User className="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-[#2E2E2E]/40" />
                      <Input name="yetkiliAdi" placeholder="Yetkili Adı Soyadı" value={formData.yetkiliAdi} onChange={handleChange} className="pl-11 h-11 sm:h-12 border-[#0F2A44]/20 focus:border-[#0F2A44] focus:ring-[#0F2A44]/20" required />
                    </div>
                  </div>
                  <div className="space-y-3 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-4">
                    <div className="relative">
                      <Mail className="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-[#2E2E2E]/40" />
                      <Input name="email" type="email" placeholder="E-posta Adresi" value={formData.email} onChange={handleChange} className="pl-11 h-11 sm:h-12 border-[#0F2A44]/20 focus:border-[#0F2A44] focus:ring-[#0F2A44]/20" required />
                    </div>
                    <div className="relative">
                      <Phone className="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-[#2E2E2E]/40" />
                      <Input name="telefon" type="tel" placeholder="Telefon Numarası" value={formData.telefon} onChange={handleChange} className="pl-11 h-11 sm:h-12 border-[#0F2A44]/20 focus:border-[#0F2A44] focus:ring-[#0F2A44]/20" required />
                    </div>
                  </div>
                  <div className="space-y-3 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-4">
                    <CustomSelect
                      name="calisanSayisi"
                      value={formData.calisanSayisi}
                      onChange={handleChange}
                      placeholder="Çalışan Sayısı"
                      required
                      options={[
                        { value: "1-9", label: "1-9" },
                        { value: "10-49", label: "10-49" },
                        { value: "50-249", label: "50-249" },
                        { value: "250+", label: "250+" },
                      ]}
                    />
                    <CustomSelect
                      name="hizmetTuru"
                      value={formData.hizmetTuru}
                      onChange={handleChange}
                      placeholder="Hizmet Türü"
                      required
                      options={[
                        { value: "is-guvenligi", label: "İş Güvenliği" },
                        { value: "isyeri-hekimligi", label: "İşyeri Hekimliği" },
                        { value: "risk-analizi", label: "Risk Analizi" },
                        { value: "komple", label: "Komple Paket" },
                      ]}
                    />
                  </div>
                  {/* Mesaj alanı - sadece büyük ekranlarda göster */}
                  <div className="relative hidden sm:block">
                    <FileText className="absolute left-4 top-4 w-5 h-5 text-[#2E2E2E]/40" />
                    <Textarea name="mesaj" placeholder="Mesajınız (İsteğe bağlı)" value={formData.mesaj} onChange={handleChange} className="pl-12 min-h-[100px] border-[#0F2A44]/20 focus:border-[#0F2A44] focus:ring-[#0F2A44]/20" />
                  </div>
                  <motion.div whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.99 }} className="pt-1">
                    <Button type="submit" size="lg" className="w-full h-12 bg-[#F2B705] hover:bg-[#d9a504] text-[#0F2A44] font-semibold shadow-lg shadow-[#F2B705]/25" disabled={status === "loading"}>
                      {status === "loading" ? <><Loader2 className="w-5 h-5 animate-spin mr-2" />Gönderiliyor...</> : <><Send className="w-5 h-5 mr-2" />Teklif Al</>}
                    </Button>
                  </motion.div>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}