"use client";

import { useState } from "react";

interface Props {
  lang: "ar" | "en";
}

export default function CompliancePreferences({ lang }: Props) {
  const isAr = lang === "ar";
  const [doubleOptIn, setDoubleOptIn] = useState(true);
  const [quietHours, setQuietHours] = useState(true);

  const content = {
    ar: {
      title: "الامتثال وتفضيلات العملاء",
      subtitle: "إدارة الموافقات والتفضيلات وقواعد القنوات",
      compliance: {
        title: "متطلبات الامتثال",
        items: [
          {
            title: "موافقة مزدوجة",
            desc: "طلب تأكيد صريح قبل إضافة العملاء",
            enabled: true,
          },
          {
            title: "ساعات الراحة الافتراضية",
            desc: "لا رسائل بين 10م - 8ص",
            enabled: true,
          },
          {
            title: "روابط إلغاء الاشتراك",
            desc: "إضافة تلقائية لخيار الإيقاف",
            enabled: true,
          },
          {
            title: "احترام أوقات الصلاة",
            desc: "تجنب الإرسال أثناء أوقات الصلاة",
            enabled: true,
          },
        ],
      },
      preferences: {
        title: "تفضيلات العملاء",
        panel: {
          channel: "القناة المفضلة",
          language: "اللغة",
          frequency: "تكرار الرسائل",
          types: "أنواع الرسائل",
        },
        channels: {
          whatsapp: "WhatsApp",
          sms: "SMS",
          email: "البريد الإلكتروني",
          none: "لا رسائل",
        },
        frequencies: {
          all: "كل الرسائل",
          important: "المهم فقط",
          minimal: "الحد الأدنى",
        },
      },
      fallbacks: {
        title: "قنوات احتياطية",
        rules: [
          {
            primary: "WhatsApp",
            fallback: "SMS",
            condition: "إذا لم يتم التسليم خلال 5 دقائق",
          },
          {
            primary: "SMS",
            fallback: "Email",
            condition: "إذا فشل الإرسال 3 مرات",
          },
          { primary: "Email", fallback: "لا شيء", condition: "نهاية السلسلة" },
        ],
      },
      sectors: {
        title: "ملاحظات القطاع",
        medical: {
          title: "طبي",
          rules: [
            "تذكيرات فقط، لا نصائح تشخيصية",
            "حماية HIPAA للبيانات",
            "لا مشاركة نتائج حساسة عبر SMS",
          ],
        },
        financial: {
          title: "مالي/قانوني",
          rules: [
            "لا بيانات حساسة عبر SMS/WhatsApp",
            "تشفير end-to-end مطلوب",
            "سجل تدقيق كامل",
          ],
        },
      },
      keywords: {
        title: "كلمات الإيقاف",
        list: ["إيقاف", "توقف", "إلغاء", "STOP", "UNSUBSCRIBE"],
        action: "إزالة تلقائية من جميع القوائم",
      },
    },
    en: {
      title: "Compliance & Customer Preferences",
      subtitle: "Manage consent, preferences, and channel rules",
      compliance: {
        title: "Compliance Requirements",
        items: [
          {
            title: "Double Opt-In",
            desc: "Require explicit confirmation before adding customers",
            enabled: true,
          },
          {
            title: "Default Quiet Hours",
            desc: "No messages between 10PM - 8AM",
            enabled: true,
          },
          {
            title: "Opt-Out Links",
            desc: "Auto-add unsubscribe option",
            enabled: true,
          },
          {
            title: "Respect Prayer Times",
            desc: "Avoid sending during prayer times",
            enabled: true,
          },
        ],
      },
      preferences: {
        title: "Customer Preferences",
        panel: {
          channel: "Preferred Channel",
          language: "Language",
          frequency: "Message Frequency",
          types: "Message Types",
        },
        channels: {
          whatsapp: "WhatsApp",
          sms: "SMS",
          email: "Email",
          none: "No Messages",
        },
        frequencies: {
          all: "All Messages",
          important: "Important Only",
          minimal: "Minimal",
        },
      },
      fallbacks: {
        title: "Channel Fallbacks",
        rules: [
          {
            primary: "WhatsApp",
            fallback: "SMS",
            condition: "If not delivered in 5 min",
          },
          { primary: "SMS", fallback: "Email", condition: "If failed 3 times" },
          { primary: "Email", fallback: "None", condition: "End of chain" },
        ],
      },
      sectors: {
        title: "Sector Notes",
        medical: {
          title: "Medical",
          rules: [
            "Reminders only, no diagnostic advice",
            "HIPAA data protection",
            "No sensitive results via SMS",
          ],
        },
        financial: {
          title: "Financial/Legal",
          rules: [
            "No sensitive data over SMS/WhatsApp",
            "End-to-end encryption required",
            "Full audit trail",
          ],
        },
      },
      keywords: {
        title: "Opt-Out Keywords",
        list: ["STOP", "UNSUBSCRIBE", "CANCEL", "QUIT", "END"],
        action: "Auto-remove from all lists",
      },
    },
  };

  const t = content[lang];

  return (
    <div className="space-y-6">
      <div className="text-center space-y-2">
        <h2 className="text-3xl font-bold text-brand-ink dark:text-white">
          {t.title}
        </h2>
        <p className="text-gray-600 dark:text-gray-300">{t.subtitle}</p>
      </div>

      <div className="grid lg:grid-cols-2 gap-8">
        {/* Compliance Settings */}
        <div className="space-y-6">
          <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 space-y-4">
            <h3 className="text-lg font-bold text-brand-ink dark:text-white">
              {t.compliance.title}
            </h3>

            <div className="space-y-4">
              {t.compliance.items.map((item, i) => (
                <div
                  key={i}
                  className="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-xl"
                >
                  <label className="flex items-start gap-3 flex-1 cursor-pointer">
                    <input
                      type="checkbox"
                      defaultChecked={item.enabled}
                      onChange={(e) => {
                        if (i === 0) setDoubleOptIn(e.target.checked);
                        if (i === 1) setQuietHours(e.target.checked);
                      }}
                      className="w-5 h-5 mt-0.5 text-brand-green rounded focus:ring-brand-green"
                    />
                    <div>
                      <p className="font-medium text-brand-ink dark:text-white">
                        {item.title}
                      </p>
                      <p className="text-sm text-gray-600 dark:text-gray-400">
                        {item.desc}
                      </p>
                    </div>
                  </label>
                </div>
              ))}
            </div>

            {/* Quiet Hours Configuration */}
            {quietHours && (
              <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4">
                <p className="text-sm font-medium text-blue-700 dark:text-blue-400 mb-3">
                  {isAr ? "تكوين ساعات الراحة" : "Quiet Hours Configuration"}
                </p>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
                      {isAr ? "من" : "From"}
                    </label>
                    <input
                      type="time"
                      defaultValue="22:00"
                      className="w-full px-3 py-2 bg-white dark:bg-slate-800 rounded-lg border border-gray-300 dark:border-gray-600"
                    />
                  </div>
                  <div>
                    <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
                      {isAr ? "إلى" : "To"}
                    </label>
                    <input
                      type="time"
                      defaultValue="08:00"
                      className="w-full px-3 py-2 bg-white dark:bg-slate-800 rounded-lg border border-gray-300 dark:border-gray-600"
                    />
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Sector-Specific Rules */}
          <div className="bg-gray-50 dark:bg-slate-800 rounded-2xl p-6 space-y-4">
            <h3 className="text-lg font-bold text-brand-ink dark:text-white">
              {t.sectors.title}
            </h3>

            <div className="space-y-4">
              <div className="bg-white dark:bg-slate-900 rounded-xl p-4">
                <h4 className="font-semibold text-brand-ink dark:text-white mb-2">
                  🏥 {t.sectors.medical.title}
                </h4>
                <ul className="space-y-1">
                  {t.sectors.medical.rules.map((rule, i) => (
                    <li key={i} className="flex items-start gap-2">
                      <span className="text-green-500 mt-0.5">•</span>
                      <span className="text-sm text-gray-600 dark:text-gray-400">
                        {rule}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>

              <div className="bg-white dark:bg-slate-900 rounded-xl p-4">
                <h4 className="font-semibold text-brand-ink dark:text-white mb-2">
                  💼 {t.sectors.financial.title}
                </h4>
                <ul className="space-y-1">
                  {t.sectors.financial.rules.map((rule, i) => (
                    <li key={i} className="flex items-start gap-2">
                      <span className="text-blue-500 mt-0.5">•</span>
                      <span className="text-sm text-gray-600 dark:text-gray-400">
                        {rule}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* Preferences & Fallbacks */}
        <div className="space-y-6">
          {/* Customer Preferences Panel */}
          <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 space-y-4">
            <h3 className="text-lg font-bold text-brand-ink dark:text-white">
              {t.preferences.title}
            </h3>

            {/* Sample Customer Preference */}
            <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl p-4">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 text-white rounded-full flex items-center justify-center font-bold">
                  {isAr ? "س" : "S"}
                </div>
                <div>
                  <p className="font-semibold text-brand-ink dark:text-white">
                    {isAr ? "سارة أحمد" : "Sarah Ahmed"}
                  </p>
                  <p className="text-xs text-gray-500">ID: #12345</p>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-xs text-gray-600 dark:text-gray-400 mb-1">
                    {t.preferences.panel.channel}
                  </p>
                  <select className="w-full px-2 py-1 text-sm bg-white dark:bg-slate-800 rounded border border-gray-300 dark:border-gray-600">
                    <option>{t.preferences.channels.whatsapp}</option>
                    <option>{t.preferences.channels.sms}</option>
                    <option>{t.preferences.channels.email}</option>
                  </select>
                </div>
                <div>
                  <p className="text-xs text-gray-600 dark:text-gray-400 mb-1">
                    {t.preferences.panel.language}
                  </p>
                  <select className="w-full px-2 py-1 text-sm bg-white dark:bg-slate-800 rounded border border-gray-300 dark:border-gray-600">
                    <option>{isAr ? "العربية" : "Arabic"}</option>
                    <option>{isAr ? "الإنجليزية" : "English"}</option>
                  </select>
                </div>
                <div>
                  <p className="text-xs text-gray-600 dark:text-gray-400 mb-1">
                    {t.preferences.panel.frequency}
                  </p>
                  <select className="w-full px-2 py-1 text-sm bg-white dark:bg-slate-800 rounded border border-gray-300 dark:border-gray-600">
                    <option>{t.preferences.frequencies.all}</option>
                    <option>{t.preferences.frequencies.important}</option>
                    <option>{t.preferences.frequencies.minimal}</option>
                  </select>
                </div>
                <div>
                  <p className="text-xs text-gray-600 dark:text-gray-400 mb-1">
                    {t.preferences.panel.types}
                  </p>
                  <div className="flex gap-1">
                    <span className="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded">
                      {isAr ? "تذكيرات" : "Reminders"}
                    </span>
                    <span className="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded">
                      {isAr ? "عروض" : "Offers"}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Channel Fallbacks */}
          <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 space-y-4">
            <h3 className="text-lg font-bold text-brand-ink dark:text-white">
              {t.fallbacks.title}
            </h3>

            <div className="space-y-3">
              {t.fallbacks.rules.map((rule, i) => (
                <div key={i} className="flex items-center gap-3">
                  <div className="px-3 py-1 bg-green-100 text-green-700 rounded-lg text-sm font-medium">
                    {rule.primary}
                  </div>
                  <span className="text-gray-400">→</span>
                  <div className="px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm font-medium">
                    {rule.fallback}
                  </div>
                  <p className="text-xs text-gray-500 flex-1">
                    {rule.condition}
                  </p>
                </div>
              ))}
            </div>
          </div>

          {/* Opt-Out Keywords */}
          <div className="bg-red-50 dark:bg-red-900/20 rounded-2xl p-6 space-y-4">
            <h3 className="text-lg font-bold text-red-700 dark:text-red-400">
              {t.keywords.title}
            </h3>

            <div className="flex flex-wrap gap-2">
              {t.keywords.list.map((keyword, i) => (
                <span
                  key={i}
                  className="px-3 py-1 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-full text-sm font-mono"
                >
                  {keyword}
                </span>
              ))}
            </div>

            <p className="text-sm text-red-600 dark:text-red-400">
              ⚠️ {t.keywords.action}
            </p>
          </div>

          {/* Consent Capture Example */}
          {doubleOptIn && (
            <div className="bg-green-50 dark:bg-green-900/20 rounded-2xl p-6">
              <h4 className="font-semibold text-green-700 dark:text-green-400 mb-3">
                {isAr ? "مثال على الموافقة المزدوجة" : "Double Opt-In Example"}
              </h4>
              <div className="space-y-2">
                <div className="bg-white dark:bg-slate-800 rounded-lg p-3">
                  <p className="text-sm text-gray-700 dark:text-gray-300">
                    {isAr
                      ? "1️⃣ العميل يسجل رقمه"
                      : "1️⃣ Customer registers number"}
                  </p>
                </div>
                <div className="bg-white dark:bg-slate-800 rounded-lg p-3">
                  <p className="text-sm text-gray-700 dark:text-gray-300">
                    {isAr
                      ? '2️⃣ إرسال رسالة تأكيد: "اكتب نعم للموافقة على استلام التذكيرات"'
                      : '2️⃣ Send confirmation: "Reply YES to receive reminders"'}
                  </p>
                </div>
                <div className="bg-white dark:bg-slate-800 rounded-lg p-3">
                  <p className="text-sm text-gray-700 dark:text-gray-300">
                    {isAr
                      ? '3️⃣ عند الرد بـ "نعم" - تفعيل الاشتراك'
                      : '3️⃣ On "YES" reply - activate subscription'}
                  </p>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}