'use client'

import React, { useState, useEffect } from 'react'
import { Cookie, Check, ArrowRight } from 'lucide-react'
import { useConsentContext } from '@intecion/ipal-kit/client'

const CONSENT_CATEGORIES = ['necessary', 'analytics', 'marketing'] as const
type ConsentCat = (typeof CONSENT_CATEGORIES)[number]

export function CustomCookieBanner() {
  const { acceptAll, decided, rejectAll, savePreferences, state, texts } = useConsentContext()
  const [showSettings, setShowSettings] = useState(false)
  const [choices, setChoices] = useState(state)

  useEffect(() => {
    setChoices(state)
  }, [state])

  if (decided) {
    return null
  }

  const toggle = (cat: ConsentCat) => {
    if (cat === 'necessary') return
    setChoices((prev) => ({
      ...prev,
      [cat]: !prev[cat],
    }))
  }

  return (
    <div
      role="dialog"
      aria-label="Cookie consent"
      className="fixed bottom-0 inset-x-0 z-50 bg-[#1f1f1f] text-white p-6 border-t-4 border-[#FFED00] shadow-2xl"
    >
      <div className="container mx-auto max-w-4xl">
        {!showSettings ? (
          <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
            <div className="flex items-start gap-4">
              <div className="p-2 bg-[#FFED00] text-[#1f1f1f] shrink-0 border border-[#1f1f1f]">
                <Cookie className="h-6 w-6" />
              </div>
              <div className="text-xs sm:text-sm text-[#e0e0e0] leading-relaxed">
                <p>
                  {texts.message}{' '}
                  {texts.privacyLink && (
                    <a
                      href={texts.privacyLink.href}
                      className="text-[#FFED00] underline hover:no-underline font-bold"
                    >
                      {texts.privacyLink.label}
                    </a>
                  )}
                </p>
              </div>
            </div>

            <div className="flex flex-wrap items-center gap-3 shrink-0">
              <button
                type="button"
                onClick={() => setShowSettings(true)}
                className="bg-[#2b2b2b] hover:bg-[#383838] text-white border border-[#444444] px-4 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
              >
                {texts.buttons.settings}
              </button>
              <button
                type="button"
                onClick={rejectAll}
                className="bg-[#2b2b2b] hover:bg-[#383838] text-white border border-[#444444] px-4 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
              >
                {texts.buttons.reject}
              </button>
              <button
                type="button"
                onClick={acceptAll}
                className="bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] px-6 py-2.5 text-xs font-black uppercase tracking-widest transition-all cursor-pointer shadow-xs"
              >
                {texts.buttons.acceptAll}
              </button>
            </div>
          </div>
        ) : (
          <div className="space-y-6">
            <div className="flex items-center gap-3 border-b border-[#333333] pb-4">
              <div className="p-1.5 bg-[#FFED00] text-[#1f1f1f]">
                <Cookie className="h-5 w-5" />
              </div>
              <h2 className="text-base font-black uppercase tracking-wider text-white">
                {texts.settingsTitle}
              </h2>
            </div>

            <ul className="space-y-4">
              {CONSENT_CATEGORIES.map((cat) => {
                const isChecked = cat === 'necessary' ? true : !!choices[cat]
                const isDisabled = cat === 'necessary'
                const catData = texts.categories[cat]

                if (!catData) return null

                return (
                  <li
                    key={cat}
                    onClick={() => !isDisabled && toggle(cat)}
                    className={`flex items-start justify-between gap-4 p-4 border border-[#333333] bg-[#262626] ${
                      !isDisabled ? 'cursor-pointer hover:border-[#FFED00]' : 'opacity-90'
                    } transition-colors`}
                  >
                    <div className="pr-4">
                      <div className="text-xs font-black uppercase tracking-wider text-[#FFED00]">
                        {catData.title}
                      </div>
                      <p className="text-xs text-[#a0a0a0] mt-1 leading-relaxed">
                        {catData.description}
                      </p>
                    </div>

                    {/* Custom Kärcher Checkbox */}
                    <div className="relative flex items-center justify-center mt-0.5 shrink-0">
                      <div
                        className={`w-5 h-5 border-2 border-[#1f1f1f] transition-all flex items-center justify-center ${
                          isChecked ? 'bg-[#FFED00]' : 'bg-white'
                        }`}
                      >
                        <Check
                          className={`w-3.5 h-3.5 text-[#1f1f1f] stroke-[3] transition-opacity ${
                            isChecked ? 'opacity-100' : 'opacity-0'
                          }`}
                        />
                      </div>
                    </div>
                  </li>
                )
              })}
            </ul>

            <div className="flex justify-end gap-3 pt-2">
              <button
                type="button"
                onClick={() => setShowSettings(false)}
                className="bg-[#2b2b2b] hover:bg-[#383838] text-white border border-[#444444] px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
              >
                {texts.buttons.back}
              </button>
              <button
                type="button"
                onClick={() => savePreferences(choices)}
                className="bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] px-6 py-2.5 text-xs font-black uppercase tracking-widest transition-all cursor-pointer shadow-xs"
              >
                {texts.buttons.save}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}