"use client";

import { useState } from "react";

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

export default function ReminderFlowBuilder({ lang }: Props) {
  const isAr = lang === "ar";
  const [selectedTrigger, setSelectedTrigger] = useState("booking");
  const [quietHours, setQuietHours] = useState(true);
  const [respectPrayers, setRespectPrayers] = useState(true);

  const content = {
    ar: {
      title: "منشئ تدفق التذكيرات التلقائية",
      subtitle: "اسحب وأفلت لبناء تدفق التذكيرات المخصص",
      triggers: {
        title: "المشغلات",
        items: [
          { id: "booking", label: "حجز جديد", icon: "📅" },
          { id: "update", label: "تحديث موعد", icon: "🔄" },
          { id: "noshow", label: "عدم حضور", icon: "❌" },
          { id: "visit", label: "زيارة مكتملة", icon: "✅" },
        ],
      },
      delays: {
        title: "التأخيرات",
        items: [
          { label: "قبل 48 ساعة", value: "T-48h" },
          { label: "قبل 24 ساعة", value: "T-24h" },
          { label: "قبل 6 ساعات", value: "T-6h" },
          { label: "قبل ساعة", value: "T-1h" },
        ],
      },
      templates: {
        sms: "مرحباً {{first_name}}، تذكير بموعدك {{service}} في {{date_time}} بعيادة {{location}}. للتغيير: {{reschedule_link}}",
        whatsapp:
          "تأكيد موعدك ✅\n📅 {{date_time}}\n📍 {{location}}\n👨‍⚕️ {{doctor}}\n\nهل تحتاج لتغيير الموعد؟\n{{reschedule_link}}",
        email: "الموضوع: غداً - موعد {{service}} في {{time}}",
      },
      settings: {
        quietHours: "احترام ساعات الراحة (10م - 8ص)",
        prayerTimes: "احترام أوقات الصلاة",
        timezone: "المنطقة الزمنية: الرياض (UTC+3)",
        fallback: "قناة احتياطية إذا فشل WhatsApp",
      },
      actions: {
        save: "حفظ التدفق",
        test: "اختبار",
        activate: "تفعيل",
      },
    },
    en: {
      title: "Auto Reminder Flow Builder",
      subtitle: "Drag and drop to build custom reminder flows",
      triggers: {
        title: "Triggers",
        items: [
          { id: "booking", label: "New Booking", icon: "📅" },
          { id: "update", label: "Appointment Update", icon: "🔄" },
          { id: "noshow", label: "No-Show", icon: "❌" },
          { id: "visit", label: "Visit Complete", icon: "✅" },
        ],
      },
      delays: {
        title: "Delays",
        items: [
          { label: "T-48 hours", value: "T-48h" },
          { label: "T-24 hours", value: "T-24h" },
          { label: "T-6 hours", value: "T-6h" },
          { label: "T-1 hour", value: "T-1h" },
        ],
      },
      templates: {
        sms: "Hi {{first_name}}, reminder for {{service}} on {{date_time}} at {{location}}. Change: {{reschedule_link}}. See you soon!",
        whatsapp:
          "Your booking is confirmed ✅\n📅 {{date_time}}\n📍 {{location}}\n👨‍⚕️ {{doctor}}\n\nNeed a different time?\n{{reschedule_link}}",
        email: "Subject: Tomorrow - {{service}} at {{time}}",
      },
      settings: {
        quietHours: "Respect quiet hours (10PM - 8AM)",
        prayerTimes: "Respect prayer times",
        timezone: "Timezone: Riyadh (UTC+3)",
        fallback: "Fallback channel if WhatsApp fails",
      },
      actions: {
        save: "Save Flow",
        test: "Test",
        activate: "Activate",
      },
    },
  };

  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>

      {/* Flow Builder Interface */}
      <div className="bg-gray-50 dark:bg-slate-800 rounded-3xl p-8 space-y-8">
        {/* Triggers */}
        <div className="space-y-4">
          <h3 className="text-lg font-bold text-brand-ink dark:text-white">
            {t.triggers.title}
          </h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {t.triggers.items.map((trigger) => (
              <button
                key={trigger.id}
                onClick={() => setSelectedTrigger(trigger.id)}
                className={`p-4 rounded-xl border-2 transition-all ${
                  selectedTrigger === trigger.id
                    ? "border-brand-green bg-brand-green/10"
                    : "border-gray-300 dark:border-gray-600 hover:border-brand-green"
                }`}
              >
                <span className="text-2xl">{trigger.icon}</span>
                <p className="mt-2 text-sm font-medium text-brand-ink dark:text-white">
                  {trigger.label}
                </p>
              </button>
            ))}
          </div>
        </div>

        {/* Flow Visualization */}
        <div className="bg-white dark:bg-slate-900 rounded-2xl p-6">
          <div className="flex items-center justify-between flex-wrap gap-4">
            {/* Trigger Node */}
            <div className="text-center">
              <div className="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-3xl text-white shadow-lg">
                📅
              </div>
              <p className="mt-2 text-xs font-medium text-gray-600 dark:text-gray-400">
                {isAr ? "حجز جديد" : "New Booking"}
              </p>
            </div>

            {/* Arrow */}
            <div className="text-gray-400">→</div>

            {/* Delay Nodes */}
            {t.delays.items.map((delay, i) => (
              <div key={i} className="text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold shadow-lg">
                  {delay.value}
                </div>
                <p className="mt-2 text-xs font-medium text-gray-600 dark:text-gray-400">
                  {delay.label}
                </p>
              </div>
            ))}

            {/* Action Node */}
            <div className="text-center">
              <div className="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center text-3xl text-white shadow-lg">
                ✉️
              </div>
              <p className="mt-2 text-xs font-medium text-gray-600 dark:text-gray-400">
                {isAr ? "إرسال" : "Send"}
              </p>
            </div>
          </div>
        </div>

        {/* Template Preview */}
        <div className="space-y-4">
          <h3 className="text-lg font-bold text-brand-ink dark:text-white">
            {isAr ? "معاينة القالب" : "Template Preview"}
          </h3>
          <div className="space-y-4">
            {/* SMS Preview */}
            <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-blue-600 dark:text-blue-400">📱 SMS</span>
              </div>
              <p className="text-sm text-gray-700 dark:text-gray-300">
                {t.templates.sms}
              </p>
            </div>

            {/* WhatsApp Preview */}
            <div className="bg-green-50 dark:bg-green-900/20 rounded-xl p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-green-600 dark:text-green-400">
                  💬 WhatsApp
                </span>
              </div>
              <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line">
                {t.templates.whatsapp}
              </p>
            </div>

            {/* Email Preview */}
            <div className="bg-purple-50 dark:bg-purple-900/20 rounded-xl p-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-purple-600 dark:text-purple-400">
                  📧 Email
                </span>
              </div>
              <p className="text-sm text-gray-700 dark:text-gray-300">
                {t.templates.email}
              </p>
            </div>
          </div>
        </div>

        {/* Settings */}
        <div className="space-y-4">
          <h3 className="text-lg font-bold text-brand-ink dark:text-white">
            {isAr ? "الإعدادات" : "Settings"}
          </h3>
          <div className="space-y-3">
            <label className="flex items-center gap-3">
              <input
                type="checkbox"
                checked={quietHours}
                onChange={(e) => setQuietHours(e.target.checked)}
                className="w-5 h-5 text-brand-green rounded focus:ring-brand-green"
              />
              <span className="text-gray-700 dark:text-gray-300">
                {t.settings.quietHours}
              </span>
            </label>
            <label className="flex items-center gap-3">
              <input
                type="checkbox"
                checked={respectPrayers}
                onChange={(e) => setRespectPrayers(e.target.checked)}
                className="w-5 h-5 text-brand-green rounded focus:ring-brand-green"
              />
              <span className="text-gray-700 dark:text-gray-300">
                {t.settings.prayerTimes}
              </span>
            </label>
            <div className="text-sm text-gray-600 dark:text-gray-400">
              {t.settings.timezone}
            </div>
            <div className="text-sm text-gray-600 dark:text-gray-400">
              {t.settings.fallback} → SMS
            </div>
          </div>
        </div>

        {/* Actions */}
        <div className="flex gap-4 justify-center">
          <button className="px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-xl font-semibold hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
            {t.actions.test}
          </button>
          <button className="px-6 py-3 bg-brand-green text-white rounded-xl font-semibold hover:bg-brand-greenHover transition-colors">
            {t.actions.save}
          </button>
          <button className="px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl font-semibold hover:shadow-lg transition-all">
            {t.actions.activate}
          </button>
        </div>
      </div>
    </div>
  );
}