homaroma/apps/website/src/components/cookie/CookiePreferencesModal.tsx

"use client";

import { useState, useEffect } from 'react';
import { useCookieConsentStore, type CookiePreferences } from '../../store/cookieConsentStore';
import { useTranslation } from 'react-i18next';
import { X, ShieldCheck, BarChart3, Target, Lock, Check } from 'lucide-react';

export default function CookiePreferencesModal() {
  const { t } = useTranslation();
  const {
    record,
    isPreferencesOpen,
    closePreferences,
    savePreferences,
    acceptAll,
    rejectAll,
  } = useCookieConsentStore();

  // Local state for interactive toggling inside the modal
  const [localPrefs, setLocalPrefs] = useState<CookiePreferences>({
    necessary: true,
    analytics: false,
    marketing: false,
  });

  // Sync local state when modal opens
  useEffect(() => {
    if (isPreferencesOpen) {
      setLocalPrefs({
        necessary: true,
        analytics: Boolean(record.preferences.analytics),
        marketing: Boolean(record.preferences.marketing),
      });
    }
  }, [isPreferencesOpen, record.preferences]);

  // Handle ESC key to close
  useEffect(() => {
    if (!isPreferencesOpen) return;
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') closePreferences();
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isPreferencesOpen, closePreferences]);

  if (!isPreferencesOpen) return null;

  const handleSave = () => {
    savePreferences(localPrefs);
  };

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="cookie-modal-title"
      className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"
    >
      <div
        className="w-full max-w-2xl bg-surface-card rounded-2xl shadow-2xl border border-border-color overflow-hidden flex flex-col max-h-[90vh] animate-in zoom-in-95 duration-200"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-border-color bg-surface-nav-rest">
          <div className="flex items-center gap-2.5">
            <div className="p-2 rounded-lg bg-brand-cool/70 text-brand-primary">
              <ShieldCheck className="w-5 h-5" />
            </div>
            <div>
              <h2 id="cookie-modal-title" className="text-base sm:text-lg font-bold text-text-main">
                {t('cookie.prefTitle', 'ศูนย์การตั้งค่าความเป็นส่วนตัว (Cookie Preferences)')}
              </h2>
              <p className="text-xs text-muted-text">
                {t('cookie.prefSubtitle', 'จัดการความยินยอมในการจัดเก็บและใช้งานคุกกี้ตาม พ.ร.บ. คุ้มครองข้อมูลส่วนบุคคล (PDPA)')}
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={closePreferences}
            className="p-2 text-muted-text hover:text-text-main rounded-lg hover:bg-surface-muted transition-colors"
            aria-label="Close"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Body / Cookie Categories */}
        <div className="p-6 space-y-4 overflow-y-auto divide-y divide-border-color/60">
          {/* 1. Necessary Cookies */}
          <div className="pt-2 first:pt-0">
            <div className="flex items-start justify-between gap-4">
              <div className="flex items-start gap-3 flex-1">
                <div className="p-2 rounded-md bg-surface-muted text-muted-text mt-0.5">
                  <Lock className="w-4 h-4" />
                </div>
                <div>
                  <div className="flex items-center gap-2">
                    <h4 className="text-sm font-semibold text-text-main">
                      {t('cookie.catNecessaryTitle', 'คุกกี้ที่จำเป็นอย่างยิ่ง (Strictly Necessary)')}
                    </h4>
                    <span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200">
                      {t('cookie.alwaysActive', 'เปิดใช้งานเสมอ')}
                    </span>
                  </div>
                  <p className="text-xs text-muted-text mt-1 leading-relaxed">
                    {t(
                      'cookie.catNecessaryDesc',
                      'คุกกี้เหล่านี้มีความจำเป็นต่อการทำงานพื้นฐานของเว็บไซต์ เช่น การเข้าสู่ระบบ ความปลอดภัย การจดจำสินค้าในตะกร้า และการตั้งค่าภาษา เว็บไซต์ไม่สามารถทำงานได้อย่างถูกต้องหากไม่มีคุกกี้เหล่านี้'
                    )}
                  </p>
                </div>
              </div>
              <div className="relative inline-flex items-center cursor-not-allowed opacity-80 shrink-0">
                <input
                  type="checkbox"
                  checked={true}
                  disabled
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-brand-primary rounded-full peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
              </div>
            </div>
          </div>

          {/* 2. Analytics Cookies */}
          <div className="pt-4">
            <div className="flex items-start justify-between gap-4">
              <div className="flex items-start gap-3 flex-1">
                <div className="p-2 rounded-md bg-brand-cool/50 text-brand-primary mt-0.5">
                  <BarChart3 className="w-4 h-4" />
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-text-main">
                    {t('cookie.catAnalyticsTitle', 'คุกกี้เพื่อการวิเคราะห์และวัดผล (Analytics & Performance)')}
                  </h4>
                  <p className="text-xs text-muted-text mt-1 leading-relaxed">
                    {t(
                      'cookie.catAnalyticsDesc',
                      'ช่วยให้เราทราบสถิติการเข้าชม พฤติกรรมหน้าเว็บยอดนิยม และเส้นทางการใช้งานของผู้ใช้ เพื่อนำข้อมูลไปปรับปรุงประสิทธิภาพและบริการ (เช่น Google Analytics 4) ข้อมูลจะถูกจัดเก็บแบบไม่ระบุตัวตนโดยตรง'
                    )}
                  </p>
                </div>
              </div>
              <label className="relative inline-flex items-center cursor-pointer shrink-0">
                <input
                  type="checkbox"
                  checked={localPrefs.analytics}
                  onChange={(e) =>
                    setLocalPrefs((prev) => ({ ...prev, analytics: e.target.checked }))
                  }
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-border-color peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-primary"></div>
              </label>
            </div>
          </div>

          {/* 3. Marketing Cookies */}
          <div className="pt-4">
            <div className="flex items-start justify-between gap-4">
              <div className="flex items-start gap-3 flex-1">
                <div className="p-2 rounded-md bg-brand-cool/50 text-brand-primary mt-0.5">
                  <Target className="w-4 h-4" />
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-text-main">
                    {t('cookie.catMarketingTitle', 'คุกกี้เพื่อการตลาดและโฆษณา (Marketing & Targeting)')}
                  </h4>
                  <p className="text-xs text-muted-text mt-1 leading-relaxed">
                    {t(
                      'cookie.catMarketingDesc',
                      'ใช้เพื่อนำเสนอโปรโมชัน โฆษณา และเนื้อหาที่สอดคล้องกับความสนใจของท่านผ่านแพลตฟอร์มพันธมิตร (เช่น Meta Pixel, TikTok Pixel, Google Ads) รวมถึงวัดประสิทธิผลของแคมเปญ'
                    )}
                  </p>
                </div>
              </div>
              <label className="relative inline-flex items-center cursor-pointer shrink-0">
                <input
                  type="checkbox"
                  checked={localPrefs.marketing}
                  onChange={(e) =>
                    setLocalPrefs((prev) => ({ ...prev, marketing: e.target.checked }))
                  }
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-border-color peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-primary"></div>
              </label>
            </div>
          </div>
        </div>

        {/* Footer / Buttons */}
        <div className="flex flex-col-reverse sm:flex-row items-center justify-between gap-3 p-4 sm:p-5 border-t border-border-color bg-surface-nav-rest">
          <button
            type="button"
            onClick={rejectAll}
            className="w-full sm:w-auto px-4 py-2 text-xs sm:text-sm font-medium rounded-lg text-muted-text hover:text-text-main hover:bg-surface-muted transition-colors text-center"
          >
            {t('cookie.btnRejectAll', 'ปฏิเสธทั้งหมด')}
          </button>

          <div className="flex items-center gap-2.5 w-full sm:w-auto">
            <button
              type="button"
              onClick={handleSave}
              className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-4 py-2 text-xs sm:text-sm font-medium rounded-lg border border-border-color text-text-main hover:bg-surface-muted hover:border-text-main/20 transition-all text-center"
            >
              <Check className="w-4 h-4 text-brand-primary" />
              <span>{t('cookie.btnSavePreferences', 'บันทึกการตั้งค่า')}</span>
            </button>
            <button
              type="button"
              onClick={acceptAll}
              className="flex-1 sm:flex-none px-5 py-2 text-xs sm:text-sm font-semibold rounded-lg bg-brand-primary text-white hover:bg-brand-primary-hover shadow-sm transition-all text-center"
            >
              {t('cookie.btnAcceptAll', 'ยอมรับทั้งหมด')}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}