"use client";

import { useState } from "react";

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

interface MessageTemplate {
  subject: string;
  body: string;
}

export default function PromotionsCampaigns({ lang }: Props) {
  const isAr = lang === "ar";
  const [campaignType, setCampaignType] = useState("promotion");

  const content = {
    ar: {
      title: "حملات الترويج (SMS والبريد الإلكتروني)",
      subtitle: "حملات مستهدفة مع كوبونات ومؤقتات وروابط عميقة",
      campaigns: {
        title: "أنواع الحملات",
        types: [
          { id: "promotion", label: "عرض ترويجي", icon: "🎁" },
          { id: "abandoned", label: "سلة متروكة", icon: "🛒" },
          { id: "drip", label: "تسلسل تلقائي", icon: "💧" },
          { id: "seasonal", label: "موسمي", icon: "🎄" },
        ],
      },
      builder: {
        coupon: {
          title: "منشئ الكوبونات",
          code: "الكود",
          type: "النوع",
          types: {
            amount: "مبلغ ثابت",
            percentage: "نسبة مئوية",
            service: "خدمة مجانية",
          },
          conditions: {
            minSpend: "الحد الأدنى للإنفاق",
            expiry: "تاريخ الانتهاء",
            usage: "عدد الاستخدامات",
          },
        },
        templates: {
          title: "قوالب جاهزة",
          abandoned: {
            subject: "نسيت شيئاً! 🛒",
            body: "ما زلت تفكر في {{service}}؟ أكمل حجزك الآن واحصل على خصم 20%! استخدم الكود {{coupon}} - ينتهي في {{expiry}}",
          },
          promotion: {
            subject: "عرض خاص لك! 💝",
            body: "احصل على {{discount}}% خصم على {{service}}. احجز الآن: {{booking_link}}. الكود: {{coupon}}",
          },
          reminder: {
            subject: "آخر يوم للعرض! ⏰",
            body: "عرضك الخاص ينتهي اليوم! لا تفوت خصم {{discount}}% على {{service}}. احجز الآن: {{link}}",
          },
        },
        schedule: {
          title: "جدولة التسلسل",
          steps: [
            { day: 0, action: "إرسال أول", desc: "رسالة ترحيب + عرض" },
            { day: 2, action: "تذكير", desc: "تذكير بالعرض" },
            { day: 5, action: "حافز إضافي", desc: "خصم إضافي 10%" },
            { day: 7, action: "آخر فرصة", desc: "ينتهي اليوم!" },
          ],
        },
      },
      analytics: {
        title: "أداء الحملة",
        metrics: [
          { label: "معدل الفتح", value: "68%", trend: "up" },
          { label: "معدل النقر", value: "24%", trend: "up" },
          { label: "معدل التحويل", value: "12%", trend: "stable" },
          { label: "العائد", value: "8,430 ريال", trend: "up" },
        ],
      },
      settings: {
        respectQuietHours: "احترام ساعات الراحة",
        brandSafe: "قوالب آمنة للعلامة التجارية",
        rtlReady: "جاهز للعربية (RTL)",
        throttle: "تحديد السرعة للحماية",
      },
    },
    en: {
      title: "Promotions Campaigns (SMS & Email)",
      subtitle: "Targeted campaigns with coupons, timers, and deep links",
      campaigns: {
        title: "Campaign Types",
        types: [
          { id: "promotion", label: "Promotion", icon: "🎁" },
          { id: "abandoned", label: "Abandoned Cart", icon: "🛒" },
          { id: "drip", label: "Drip Sequence", icon: "💧" },
          { id: "seasonal", label: "Seasonal", icon: "🎄" },
        ],
      },
      builder: {
        coupon: {
          title: "Coupon Generator",
          code: "Code",
          type: "Type",
          types: {
            amount: "Fixed Amount",
            percentage: "Percentage",
            service: "Free Service",
          },
          conditions: {
            minSpend: "Minimum Spend",
            expiry: "Expiry Date",
            usage: "Usage Limit",
          },
        },
        templates: {
          title: "Ready Templates",
          abandoned: {
            subject: "You forgot something! 🛒",
            body: "Still thinking about {{service}}? Complete your booking now and get 20% off! Use code {{coupon}} - expires {{expiry}}",
          },
          promotion: {
            subject: "Special offer for you! 💝",
            body: "Get {{discount}}% off on {{service}}. Book now: {{booking_link}}. Code: {{coupon}}",
          },
          reminder: {
            subject: "Last day for offer! ⏰",
            body: "Your special offer ends today! Don't miss {{discount}}% off on {{service}}. Book now: {{link}}",
          },
        },
        schedule: {
          title: "Drip Schedule",
          steps: [
            { day: 0, action: "Initial Send", desc: "Welcome + offer" },
            { day: 2, action: "Reminder", desc: "Offer reminder" },
            { day: 5, action: "Incentive", desc: "Extra 10% off" },
            { day: 7, action: "Last Chance", desc: "Expires today!" },
          ],
        },
      },
      analytics: {
        title: "Campaign Performance",
        metrics: [
          { label: "Open Rate", value: "68%", trend: "up" },
          { label: "Click Rate", value: "24%", trend: "up" },
          { label: "Conversion", value: "12%", trend: "stable" },
          { label: "Revenue", value: "SAR 8,430", trend: "up" },
        ],
      },
      settings: {
        respectQuietHours: "Respect quiet hours",
        brandSafe: "Brand-safe templates",
        rtlReady: "RTL & Arabic ready",
        throttle: "Throttling for safety",
      },
    },
  };

  const t = content[lang];

  const getTrendIcon = (trend: string) => {
    switch (trend) {
      case "up":
        return "↑";
      case "down":
        return "↓";
      default:
        return "→";
    }
  };

  const getTrendColor = (trend: string) => {
    switch (trend) {
      case "up":
        return "text-green-600";
      case "down":
        return "text-red-600";
      default:
        return "text-gray-600";
    }
  };

  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>

      {/* Campaign Types */}
      <div className="space-y-4">
        <h3 className="text-lg font-bold text-brand-ink dark:text-white">
          {t.campaigns.title}
        </h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {t.campaigns.types.map((type) => (
            <button
              key={type.id}
              onClick={() => setCampaignType(type.id)}
              className={`p-4 rounded-xl border-2 transition-all ${
                campaignType === type.id
                  ? "border-brand-green bg-brand-green/10"
                  : "border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-800 hover:border-brand-green"
              }`}
            >
              <div className="text-3xl mb-2">{type.icon}</div>
              <p className="text-sm font-medium text-brand-ink dark:text-white">
                {type.label}
              </p>
            </button>
          ))}
        </div>
      </div>

      <div className="grid lg:grid-cols-2 gap-8">
        {/* Coupon Builder */}
        <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.builder.coupon.title}
            </h3>

            <div className="space-y-4">
              {/* Coupon Preview */}
              <div className="bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl p-6 text-center">
                <p className="text-sm opacity-90 mb-2">
                  {isAr ? "كود الخصم" : "Discount Code"}
                </p>
                <p className="text-3xl font-bold font-mono">SAVE20</p>
                <p className="text-lg mt-2">20% OFF</p>
                <p className="text-sm opacity-90 mt-1">
                  {isAr ? "ينتهي في 7 أيام" : "Expires in 7 days"}
                </p>
              </div>

              {/* Coupon Settings */}
              <div className="space-y-3">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {t.builder.coupon.code}
                  </label>
                  <input
                    type="text"
                    defaultValue="SAVE20"
                    className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-600"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {t.builder.coupon.type}
                  </label>
                  <select className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-600">
                    <option>{t.builder.coupon.types.percentage}</option>
                    <option>{t.builder.coupon.types.amount}</option>
                    <option>{t.builder.coupon.types.service}</option>
                  </select>
                </div>

                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      {t.builder.coupon.conditions.minSpend}
                    </label>
                    <input
                      type="number"
                      placeholder="500"
                      className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-600"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      {t.builder.coupon.conditions.usage}
                    </label>
                    <input
                      type="number"
                      placeholder="100"
                      className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-600"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Drip Schedule */}
          <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.builder.schedule.title}
            </h3>

            <div className="space-y-3">
              {t.builder.schedule.steps.map((step, i) => (
                <div key={i} className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-brand-green text-white rounded-full flex items-center justify-center font-bold">
                    D{step.day}
                  </div>
                  <div className="flex-1">
                    <p className="font-medium text-brand-ink dark:text-white">
                      {step.action}
                    </p>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      {step.desc}
                    </p>
                  </div>
                  <label className="flex items-center">
                    <input
                      type="checkbox"
                      defaultChecked
                      className="w-4 h-4 text-brand-green rounded"
                    />
                  </label>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Templates & Analytics */}
        <div className="space-y-6">
          {/* Message Templates */}
          <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.builder.templates.title}
            </h3>

            <div className="space-y-3">
              {Object.entries(t.builder.templates).map(([key, template]) => {
                if (key === "title") return null;
                const messageTemplate = template as MessageTemplate;
                return (
                  <div
                    key={key}
                    className="p-4 bg-gray-50 dark:bg-gray-800 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer"
                  >
                    <div className="flex items-center gap-2 mb-2">
                      <span className="text-sm font-semibold text-brand-green">
                        {key === "abandoned"
                          ? "🛒"
                          : key === "promotion"
                            ? "🎁"
                            : "⏰"}
                      </span>
                      <span className="text-sm font-semibold text-brand-ink dark:text-white">
                        {messageTemplate.subject}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      {messageTemplate.body}
                    </p>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Campaign Analytics */}
          <div className="bg-gradient-to-br from-white to-gray-50 dark:from-slate-900 dark:to-slate-800 rounded-2xl p-6 space-y-4">
            <h3 className="text-lg font-bold text-brand-ink dark:text-white">
              {t.analytics.title}
            </h3>

            <div className="grid grid-cols-2 gap-4">
              {t.analytics.metrics.map((metric, i) => (
                <div
                  key={i}
                  className="bg-white dark:bg-slate-900 rounded-xl p-4"
                >
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-sm text-gray-600 dark:text-gray-400">
                      {metric.label}
                    </span>
                    <span
                      className={`text-sm font-bold ${getTrendColor(metric.trend)}`}
                    >
                      {getTrendIcon(metric.trend)}
                    </span>
                  </div>
                  <p className="text-2xl font-bold text-brand-ink dark:text-white">
                    {metric.value}
                  </p>
                </div>
              ))}
            </div>

            {/* Heatmap */}
            <div className="bg-white dark:bg-slate-900 rounded-xl p-4">
              <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                {isAr ? "أفضل أوقات الإرسال" : "Best Send Times"}
              </p>
              <div className="grid grid-cols-7 gap-1">
                {[...Array(7)].map((_, day) => (
                  <div key={day} className="space-y-1">
                    {[...Array(4)].map((_, hour) => (
                      <div
                        key={hour}
                        className={`h-4 rounded ${
                          Math.random() > 0.5
                            ? "bg-green-500"
                            : Math.random() > 0.3
                              ? "bg-yellow-500"
                              : "bg-gray-300 dark:bg-gray-600"
                        }`}
                      />
                    ))}
                  </div>
                ))}
              </div>
              <div className="flex justify-between mt-2">
                <span className="text-xs text-gray-500">
                  {isAr ? "الأحد" : "Sun"}
                </span>
                <span className="text-xs text-gray-500">
                  {isAr ? "السبت" : "Sat"}
                </span>
              </div>
            </div>
          </div>

          {/* Settings */}
          <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 space-y-3">
            {Object.entries(t.settings).map(([key, label]) => (
              <label key={key} className="flex items-center gap-3">
                <input
                  type="checkbox"
                  defaultChecked
                  className="w-5 h-5 text-brand-green rounded focus:ring-brand-green"
                />
                <span className="text-gray-700 dark:text-gray-300">
                  {label}
                </span>
              </label>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}