import Layout from "@/components/Layout";
import SEOHead from "@/components/SEOHead";
import { useLanguage } from "@/contexts/LanguageContext";
import { Link } from "wouter";
import { Cookie, Shield, BarChart3, Megaphone, Settings, ArrowLeft, ArrowRight } from "lucide-react";

function SectionCard({
  icon,
  title,
  children,
}: {
  icon: React.ReactNode;
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-6 mb-6">
      <div className="flex items-center gap-3 mb-4">
        <div className="w-10 h-10 rounded-lg bg-teal/10 flex items-center justify-center text-teal shrink-0">
          {icon}
        </div>
        <h2 className="font-heading font-semibold text-navy text-lg">{title}</h2>
      </div>
      <div className="text-gray-600 text-sm leading-relaxed space-y-3">{children}</div>
    </div>
  );
}

function CookieTable({ lang }: { lang: string }) {
  const isAr = lang === "ar";

  const cookies = [
    {
      name: "alzar_cookie_consent",
      provider: "Alzar FZE",
      purpose: isAr ? "يخزن تفضيلات موافقة ملفات تعريف الارتباط الخاصة بك" : "Stores your cookie consent preferences",
      duration: isAr ? "سنة واحدة" : "1 year",
      type: isAr ? "أساسي" : "Essential",
    },
    {
      name: "alzar_lang",
      provider: "Alzar FZE",
      purpose: isAr ? "يتذكر تفضيل اللغة (الإنجليزية/العربية)" : "Remembers your language preference (English/Arabic)",
      duration: isAr ? "سنة واحدة" : "1 year",
      type: isAr ? "أساسي" : "Essential",
    },
    {
      name: "_ga",
      provider: "Google Analytics",
      purpose: isAr ? "يميز المستخدمين الفريدين عن طريق تعيين رقم عشوائي" : "Distinguishes unique users by assigning a randomly generated number",
      duration: isAr ? "سنتان" : "2 years",
      type: isAr ? "تحليلي" : "Analytics",
    },
    {
      name: "_ga_*",
      provider: "Google Analytics",
      purpose: isAr ? "يحافظ على حالة الجلسة عبر طلبات الصفحات" : "Maintains session state across page requests",
      duration: isAr ? "سنتان" : "2 years",
      type: isAr ? "تحليلي" : "Analytics",
    },
  ];

  return (
    <div className="overflow-x-auto -mx-2">
      <table className="w-full text-sm border-collapse min-w-[600px]">
        <thead>
          <tr className="bg-gray-50 border-b border-gray-200">
            <th className="text-start px-3 py-2.5 font-semibold text-navy text-xs uppercase tracking-wide">
              {isAr ? "الاسم" : "Name"}
            </th>
            <th className="text-start px-3 py-2.5 font-semibold text-navy text-xs uppercase tracking-wide">
              {isAr ? "المزود" : "Provider"}
            </th>
            <th className="text-start px-3 py-2.5 font-semibold text-navy text-xs uppercase tracking-wide">
              {isAr ? "الغرض" : "Purpose"}
            </th>
            <th className="text-start px-3 py-2.5 font-semibold text-navy text-xs uppercase tracking-wide">
              {isAr ? "المدة" : "Duration"}
            </th>
            <th className="text-start px-3 py-2.5 font-semibold text-navy text-xs uppercase tracking-wide">
              {isAr ? "النوع" : "Type"}
            </th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-100">
          {cookies.map((cookie) => (
            <tr key={cookie.name} className="hover:bg-gray-50/50">
              <td className="px-3 py-2.5 font-mono text-xs text-teal-dark">{cookie.name}</td>
              <td className="px-3 py-2.5 text-gray-700">{cookie.provider}</td>
              <td className="px-3 py-2.5 text-gray-600">{cookie.purpose}</td>
              <td className="px-3 py-2.5 text-gray-600 whitespace-nowrap">{cookie.duration}</td>
              <td className="px-3 py-2.5">
                <span
                  className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${
                    cookie.type === "Essential" || cookie.type === "أساسي"
                      ? "bg-navy/10 text-navy"
                      : "bg-teal/10 text-teal-dark"
                  }`}
                >
                  {cookie.type}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default function CookiePolicy() {
  const { t, lang } = useLanguage();
  const isAr = lang === "ar";
  const BackArrow = isAr ? ArrowRight : ArrowLeft;

  const handleOpenSettings = () => {
    window.dispatchEvent(new CustomEvent("open-cookie-settings"));
  };

  return (
    <Layout>
      <SEOHead
        title={isAr ? "سياسة ملفات تعريف الارتباط | الزار" : "Cookie Policy | Alzar FZE"}
        description={
          isAr
            ? "تعرف على كيفية استخدام الزار لملفات تعريف الارتباط وكيف يمكنك إدارة تفضيلاتك."
            : "Learn how Alzar FZE uses cookies and how you can manage your preferences."
        }
        canonical="https://www.alzarfze.com/cookie-policy"
      />

      {/* Hero */}
      <section className="bg-navy pt-32 pb-16 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-navy via-navy-light to-navy opacity-90" />
        <div className="container relative z-10 text-center">
          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 text-teal text-sm font-medium mb-4">
            <Cookie className="w-4 h-4" />
            {isAr ? "الخصوصية والشفافية" : "Privacy & Transparency"}
          </div>
          <h1 className="font-heading text-3xl md:text-4xl font-bold text-white mb-3">
            {isAr ? "سياسة ملفات تعريف الارتباط" : "Cookie Policy"}
          </h1>
          <p className="text-white/60 max-w-2xl mx-auto text-sm">
            {isAr
              ? "آخر تحديث: فبراير 2026"
              : "Last updated: February 2026"}
          </p>
        </div>
      </section>

      {/* Content */}
      <section className="bg-warm-white py-12 lg:py-16">
        <div className="container max-w-3xl">
          {/* Back link */}
          <Link
            href="/"
            className="inline-flex items-center gap-1.5 text-sm text-teal hover:text-teal-dark transition-colors mb-8"
          >
            <BackArrow className="w-4 h-4" />
            {isAr ? "العودة إلى الرئيسية" : "Back to Home"}
          </Link>

          {/* Introduction */}
          <SectionCard icon={<Cookie className="w-5 h-5" />} title={isAr ? "ما هي ملفات تعريف الارتباط؟" : "What Are Cookies?"}>
            <p>
              {isAr
                ? "ملفات تعريف الارتباط هي ملفات نصية صغيرة يتم وضعها على جهازك عند زيارة موقع إلكتروني. تُستخدم على نطاق واسع لجعل المواقع تعمل بشكل أكثر كفاءة، وكذلك لتوفير معلومات لأصحاب الموقع."
                : "Cookies are small text files that are placed on your device when you visit a website. They are widely used to make websites work more efficiently, as well as to provide information to the site owners."}
            </p>
            <p>
              {isAr
                ? "يستخدم موقع الزار (alzarfze.com) ملفات تعريف الارتباط وتقنيات مشابهة لتحسين تجربتك وتحليل كيفية استخدام موقعنا. تشرح هذه السياسة أنواع ملفات تعريف الارتباط التي نستخدمها، ولماذا نستخدمها، وكيف يمكنك التحكم فيها."
                : "Alzar FZE (alzarfze.com) uses cookies and similar technologies to improve your experience and analyze how our website is used. This policy explains the types of cookies we use, why we use them, and how you can control them."}
            </p>
          </SectionCard>

          {/* Essential Cookies */}
          <SectionCard icon={<Shield className="w-5 h-5" />} title={isAr ? "ملفات تعريف الارتباط الأساسية" : "Essential Cookies"}>
            <p>
              {isAr
                ? "هذه الملفات ضرورية لعمل الموقع بشكل صحيح. تتضمن ملفات تعريف الارتباط التي تتذكر تفضيل اللغة الخاص بك (الإنجليزية أو العربية) وتخزن خيارات موافقتك على ملفات تعريف الارتباط. بدون هذه الملفات، لا يمكن للموقع أن يعمل بشكل صحيح."
                : "These cookies are necessary for the website to function properly. They include cookies that remember your language preference (English or Arabic) and store your cookie consent choices. Without these cookies, the website cannot function correctly."}
            </p>
            <p>
              {isAr
                ? "لا يمكن تعطيل ملفات تعريف الارتباط الأساسية. لا تجمع هذه الملفات أي معلومات شخصية يمكن استخدامها لأغراض تسويقية."
                : "Essential cookies cannot be disabled. These cookies do not collect any personal information that could be used for marketing purposes."}
            </p>
          </SectionCard>

          {/* Analytics Cookies */}
          <SectionCard icon={<BarChart3 className="w-5 h-5" />} title={isAr ? "ملفات تعريف الارتباط التحليلية" : "Analytics Cookies"}>
            <p>
              {isAr
                ? "نستخدم Google Analytics 4 لفهم كيفية تفاعل الزوار مع موقعنا. تجمع هذه الملفات معلومات مجهولة الهوية حول الصفحات التي تزورها، والمدة التي تقضيها على الموقع، وكيفية وصولك إلينا."
                : "We use Google Analytics 4 to understand how visitors interact with our website. These cookies collect anonymous information about the pages you visit, how long you spend on the site, and how you arrived."}
            </p>
            <p>
              {isAr
                ? "تساعدنا هذه البيانات على تحسين محتوى الموقع وتجربة المستخدم. يتم إخفاء هوية عناوين IP ولا يتم مشاركة أي بيانات شخصية مع أطراف ثالثة."
                : "This data helps us improve our website content and user experience. IP addresses are anonymized and no personal data is shared with third parties."}
            </p>
            <p>
              {isAr
                ? "يمكنك إلغاء الاشتراك في Google Analytics في أي وقت عن طريق تحديث تفضيلات ملفات تعريف الارتباط الخاصة بك."
                : "You can opt out of Google Analytics at any time by updating your cookie preferences."}
            </p>
          </SectionCard>

          {/* Marketing Cookies */}
          <SectionCard icon={<Megaphone className="w-5 h-5" />} title={isAr ? "ملفات تعريف الارتباط التسويقية" : "Marketing Cookies"}>
            <p>
              {isAr
                ? "قد تُستخدم ملفات تعريف الارتباط التسويقية لتتبع الزوار عبر المواقع الإلكترونية بهدف عرض إعلانات ذات صلة. حالياً، لا يستخدم موقع الزار ملفات تعريف ارتباط تسويقية، ولكن قد نضيفها في المستقبل."
                : "Marketing cookies may be used to track visitors across websites to display relevant advertisements. Currently, Alzar FZE does not use marketing cookies, but we may add them in the future."}
            </p>
            <p>
              {isAr
                ? "في حالة إضافة ملفات تعريف ارتباط تسويقية، سيتم تحديث هذه السياسة وسيُطلب منك الموافقة قبل تفعيلها."
                : "If marketing cookies are added, this policy will be updated and you will be asked for consent before they are activated."}
            </p>
          </SectionCard>

          {/* Cookie Table */}
          <SectionCard icon={<Cookie className="w-5 h-5" />} title={isAr ? "قائمة ملفات تعريف الارتباط" : "Cookie Inventory"}>
            <CookieTable lang={lang} />
          </SectionCard>

          {/* Managing Cookies */}
          <SectionCard icon={<Settings className="w-5 h-5" />} title={isAr ? "إدارة تفضيلاتك" : "Managing Your Preferences"}>
            <p>
              {isAr
                ? "يمكنك تغيير تفضيلات ملفات تعريف الارتباط في أي وقت بالنقر على الزر أدناه. يمكنك أيضاً حذف ملفات تعريف الارتباط من متصفحك مباشرة."
                : "You can change your cookie preferences at any time by clicking the button below. You can also delete cookies directly from your browser."}
            </p>
            <p>
              {isAr
                ? "يرجى ملاحظة أن تعطيل بعض ملفات تعريف الارتباط قد يؤثر على وظائف الموقع. ملفات تعريف الارتباط الأساسية مطلوبة دائماً لعمل الموقع بشكل صحيح."
                : "Please note that disabling certain cookies may affect website functionality. Essential cookies are always required for the website to work properly."}
            </p>
            <button
              onClick={handleOpenSettings}
              className="inline-flex items-center gap-2 px-5 py-2.5 bg-teal hover:bg-teal-dark text-white text-sm font-semibold rounded-lg transition-colors mt-2"
            >
              <Settings className="w-4 h-4" />
              {isAr ? "تغيير إعدادات ملفات تعريف الارتباط" : "Change Cookie Settings"}
            </button>
          </SectionCard>

          {/* Your Rights */}
          <SectionCard icon={<Shield className="w-5 h-5" />} title={isAr ? "حقوقك" : "Your Rights"}>
            <p>
              {isAr
                ? "بموجب قوانين حماية البيانات المعمول بها (بما في ذلك اللائحة العامة لحماية البيانات GDPR وقانون حماية البيانات الشخصية في الإمارات)، لديك الحق في:"
                : "Under applicable data protection laws (including GDPR and UAE Personal Data Protection Law), you have the right to:"}
            </p>
            <ul className="list-disc ps-5 space-y-1">
              <li>{isAr ? "معرفة ملفات تعريف الارتباط التي نستخدمها ولماذا" : "Know what cookies we use and why"}</li>
              <li>{isAr ? "رفض ملفات تعريف الارتباط غير الأساسية" : "Refuse non-essential cookies"}</li>
              <li>{isAr ? "تغيير تفضيلاتك في أي وقت" : "Change your preferences at any time"}</li>
              <li>{isAr ? "حذف ملفات تعريف الارتباط من جهازك" : "Delete cookies from your device"}</li>
              <li>{isAr ? "طلب معلومات حول البيانات التي نجمعها" : "Request information about the data we collect"}</li>
            </ul>
          </SectionCard>

          {/* Contact */}
          <div className="bg-navy/5 rounded-xl p-6 text-center">
            <p className="text-sm text-gray-600 mb-3">
              {isAr
                ? "إذا كان لديك أي أسئلة حول سياسة ملفات تعريف الارتباط الخاصة بنا، يرجى الاتصال بنا:"
                : "If you have any questions about our cookie policy, please contact us:"}
            </p>
            <a
              href="mailto:info@alzarfze.com"
              className="text-teal hover:text-teal-dark font-medium text-sm transition-colors"
            >
              info@alzarfze.com
            </a>
          </div>
        </div>
      </section>
    </Layout>
  );
}
