"use client"

import { useState, useMemo } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { AlertTriangle, Search, CheckCircle, XCircle, Shield, ShieldAlert, ShieldX, ExternalLink, Stethoscope, HardHat, HeartPulse, ArrowRight, ChevronRight } from "lucide-react"
import Link from "next/link"
import Navbar from "@/components/bolumler/Navbar"
import SayfaGecisOklari from "@/components/bolumler/SayfaGecisOklari"
import naceKodlari from "@/data/nace-kodlari.json"

interface NaceKodu {
  kod: string
  tanim: string
  sinif: "Az Tehlikeli" | "Tehlikeli" | "Çok Tehlikeli"
}

const tehlikeSiniflari = [
  { sinif: "Az Tehlikeli", icon: Shield, bg: "bg-emerald-500", light: "bg-emerald-50", border: "border-emerald-200", text: "text-emerald-600", ornek: "Ofisler, bankalar" },
  { sinif: "Tehlikeli", icon: ShieldAlert, bg: "bg-amber-500", light: "bg-amber-50", border: "border-amber-200", text: "text-amber-600", ornek: "Gıda, tekstil" },
  { sinif: "Çok Tehlikeli", icon: ShieldX, bg: "bg-red-500", light: "bg-red-50", border: "border-red-200", text: "text-red-600", ornek: "Maden, inşaat" },
]

const hesaplamaLinkleri = [
  { href: "/calisma-sureleri/isyeri-hekimi", baslik: "İşyeri Hekimi", aciklama: "5/10/15 dk", icon: Stethoscope, color: "#10B981" },
  { href: "/calisma-sureleri/is-guvenligi-uzmani", baslik: "İş Güvenliği Uzmanı", aciklama: "10/20/40 dk", icon: HardHat, color: "#F59E0B" },
  { href: "/calisma-sureleri/diger-saglik-personeli", baslik: "Diğer Sağlık Personeli", aciklama: "Çok tehlikeli", icon: HeartPulse, color: "#8B5CF6" },
]

const getSinifConfig = (sinif: string) => {
  switch (sinif) {
    case "Az Tehlikeli":
      return { color: "#10B981", bg: "bg-emerald-500", light: "bg-emerald-50", text: "text-emerald-600", border: "border-emerald-200" }
    case "Tehlikeli":
      return { color: "#F59E0B", bg: "bg-amber-500", light: "bg-amber-50", text: "text-amber-600", border: "border-amber-200" }
    case "Çok Tehlikeli":
      return { color: "#EF4444", bg: "bg-red-500", light: "bg-red-50", text: "text-red-600", border: "border-red-200" }
    default:
      return { color: "#64748B", bg: "bg-slate-500", light: "bg-slate-50", text: "text-slate-600", border: "border-slate-200" }
  }
}

const mevzuatLinkleri = [
  { baslik: "Tehlike Sınıfları Tebliği", url: "https://www.mevzuat.gov.tr/mevzuat?MevzuatNo=36787&MevzuatTur=9&MevzuatTertip=5" },
  { baslik: "6331 Sayılı İSG Kanunu", url: "https://www.mevzuat.gov.tr/mevzuat?MevzuatNo=6331&MevzuatTur=1&MevzuatTertip=5" },
]

