"use client"

import { useState, useMemo } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { AlertTriangle, Search, CheckCircle, XCircle, Shield, ShieldAlert, ShieldX, Info } from "lucide-react"
import { Button } from "@/components/ui/button"
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,
    renk: "from-green-500 to-emerald-500",
    bgRenk: "bg-green-50",
    borderRenk: "border-green-200",
    textRenk: "text-green-700",
    iconBg: "bg-green-100",
    ornek: "Ofisler, bankalar",
    aciklama: "Fiziksel risk düşük, büro işleri ağırlıklı",
  },
  {
    sinif: "Tehlikeli",
    icon: ShieldAlert,
    renk: "from-amber-500 to-orange-500",
    bgRenk: "bg-amber-50",
    borderRenk: "border-amber-200",
    textRenk: "text-amber-700",
    iconBg: "bg-amber-100",
    ornek: "Gıda, tekstil",
    aciklama: "Makine kullanımı, orta düzey risk",
  },
  {
    sinif: "Çok Tehlikeli",
    icon: ShieldX,
    renk: "from-red-500 to-rose-600",
    bgRenk: "bg-red-50",
    borderRenk: "border-red-200",
    textRenk: "text-red-700",
    iconBg: "bg-red-100",
    ornek: "Maden, inşaat",
    aciklama: "Yüksek kaza riski, özel önlem gerektirir",
  },
]

const getSinifStyle = (sinif: string) => {
  switch (sinif) {
    case "Az Tehlikeli":
      return { bg: "bg-green-100", border: "border-green-300", text: "text-green-700", badge: "bg-gradient-to-r from-green-500 to-emerald-500" }
    case "Tehlikeli":
      return { bg: "bg-amber-100", border: "border-amber-300", text: "text-amber-700", badge: "bg-gradient-to-r from-amber-500 to-orange-500" }
    case "Çok Tehlikeli":
      return { bg: "bg-red-100", border: "border-red-300", text: "text-red-700", badge: "bg-gradient-to-r from-red-500 to-rose-600" }
    default:
      return { bg: "bg-slate-100", border: "border-slate-300", text: "text-slate-700", badge: "bg-slate-500" }
  }
}

