sent-shop/components/cookies/CookieSettingsModal.tsx

'use client';

import { Button } from '@/components/ui/Button';
import { Heading, Text } from '@/components/ui/Typography';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { useEffect, useState } from 'react';
import { CookieCategoryCard } from './CookieCategoryCard';
import { CookiePreferences, useCookieConsent } from './CookieContext';

// Cookie category descriptions
const COOKIE_DESCRIPTIONS = {
  necessary: {
    title: 'Neophodni kolačići',
    description: 'Ovi kolačići su neophodni za funkcioniranje web stranice i ne mogu biti isključeni. Oni omogućuju osnovne funkcionalnosti poput navigacije stranice i pristupa sigurnim područjima.'
  },
  analytics: {
    title: 'Analitički kolačići',
    description: 'Ovi kolačići nam pomažu razumjeti kako posjetitelji koriste našu web stranicu, prikupljajući anonimne statističke podatke. Oni nam pomažu poboljšati korisničko iskustvo i performanse stranice.'
  },
  marketing: {
    title: 'Marketinški kolačići',
    description: 'Ovi kolačići se koriste za praćenje posjetitelja na web stranicama. Namjera je prikazati oglase koji su relevantni i privlačni za pojedinog korisnika i time vrijedniji za izdavače i vanjske oglašivače.'
  },
  preferences: {
    title: 'Kolačići za personalizaciju',
    description: 'Ovi kolačići omogućuju web stranici da zapamti izbore koje ste napravili (poput korisničkog imena, jezika ili regije) i pružaju poboljšane, personalizirane značajke.'
  }
};

export function CookieSettingsModal() {
  const { preferences, showModal, savePreferences, closeModal } = useCookieConsent();
  const [localPreferences, setLocalPreferences] = useState<CookiePreferences>(preferences);
  
  // Sync with parent preferences when they change
  useEffect(() => {
    setLocalPreferences(preferences);
  }, [preferences]);
  
  const handleToggle = (category: keyof CookiePreferences) => {
    if (category === 'necessary') return; // Necessary cookies can't be disabled
    
    setLocalPreferences(prev => ({
      ...prev,
      [category]: !prev[category]
    }));
  };
  
  const handleSave = () => {
    savePreferences(localPreferences);
  };
  
  if (!showModal) return null;
  
  return (
    <>
      {/* Backdrop */}
      <div 
        className="fixed inset-0 bg-black bg-opacity-50 z-50"
        onClick={closeModal}
      />
      
      {/* Modal */}
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
          {/* Header */}
          <div className="p-4 border-b flex justify-between items-center sticky top-0 bg-white z-20">
            <Heading level={3}>Postavke kolačića</Heading>
            <button 
              onClick={closeModal}
              className="text-gray-500 hover:text-gray-700"
              aria-label="Close"
            >
              <XMarkIcon className="h-6 w-6" />
            </button>
          </div>
          
          {/* Content */}
          <div className="p-6">
            <Text className="mb-6">
              Ova web stranica koristi kolačiće za poboljšanje korisničkog iskustva. Možete prilagoditi svoje postavke 
              kolačića omogućavanjem ili onemogućavanjem svake kategorije. Kolačići označeni kao "Neophodni" 
              su potrebni za osnovne funkcije web stranice i ne mogu biti isključeni.
            </Text>
            
            {/* Cookie categories */}
            <div className="space-y-6">
              {/* Necessary cookies - always enabled */}
              <CookieCategoryCard
                title={COOKIE_DESCRIPTIONS.necessary.title}
                description={COOKIE_DESCRIPTIONS.necessary.description}
                enabled={true}
                onChange={() => {}}
                disabled={true}
              />
              
              {/* Analytics cookies */}
              <CookieCategoryCard
                title={COOKIE_DESCRIPTIONS.analytics.title}
                description={COOKIE_DESCRIPTIONS.analytics.description}
                enabled={localPreferences.analytics}
                onChange={() => handleToggle('analytics')}
              />
              
              {/* Marketing cookies */}
              <CookieCategoryCard
                title={COOKIE_DESCRIPTIONS.marketing.title}
                description={COOKIE_DESCRIPTIONS.marketing.description}
                enabled={localPreferences.marketing}
                onChange={() => handleToggle('marketing')}
              />
              
              {/* Preference cookies */}
              <CookieCategoryCard
                title={COOKIE_DESCRIPTIONS.preferences.title}
                description={COOKIE_DESCRIPTIONS.preferences.description}
                enabled={localPreferences.preferences}
                onChange={() => handleToggle('preferences')}
              />
            </div>

            <div className="mt-6 border-t pt-4">
              <Heading level={4} className="mb-3">O kolačićima</Heading>
              <Text className="mb-4">
                Kolačići su male tekstualne datoteke koje web stranice postavljaju na vaš uređaj prilikom posjeta.
                Koriste se za pamćenje vaših postavki, poboljšanje funkcionalnosti i prikupljanje analitičkih podataka.
              </Text>
              
              <Heading level={4} className="mb-2 mt-4">Kako koristimo kolačiće</Heading>
              <Text className="mb-4">
                Koristimo različite vrste kolačića za različite svrhe. Neki su neophodni za rad web stranice,
                dok drugi nam pomažu optimizirati sadržaj i korisničko iskustvo.
              </Text>
              
              <Heading level={4} className="mb-2 mt-4">Vaša prava</Heading>
              <Text className="mb-4">
                U skladu s EU regulativom o kolačićima, omogućujemo vam upravljanje postavkama kolačića.
                Više informacija možete pronaći u našim <a href="/privacy-policy" className="underline">Pravilima privatnosti</a> i 
                <a href="/terms-of-service" className="underline ml-1">Uvjetima korištenja</a>.
              </Text>
            </div>
          </div>
          
          {/* Footer with buttons */}
          <div className="p-4 border-t sticky bottom-0 bg-white">
            <div className="flex justify-end space-x-4">
              <Button 
                variant="outline" 
                onClick={closeModal}
              >
                Odustani
              </Button>
              <Button 
                variant="primary"
                onClick={handleSave}
              >
                Spremi postavke
              </Button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}