export default function TehlikeSiniflariPage() {
  const [naceKodu, setNaceKodu] = useState("")
  const [sonuc, setSonuc] = useState<NaceKodu | null>(null)
  const [hata, setHata] = useState("")
  const [isFocused, setIsFocused] = useState(false)

  const aramaSonuclari = useMemo(() => {
    if (naceKodu.length < 2) return []
    const aramaMetni = naceKodu.toLowerCase().trim()
    
    let formattedKod = aramaMetni
    if (/^\d{6}$/.test(aramaMetni)) {
      formattedKod = `${aramaMetni.slice(0, 2)}.${aramaMetni.slice(2, 4)}.${aramaMetni.slice(4, 6)}`
    }
    
    const kodIleBulunan = (naceKodlari as NaceKodu[]).find(item => item.kod === formattedKod)
    if (kodIleBulunan) return [kodIleBulunan]
    
    return (naceKodlari as NaceKodu[]).filter(item => 
      item.tanim.toLowerCase().includes(aramaMetni) || item.kod.includes(aramaMetni)
    ).slice(0, 6)
  }, [naceKodu])

  const handleSelect = (item: NaceKodu) => {
    setSonuc(item)
    setNaceKodu("")
    setIsFocused(false)
    setHata("")
  }

  const handleReset = () => {
    setSonuc(null)
    setNaceKodu("")
    setHata("")
  }

  return (
    <>
      <Navbar />
      <main className="min-h-screen pt-20 sm:pt-24 bg-[#F5F7FA]">
        <div className="container mx-auto px-4 sm:px-6 py-4 sm:py-8 max-w-4xl">
          {/* Sayfa Geçiş Okları */}
          <SayfaGecisOklari 
            oncekiSayfa={{ href: "/calisma-sureleri/diger-saglik-personeli", baslik: "Diğer Sağlık Personeli" }}
            sonrakiSayfa={{ href: "/calisma-sureleri/isyeri-hekimi", baslik: "İşyeri Hekimi" }}
            analitikGoster={false}
          />

          {/* Header */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-center mb-10"
          >
            <motion.div 
              className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#0F2A44]/5 border border-[#0F2A44]/10 mb-6"
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.2 }}
            >
              <AlertTriangle className="w-4 h-4 text-[#F2B705]" />
              <span className="text-[#0F2A44] text-sm font-medium">NACE Kodu Sorgulama</span>
            </motion.div>
            
            <h1 className="text-3xl sm:text-4xl font-bold text-[#0F2A44] mb-4">
              Tehlike Sınıfınızı{" "}
              <span className="text-[#C8102E]">Öğrenin</span>
            </h1>
            <p className="text-[#2E2E2E]/60 max-w-lg mx-auto">
              NACE kodunuzu veya faaliyet alanınızı girerek işyerinizin tehlike sınıfını hemen öğrenin
            </p>
          </motion.div>

          {/* Search Box */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="max-w-2xl mx-auto"
          >
            <AnimatePresence mode="wait">
              {!sonuc ? (
                <motion.div
                  key="search"
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.95 }}
                  className="relative z-20"
                >
                  {/* Search Input */}
                  <div className={`relative bg-white rounded-xl sm:rounded-2xl shadow-xl border border-[#0F2A44]/10 transition-all duration-300 ${
                    isFocused ? "ring-4 ring-[#0F2A44]/10 border-[#0F2A44]/20" : ""
                  }`}>
                    <div className="flex items-center px-4 sm:px-6 py-4 sm:py-5">
                      <Search className="w-5 h-5 sm:w-6 sm:h-6 text-[#0F2A44]/40 mr-3 sm:mr-4 flex-shrink-0" />
                      <input
                        type="text"
                        value={naceKodu}
                        onChange={(e) => { setNaceKodu(e.target.value); setHata("") }}
                        onFocus={() => setIsFocused(true)}
                        onBlur={() => setTimeout(() => setIsFocused(false), 200)}
                        placeholder="NACE kodu veya faaliyet alanı yazın..."
                        className="flex-1 text-base sm:text-lg text-[#0F2A44] placeholder:text-[#0F2A44]/40 bg-transparent outline-none"
                      />
                      {naceKodu && (
                        <motion.button
                          initial={{ opacity: 0, scale: 0.8 }}
                          animate={{ opacity: 1, scale: 1 }}
                          onClick={() => setNaceKodu("")}
                          className="text-[#0F2A44]/40 hover:text-[#0F2A44] transition-colors p-1"
                        >
                          ✕
                        </motion.button>
                      )}
                    </div>

                    {/* Search Results Dropdown */}
                    <AnimatePresence>
                      {aramaSonuclari.length > 0 && isFocused && (
                        <motion.div
                          initial={{ opacity: 0, height: 0 }}
                          animate={{ opacity: 1, height: "auto" }}
                          exit={{ opacity: 0, height: 0 }}
                          className="border-t border-[#0F2A44]/10 overflow-hidden"
                        >
                          <div className="max-h-80 overflow-y-auto">
                            {aramaSonuclari.map((item, index) => {
                              const config = getSinifConfig(item.sinif)
                              return (
                                <motion.button
                                  key={item.kod}
                                  initial={{ opacity: 0, x: -10 }}
                                  animate={{ opacity: 1, x: 0 }}
                                  transition={{ delay: index * 0.05 }}
                                  onClick={() => handleSelect(item)}
                                  className="w-full flex items-center gap-2 sm:gap-4 px-4 sm:px-6 py-3 sm:py-4 hover:bg-[#F5F7FA] transition-colors text-left border-b border-[#0F2A44]/5 last:border-b-0"
                                >
                                  <div className={`w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full flex-shrink-0 ${config.bg}`} />
                                  <div className="flex-1 min-w-0">
                                    <div className="flex items-center gap-1.5 sm:gap-2 mb-0.5 sm:mb-1">
                                      <span className="font-mono text-xs sm:text-sm text-[#0F2A44]/60">{item.kod}</span>
                                      <span className={`text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 rounded-full ${config.light} ${config.text} font-medium`}>
                                        {item.sinif}
                                      </span>
                                    </div>
                                    <p className="text-[#0F2A44] text-xs sm:text-sm line-clamp-2">{item.tanim}</p>
                                  </div>
                                  <ChevronRight className="w-4 h-4 sm:w-5 sm:h-5 text-[#0F2A44]/30 flex-shrink-0" />
                                </motion.button>
                              )
                            })}
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>

                  {/* Hint */}
                  <motion.p
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ delay: 0.5 }}
                    className="text-center text-[#2E2E2E]/40 text-sm mt-4"
                  >
                    Örn: 10.89.05 veya &quot;inşaat&quot;, &quot;tekstil&quot;, &quot;gıda&quot;
                  </motion.p>

                  {/* Hata */}
                  {hata && (
                    <div className="mt-4 flex items-center justify-center gap-2 text-red-600 bg-red-50 p-3 rounded-lg">
                      <XCircle className="w-5 h-5 flex-shrink-0" />
                      <span className="text-sm">{hata}</span>
                    </div>
                  )}
                </motion.div>
              ) : (
                <motion.div
                  key="result"
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.95 }}
                  className="space-y-6"
                >
                  {/* Result Card */}
                  {(() => {
                    const config = getSinifConfig(sonuc.sinif)
                    return (
                      <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="bg-white rounded-2xl p-6 shadow-xl border border-[#0F2A44]/10"
                      >
                        <div className="flex items-start gap-4">
                          <motion.div
                            initial={{ scale: 0 }}
                            animate={{ scale: 1 }}
                            transition={{ type: "spring", delay: 0.2 }}
                            className={`w-14 h-14 ${config.bg} rounded-xl flex items-center justify-center shadow-lg flex-shrink-0`}
                            style={{ boxShadow: `0 10px 30px ${config.color}40` }}
                          >
                            <Shield className="w-7 h-7 text-white" />
                          </motion.div>
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-3 mb-2 flex-wrap">
                              <span className="font-mono text-lg font-bold text-[#0F2A44]">{sonuc.kod}</span>
                              <span className={`px-3 py-1 rounded-full text-sm font-medium ${config.bg} text-white`}>
                                {sonuc.sinif}
                              </span>
                            </div>
                            <p className="text-[#0F2A44]/70 text-sm">{sonuc.tanim}</p>
                          </div>
                          <button
                            onClick={handleReset}
                            className="text-[#0F2A44]/40 hover:text-[#0F2A44] transition-colors p-2 flex-shrink-0"
                          >
                            ✕
                          </button>
                        </div>
                        
                        {/* Success Message */}
                        <div className="mt-4 pt-4 border-t border-[#0F2A44]/10">
                          <div className="flex items-center gap-2 text-emerald-600">
                            <CheckCircle className="w-5 h-5" />
                            <span className="text-sm font-medium">Tehlike sınıfınız belirlendi!</span>
                          </div>
                        </div>
                      </motion.div>
                    )
                  })()}

                  {/* Action Cards */}
                  <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ delay: 0.3 }}
                  >
                    <h3 className="text-[#0F2A44] font-semibold mb-4 text-center">Çalışma Sürelerini Hesaplayın</h3>
                    <div className="grid sm:grid-cols-3 gap-4">
                      {hesaplamaLinkleri.map((secenek, index) => {
                        const Icon = secenek.icon
                        return (
                          <motion.div
                            key={secenek.baslik}
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.4 + index * 0.1 }}
                          >
                            <Link href={`${secenek.href}?sinif=${encodeURIComponent(sonuc.sinif)}`}>
                              <motion.div
                                whileHover={{ scale: 1.02, y: -4 }}
                                whileTap={{ scale: 0.98 }}
                                className="bg-white border border-[#0F2A44]/10 rounded-xl p-5 hover:shadow-lg hover:border-[#0F2A44]/20 transition-all cursor-pointer group h-full"
                              >
                                <div 
                                  className="w-12 h-12 rounded-lg flex items-center justify-center mb-3"
                                  style={{ backgroundColor: `${secenek.color}15` }}
                                >
                                  <Icon className="w-6 h-6" style={{ color: secenek.color }} />
                                </div>
                                <h4 className="text-[#0F2A44] font-semibold mb-1 text-sm">{secenek.baslik}</h4>
                                <p className="text-[#0F2A44]/50 text-xs mb-2">{secenek.aciklama}</p>
                                <div className="flex items-center gap-1 text-[#0F2A44]/50 text-sm group-hover:text-[#0F2A44] transition-colors">
                                  <span>Hesapla</span>
                                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                                </div>
                              </motion.div>
                            </Link>
                          </motion.div>
                        )
                      })}
                    </div>
                  </motion.div>

                  {/* CTA */}
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.7 }}
                  >
                    <Link href="/#basvuru">
                      <motion.div
                        whileHover={{ scale: 1.01 }}
                        whileTap={{ scale: 0.99 }}
                        className="bg-[#F2B705] rounded-xl p-5 flex items-center justify-between cursor-pointer group shadow-lg shadow-[#F2B705]/20"
                      >
                        <div>
                          <h3 className="text-[#0F2A44] font-semibold text-lg">Hemen Teklif Alın</h3>
                          <p className="text-[#0F2A44]/70 text-sm">Size özel fiyat teklifi hazırlayalım</p>
                        </div>
                        <ArrowRight className="w-6 h-6 text-[#0F2A44] group-hover:translate-x-2 transition-transform" />
                      </motion.div>
                    </Link>
                  </motion.div>
                </motion.div>
              )}
            </AnimatePresence>
          </motion.div>

          {/* Tehlike Sınıfları Info - Sadece arama modunda göster */}
          {!sonuc && (
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5 }}
              className="mt-12 max-w-2xl mx-auto"
            >
              <h3 className="text-[#0F2A44] font-semibold mb-4 text-center">Tehlike Sınıfları</h3>
              <div className="grid sm:grid-cols-3 gap-4">
                {tehlikeSiniflari.map((item, index) => {
                  const Icon = item.icon
                  return (
                    <motion.div
                      key={item.sinif}
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: 0.6 + index * 0.1 }}
                      className={`${item.light} ${item.border} border rounded-xl p-4`}
                    >
                      <div className="flex items-center gap-3 mb-2">
                        <Icon className={`w-5 h-5 ${item.text}`} />
                        <span className={`${item.bg} text-white text-xs font-bold px-2.5 py-1 rounded-full`}>
                          {item.sinif}
                        </span>
                      </div>
                      <p className="text-[#0F2A44]/60 text-xs">{item.ornek}</p>
                    </motion.div>
                  )
                })}
              </div>

              {/* Mevzuat Linkleri */}
              <div className="mt-8 flex flex-wrap justify-center gap-4">
                {mevzuatLinkleri.map((link, i) => (
                  <a
                    key={i}
                    href={link.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-1.5 text-sm text-[#0F2A44]/50 hover:text-[#C8102E] transition-colors"
                  >
                    <ExternalLink className="w-3.5 h-3.5" />
                    {link.baslik}
                  </a>
                ))}
              </div>

              {/* İpucu */}
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.8 }}
                className="mt-6 bg-[#F2B705]/10 border border-[#F2B705]/30 rounded-xl p-4 text-center"
              >
                <p className="text-[#0F2A44]/70 text-sm">
                  <span className="font-bold text-[#0F2A44]">İpucu:</span> NACE kodunuzu vergi levhanızda veya ticaret sicil gazetesinde bulabilirsiniz.
                </p>
              </motion.div>
            </motion.div>
          )}
        </div>
      </main>
    </>
  )
}