'use client'

import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import { useParams } from 'next/navigation'
import { Cookie, X, ShieldCheck } from 'lucide-react'

export default function CookieBanner() {
  const [mounted, setMounted] = useState(false)
  const [visible, setVisible] = useState(false)
  const params = useParams()
  const locale = (params?.locale as string) || 'tr'

  useEffect(() => {
    setMounted(true)
    const consent = localStorage.getItem('ayris_cookie_consent')
    if (!consent) {
      // Sayfa yüklendikten kısa bir süre sonra pürüzsüzce aç
      const timer = setTimeout(() => {
        setVisible(true)
      }, 1000)
      return () => clearTimeout(timer)
    }
  }, [])

  const handleAcceptAll = () => {
    localStorage.setItem('ayris_cookie_consent', 'accepted_all')
    setVisible(false)
  }

  const handleAcceptEssential = () => {
    localStorage.setItem('ayris_cookie_consent', 'essential_only')
    setVisible(false)
  }

  if (!mounted || !visible) return null

  return (
    <aside
      aria-label="Çerez ve Gizlilik Bildirimi"
      role="region"
      className="fixed bottom-4 left-4 right-4 z-50 mx-auto max-w-[540px] animate-in fade-in slide-in-from-bottom-5 duration-300 sm:bottom-6 sm:right-6 sm:left-auto"
    >
      <div className="rounded-2xl border border-zinc-200/90 bg-white/95 p-5 shadow-[0_20px_50px_-15px_rgba(24,24,27,0.2)] backdrop-blur-md">
        <div className="flex items-start gap-3.5">
          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-[#FDEEEC] text-[#B8140F]">
            <Cookie size={18} strokeWidth={2.2} aria-hidden="true" />
          </div>

          <div className="flex-1">
            <div className="flex items-center justify-between gap-2">
              <h3 className="text-sm font-bold text-zinc-950 flex items-center gap-1.5">
                Çerez ve Veri Politikası
              </h3>
              <button
                type="button"
                onClick={handleAcceptEssential}
                aria-label="Bildirimi Kapat"
                className="rounded-lg p-1 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700 transition-colors"
              >
                <X size={15} />
              </button>
            </div>

            <p className="mt-1.5 text-xs leading-relaxed text-zinc-600">
              Sitemizde gezinme deneyiminizi iyileştirmek, temel işlevleri sunmak ve güvenliği sağlamak amacıyla çerezler kullanılmaktadır. Ayrıntılı bilgi için{' '}
              <Link
                href={`/${locale}/privacy`}
                className="font-semibold text-zinc-900 underline underline-offset-2 hover:text-[#E61919]"
              >
                Gizlilik Politikası
              </Link>
              'nı inceleyebilirsiniz.
            </p>

            <div className="mt-4 flex flex-wrap items-center gap-2">
              <button
                type="button"
                onClick={handleAcceptAll}
                className="flex-1 rounded-full bg-[#E61919] px-4 py-2 text-xs font-bold text-white shadow-sm transition-all hover:bg-[#B8140F] active:scale-[0.98] sm:flex-initial"
              >
                Tümünü Kabul Et
              </button>
              <button
                type="button"
                onClick={handleAcceptEssential}
                className="flex-1 rounded-full border border-zinc-200 bg-white px-3.5 py-2 text-xs font-semibold text-zinc-700 transition-all hover:bg-zinc-50 hover:text-zinc-950 active:scale-[0.98] sm:flex-initial"
              >
                Yalnızca Zorunlular
              </button>
            </div>
          </div>
        </div>
      </div>
    </aside>
  )
}