export default function TehlikeSinifi() {
  const [naceKodu, setNaceKodu] = useState("")
  const [sonuc, setSonuc] = useState<NaceKodu | null>(null)
  const [hata, setHata] = useState("")
  const [aramaTipi, setAramaTipi] = useState<"kod" | "tanim">("kod")

  const aramaSonuclari = useMemo(() => {
    if (aramaTipi === "tanim" && naceKodu.length >= 3) {
      const aramaMetni = naceKodu.toLowerCase()
      return (naceKodlari as NaceKodu[]).filter(item => item.tanim.toLowerCase().includes(aramaMetni)).slice(0, 6)
    }
    return []
  }, [naceKodu, aramaTipi])

  const handleSorgula = () => {
    setHata("")
    setSonuc(null)
    if (!naceKodu.trim()) { setHata("Lütfen NACE kodu giriniz"); return }
    let formattedKod = naceKodu.trim()
    if (/^\d{6}$/.test(formattedKod)) {
      formattedKod = `${formattedKod.slice(0, 2)}.${formattedKod.slice(2, 4)}.${formattedKod.slice(4, 6)}`
    }
    const bulunan = (naceKodlari as NaceKodu[]).find(item => item.kod === formattedKod)
    if (bulunan) { setSonuc(bulunan) } else { setHata("Bu NACE kodu bulunamadı.") }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && aramaTipi === "kod") handleSorgula() }
  const handleSelectFromList = (item: NaceKodu) => { setSonuc(item); setNaceKodu(item.kod); setHata("") }

  return (
    <section id="tehlike-sinifi" className="py-12 sm:py-16 bg-gradient-to-b from-slate-50 to-white relative overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-0 left-1/4 w-72 h-72 bg-amber-100 rounded-full blur-3xl opacity-20" />
        <div className="absolute bottom-0 right-1/4 w-72 h-72 bg-blue-100 rounded-full blur-3xl opacity-20" />
      </div>

      <div className="container mx-auto px-4 sm:px-6 relative z-10">
        {/* Header */}
        <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center max-w-2xl mx-auto mb-8">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-amber-100 text-amber-700 text-xs font-semibold mb-3">
            <AlertTriangle className="w-3.5 h-3.5" />
            Zorunlu Bilgi
          </div>
          <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-slate-900 mb-2">Tehlike Sınıfınızı Öğrenin</h2>
          <p className="text-sm sm:text-base text-slate-600">Vergi levhanızdaki 6 haneli NACE kodunu girerek işyerinizin tehlike sınıfını anında öğrenin.</p>
        </motion.div>

        {/* Sorgulama - Ortada */}
        <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="max-w-xl mx-auto mb-8">
          <div className="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">
            <div className="bg-gradient-to-r from-slate-900 to-slate-800 px-5 py-4">
              <h3 className="text-lg font-bold text-white flex items-center gap-2">
                <Search className="w-5 h-5 text-amber-400" />
                NACE Kodu Sorgulama
              </h3>
            </div>

            <div className="p-5">
              {/* Arama Tipi */}
              <div className="flex gap-2 mb-3">
                <button onClick={() => { setAramaTipi("kod"); setSonuc(null); setHata(""); setNaceKodu(""); }}
                  className={`flex-1 py-2 px-3 rounded-lg font-medium text-sm transition-all ${aramaTipi === "kod" ? "bg-amber-500 text-white shadow-lg shadow-amber-500/25" : "bg-slate-100 text-slate-600 hover:bg-slate-200"}`}>
                  NACE Kodu
                </button>
                <button onClick={() => { setAramaTipi("tanim"); setSonuc(null); setHata(""); setNaceKodu(""); }}
                  className={`flex-1 py-2 px-3 rounded-lg font-medium text-sm transition-all ${aramaTipi === "tanim" ? "bg-amber-500 text-white shadow-lg shadow-amber-500/25" : "bg-slate-100 text-slate-600 hover:bg-slate-200"}`}>
                  Faaliyet Adı
                </button>
              </div>

              {/* Input */}
              <div className="relative">
                <input type="text" value={naceKodu} onChange={(e) => { setNaceKodu(e.target.value); if (aramaTipi === "kod") { setSonuc(null); setHata("") } }} onKeyDown={handleKeyDown}
                  placeholder={aramaTipi === "kod" ? "Örn: 108905 veya 10.89.05" : "Örn: inşaat, tekstil..."}
                  className="w-full px-4 py-3 pr-10 rounded-xl bg-slate-50 border-2 border-slate-200 text-slate-900 placeholder:text-slate-400 focus:outline-none focus:border-amber-500 focus:bg-white transition-all text-sm" />
                <Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
              </div>

              {aramaTipi === "kod" && (
                <Button onClick={handleSorgula} className="w-full mt-3 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white font-bold py-3 h-auto rounded-xl shadow-lg shadow-amber-500/25">
                  SORGULA
                </Button>
              )}

              {/* Arama Sonuçları */}
              <AnimatePresence>
                {aramaTipi === "tanim" && aramaSonuclari.length > 0 && !sonuc && (
                  <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="mt-3 bg-slate-50 rounded-xl overflow-hidden max-h-48 overflow-y-auto border border-slate-200">
                    {aramaSonuclari.map((item) => {
                      const style = getSinifStyle(item.sinif)
                      return (
                        <button key={item.kod} onClick={() => handleSelectFromList(item)} className="w-full text-left px-3 py-2.5 hover:bg-white transition-colors border-b border-slate-100 last:border-b-0">
                          <div className="flex items-center justify-between gap-2">
                            <div className="flex-1 min-w-0">
                              <span className="font-mono text-xs text-slate-500">{item.kod}</span>
                              <p className="text-xs text-slate-700 truncate">{item.tanim}</p>
                            </div>
                            <span className={`${style.badge} text-white text-[10px] px-2 py-0.5 rounded-full whitespace-nowrap`}>{item.sinif}</span>
                          </div>
                        </button>
                      )
                    })}
                  </motion.div>
                )}
              </AnimatePresence>

              {/* Hata */}
              <AnimatePresence>
                {hata && (
                  <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="mt-3 flex items-center gap-2 text-red-500 bg-red-50 p-2.5 rounded-xl">
                    <XCircle className="w-4 h-4 flex-shrink-0" />
                    <span className="text-xs">{hata}</span>
                  </motion.div>
                )}
              </AnimatePresence>

              {/* Sonuç */}
              <AnimatePresence>
                {sonuc && (
                  <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} className="mt-3">
                    {(() => {
                      const style = getSinifStyle(sonuc.sinif)
                      return (
                        <div className={`${style.bg} ${style.border} border-2 rounded-xl p-3`}>
                          <div className="flex items-start gap-2">
                            <CheckCircle className={`w-5 h-5 ${style.text} flex-shrink-0 mt-0.5`} />
                            <div className="flex-1 min-w-0">
                              <div className="flex flex-wrap items-center gap-2 mb-1">
                                <span className="font-mono font-bold text-slate-800 text-sm">{sonuc.kod}</span>
                                <span className={`${style.badge} text-white text-xs font-bold px-2.5 py-0.5 rounded-full`}>{sonuc.sinif}</span>
                              </div>
                              <p className={`${style.text} text-xs`}>{sonuc.tanim}</p>
                            </div>
                          </div>
                        </div>
                      )
                    })()}
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          </div>
        </motion.div>

        {/* Tehlike Sınıfları Açıklama */}
        <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-6">
          <h3 className="text-lg font-semibold text-slate-800 mb-2">Tehlike Sınıfları</h3>
          <p className="text-sm text-slate-500 max-w-lg mx-auto">İşyerinizin faaliyet alanına göre 3 tehlike sınıfından birine dahil olursunuz. Bu sınıf, almanız gereken İSG hizmetlerini belirler.</p>
        </motion.div>

        {/* Alt Kısım - Kartlar + Neden Önemli */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 items-stretch">
          {/* 3 Mini Kart */}
          {tehlikeSiniflari.map((item, index) => {
            const Icon = item.icon
            return (
              <motion.div key={item.sinif} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: index * 0.1 }}
                className={`${item.bgRenk} ${item.borderRenk} border rounded-xl p-4 hover:shadow-md transition-all`}>
                <div className="flex items-start gap-3">
                  <div className={`${item.iconBg} w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0`}>
                    <Icon className={`w-5 h-5 ${item.textRenk}`} />
                  </div>
                  <div className="min-w-0 flex-1">
                    <span className={`inline-block px-2 py-0.5 rounded-full bg-gradient-to-r ${item.renk} text-white font-bold text-xs mb-1.5`}>{item.sinif}</span>
                    <p className="text-slate-700 text-xs font-medium mb-1">{item.aciklama}</p>
                    <p className="text-slate-500 text-[11px]">Örn: {item.ornek}</p>
                  </div>
                </div>
              </motion.div>
            )
          })}

          {/* Neden Önemli */}
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.3 }}
            className="bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl p-4 text-white">
            <div className="flex items-start gap-3">
              <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center flex-shrink-0">
                <Info className="w-5 h-5" />
              </div>
              <div>
                <h4 className="font-bold text-sm mb-1">Neden Önemli?</h4>
                <p className="text-blue-100 text-xs leading-relaxed">Tehlike sınıfınız, işyeri hekimi ve iş güvenliği uzmanı çalıştırma sürenizi, eğitim sıklığınızı ve risk değerlendirme periyodunuzu belirler.</p>
              </div>
            </div>
          </motion.div>
        </div>

        {/* Bilgi Linkleri */}
        <motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} className="mt-6 text-center">
          <div className="inline-flex flex-wrap items-center justify-center gap-4 text-xs text-slate-500">
            <a href="https://www.mevzuat.gov.tr/mevzuat?MevzuatNo=6331&MevzuatTur=1&MevzuatTertip=5" target="_blank" rel="noopener noreferrer" className="hover:text-blue-600 transition-colors flex items-center gap-1">
              <span>📋</span> 6331 Sayılı İSG Kanunu
            </a>
            <a href="https://www.resmigazete.gov.tr/eskiler/2012/12/20121226-11.htm" target="_blank" rel="noopener noreferrer" className="hover:text-blue-600 transition-colors flex items-center gap-1">
              <span>📄</span> Tehlike Sınıfları Tebliği
            </a>
          </div>
        </motion.div>

        {/* İpucu */}
        <motion.div initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="mt-4 max-w-xl mx-auto">
          <div className="bg-amber-50 border border-amber-200 rounded-xl px-4 py-3 text-center">
            <p className="text-xs text-amber-700">
              <span className="font-semibold">İpucu:</span> NACE kodunuzu vergi levhanızda veya ticaret sicil gazetesinde bulabilirsiniz.
            </p>
          </div>
        </motion.div>
      </div>
    </section>
  )
}