"use client";

import { useState } from "react";
import Link from "next/link";
import { Cookie, X, Check, Settings2, Info } from "lucide-react";
import { useConsentStore } from "@/lib/consent-store";

export function CookieBanner() {
  const { 
    isInitialized, 
    isOpen, 
    analytics, 
    marketing, 
    setConsent, 
    acceptAll, 
    rejectOptional,
    closeBanner
  } = useConsentStore();

  const [showSettings, setShowSettings] = useState(false);
  const [localAnalytics, setLocalAnalytics] = useState(true);
  const [localMarketing, setLocalMarketing] = useState(true);

  if (!isInitialized || !isOpen) return null;

  const handleSaveSettings = () => {
    setConsent(localAnalytics, localMarketing);
    setShowSettings(false);
  };

  const handleOpenSettings = () => {
    const hasConsent = localStorage.getItem('thermcool_cookie_consent_v1');
    setLocalAnalytics(hasConsent ? analytics : true);
    setLocalMarketing(hasConsent ? marketing : true);
    setShowSettings(true);
  };

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6 pb-safe flex flex-col items-center pointer-events-none">
      <div className="relative pointer-events-auto max-w-5xl w-full bg-slate-900 border border-slate-700 shadow-2xl rounded-2xl overflow-hidden animate-in slide-in-from-bottom-10 fade-in duration-500">
        
        {/* WIDOK GŁÓWNY BANERA */}
        {!showSettings && (
          <div className="p-5 md:p-8">
            <div className="flex flex-col md:flex-row items-start gap-6">
              <div className="bg-slate-800 p-3 rounded-full shrink-0 text-white hidden md:block border border-slate-700 shadow-sm">
                <Cookie className="w-8 h-8" />
              </div>
              
              <div className="flex-grow">
                <h3 className="text-white font-bold text-lg md:text-xl mb-2 flex items-center gap-2">
                  <Cookie className="w-5 h-5 md:hidden text-white" />
                  Szanujemy Twoją prywatność
                </h3>
                <p className="text-slate-300 text-sm md:text-base leading-relaxed mb-4">
                  Używamy plików cookies i podobnych technologii, by zapewnić prawidłowe działanie serwisu, personalizować treści oraz analizować ruch. 
                  Możesz zaakceptować wszystkie ciasteczka, odrzucić opcjonalne lub dostosować zgody w ustawieniach. 
                  Szczegóły znajdziesz w naszej{" "}
                  <Link href="/polityka-prywatnosci" className="text-accent hover:text-white underline underline-offset-2">
                    Polityce Prywatności
                  </Link>.
                </p>
                
                <div className="flex flex-col sm:flex-row flex-wrap items-center gap-3 mt-6">
                  <button 
                    onClick={acceptAll}
                    className="btn btn-primary text-white flex-grow sm:flex-grow-0 border-none shadow-md"
                  >
                    <Check className="w-4 h-4 mr-1 text-white" /> Akceptuj wszystkie
                  </button>
                  <button 
                    onClick={rejectOptional}
                    className="btn btn-outline border-slate-600 text-slate-200 hover:bg-slate-800 hover:text-white hover:border-slate-500 flex-grow sm:flex-grow-0"
                  >
                    <X className="w-4 h-4 mr-1 text-slate-300" /> Tylko niezbędne
                  </button>
                  <div className="flex-grow hidden sm:block"></div>
                  <button 
                    onClick={handleOpenSettings}
                    className="btn btn-ghost text-slate-300 hover:text-white hover:bg-slate-800 flex-grow sm:flex-grow-0 group"
                  >
                    <Settings2 className="w-4 h-4 mr-1 text-slate-300 group-hover:text-white" /> Ustawienia
                  </button>
                </div>
              </div>
            </div>
            
            {/* Przycisk zamknięcia wymusza "Tylko niezbędne" dla bezpieczeństwa */}
            <button 
              onClick={rejectOptional}
              className="absolute top-4 right-4 text-slate-500 hover:text-white p-1"
              aria-label="Zamknij"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        )}

        {/* WIDOK ZARZĄDZANIA (MODAL) */}
        {showSettings && (
          <div className="flex flex-col h-full max-h-[85vh]">
            <div className="p-5 border-b border-slate-700 flex justify-between items-center bg-slate-800/50">
              <h3 className="text-white font-bold text-lg flex items-center gap-2">
                <Settings2 className="w-5 h-5 text-slate-300" />
                Ustawienia plików cookies
              </h3>
              <button 
                onClick={() => setShowSettings(false)}
                className="text-slate-400 hover:text-white"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            
            <div className="p-5 overflow-y-auto space-y-6">
              {/* Niezbędne */}
              <div className="flex gap-4 items-start bg-slate-800/30 p-4 rounded-xl border border-slate-700/50">
                <div className="pt-1">
                  <input type="checkbox" className="toggle toggle-primary" checked disabled />
                </div>
                <div>
                  <h4 className="text-white font-semibold mb-1 flex items-center gap-2">
                    Niezbędne <span className="text-[10px] uppercase bg-slate-700 px-2 py-0.5 rounded text-slate-300">Zawsze aktywne</span>
                  </h4>
                  <p className="text-slate-400 text-sm">
                    Te pliki cookies są wymagane do podstawowego działania strony (np. nawigacja, sesja koszyka, zapisywanie tych preferencji). Nie można ich wyłączyć.
                  </p>
                </div>
              </div>

              {/* Analityczne */}
              <div className="flex gap-4 items-start p-2">
                <div className="pt-1">
                  <input 
                    type="checkbox" 
                    className="toggle toggle-primary bg-slate-600 border-slate-500 [--tglbg:theme(colors.slate.200)] hover:bg-slate-500" 
                    checked={localAnalytics}
                    onChange={(e) => setLocalAnalytics(e.target.checked)}
                  />
                </div>
                <div>
                  <h4 className="text-white font-semibold mb-1">Analityczne (Google Analytics 4)</h4>
                  <p className="text-slate-400 text-sm">
                    Pozwalają nam badać statystyki ruchu na stronie, rozumieć jak Użytkownicy z niej korzystają i na tej podstawie optymalizować jej działanie.
                  </p>
                </div>
              </div>

              {/* Marketingowe */}
              <div className="flex gap-4 items-start p-2">
                <div className="pt-1">
                  <input 
                    type="checkbox" 
                    className="toggle toggle-primary bg-slate-600 border-slate-500 [--tglbg:theme(colors.slate.200)] hover:bg-slate-500" 
                    checked={localMarketing}
                    onChange={(e) => setLocalMarketing(e.target.checked)}
                  />
                </div>
                <div>
                  <h4 className="text-white font-semibold mb-1">Marketingowe (Google Tag Manager)</h4>
                  <p className="text-slate-400 text-sm">
                    Pozwalają nam dopasowywać treści reklamowe do Twoich zainteresowań w sieci (np. w systemach Google Ads, Facebook Ads) oraz mierzyć skuteczność kampanii.
                  </p>
                </div>
              </div>
            </div>
            
            <div className="p-5 border-t border-slate-700 bg-slate-800/50 flex flex-col-reverse sm:flex-row justify-end gap-3 items-center">
              <button 
                onClick={rejectOptional}
                className="btn btn-ghost text-slate-400 hover:text-white w-full sm:w-auto"
              >
                Odrzuć wszystkie
              </button>
              <button 
                onClick={acceptAll}
                className="btn btn-outline border-slate-600 text-white hover:bg-slate-700 w-full sm:w-auto"
              >
                Akceptuj wszystkie
              </button>
              <button 
                onClick={handleSaveSettings}
                className="btn btn-primary text-white w-full sm:w-auto"
              >
                Zapisz ustawienia
              </button>
            </div>
          </div>
        )}

      </div>
    </div>
  );
}