"use client";

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

type MetricData = {
  label: string;
  value: string;
  change: string;
  trend: "up" | "down";
};

export default function OwnerDigest({ lang }: Props) {
  const isAr = lang === "ar";

  const content = {
    ar: {
      title: "تقرير الأداء والملخص الأسبوعي",
      subtitle: "تحليلات مفصلة وتقارير تلقائية للمالكين",
      metrics: {
        title: "مؤشرات الأداء الرئيسية",
        delivery: {
          label: "معدل التسليم",
          value: "99.2%",
          change: "+0.3%",
          trend: "up",
        },
        read: {
          label: "معدل القراءة",
          value: "87%",
          change: "+5%",
          trend: "up",
        },
        reply: {
          label: "معدل الرد",
          value: "34%",
          change: "-2%",
          trend: "down",
        },
        noshow: {
          label: "تقليل عدم الحضور",
          value: "62%",
          change: "+8%",
          trend: "up",
        },
      },
      digest: {
        title: "الملخص الأسبوعي",
        period: "26 نوفمبر - 2 ديسمبر 2024",
        highlights: [
          { metric: "الرسائل المرسلة", value: "3,542", change: "+12%" },
          { metric: "مواعيد من قائمة الانتظار", value: "28", change: "+40%" },
          { metric: "إيرادات من العروض", value: "12,430 ريال", change: "+18%" },
          { metric: "وقت الاستجابة", value: "4.2 دقيقة", change: "-23%" },
        ],
      },
      insights: {
        title: "رؤى ذكية",
        items: [
          {
            icon: "🎯",
            title: "أفضل شريحة",
            desc: "الخاملون 60-90 يوم",
            metric: "معدل عودة 35%",
            action: "استهدف المزيد",
          },
          {
            icon: "⏰",
            title: "أفضل وقت إرسال",
            desc: "الثلاثاء 10 صباحاً",
            metric: "معدل فتح 78%",
            action: "جدول المزيد",
          },
          {
            icon: "📱",
            title: "أفضل قناة",
            desc: "WhatsApp",
            metric: "معدل تفاعل 45%",
            action: "زيادة الاستخدام",
          },
          {
            icon: "🏆",
            title: "أفضل قالب",
            desc: "تذكير T-24h",
            metric: "معدل تأكيد 89%",
            action: "استمر",
          },
        ],
      },
      templates: {
        title: "أداء القوالب",
        best: [
          { name: "تذكير الموعد", sent: 1234, opened: "92%", clicked: "67%" },
          {
            name: "عرض نهاية الأسبوع",
            sent: 567,
            opened: "78%",
            clicked: "34%",
          },
          {
            name: "متابعة ما بعد الزيارة",
            sent: 890,
            opened: "84%",
            clicked: "23%",
          },
        ],
      },
      heatmap: {
        title: "خريطة حرارية للإرسال",
        days: [
          "الأحد",
          "الإثنين",
          "الثلاثاء",
          "الأربعاء",
          "الخميس",
          "الجمعة",
          "السبت",
        ],
        hours: ["8ص", "10ص", "12م", "2م", "4م", "6م", "8م"],
      },
      recommendations: {
        title: "توصيات الأسبوع القادم",
        items: [
          "زيادة رسائل WhatsApp بنسبة 20% - أداء أفضل من SMS",
          "تفعيل حملة للخاملين يوم الثلاثاء 10 صباحاً",
          "اختبار قالب جديد للتذكير T-6h مع خريطة",
          "تقليل الرسائل يوم الجمعة - معدل فتح منخفض",
        ],
      },
    },
    en: {
      title: "Performance Analytics & Owner Digest",
      subtitle: "Detailed analytics and automated reports for owners",
      metrics: {
        title: "Key Performance Indicators",
        delivery: {
          label: "Delivery Rate",
          value: "99.2%",
          change: "+0.3%",
          trend: "up",
        },
        read: {
          label: "Read Rate",
          value: "87%",
          change: "+5%",
          trend: "up",
        },
        reply: {
          label: "Reply Rate",
          value: "34%",
          change: "-2%",
          trend: "down",
        },
        noshow: {
          label: "No-Show Reduction",
          value: "62%",
          change: "+8%",
          trend: "up",
        },
      },
      digest: {
        title: "Weekly Digest",
        period: "Nov 26 - Dec 2, 2024",
        highlights: [
          { metric: "Messages Sent", value: "3,542", change: "+12%" },
          { metric: "Filled from Waitlist", value: "28", change: "+40%" },
          {
            metric: "Revenue from Promos",
            value: "SAR 12,430",
            change: "+18%",
          },
          { metric: "Response Time", value: "4.2 min", change: "-23%" },
        ],
      },
      insights: {
        title: "Smart Insights",
        items: [
          {
            icon: "🎯",
            title: "Top Segment",
            desc: "Lapsed 60-90 days",
            metric: "35% return rate",
            action: "Target more",
          },
          {
            icon: "⏰",
            title: "Best Send Time",
            desc: "Tuesday 10 AM",
            metric: "78% open rate",
            action: "Schedule more",
          },
          {
            icon: "📱",
            title: "Top Channel",
            desc: "WhatsApp",
            metric: "45% engagement",
            action: "Increase usage",
          },
          {
            icon: "🏆",
            title: "Best Template",
            desc: "T-24h reminder",
            metric: "89% confirm rate",
            action: "Keep using",
          },
        ],
      },
      templates: {
        title: "Template Performance",
        best: [
          {
            name: "Appointment Reminder",
            sent: 1234,
            opened: "92%",
            clicked: "67%",
          },
          { name: "Weekend Offer", sent: 567, opened: "78%", clicked: "34%" },
          {
            name: "Post-Visit Follow-up",
            sent: 890,
            opened: "84%",
            clicked: "23%",
          },
        ],
      },
      heatmap: {
        title: "Send Time Heatmap",
        days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
        hours: ["8AM", "10AM", "12PM", "2PM", "4PM", "6PM", "8PM"],
      },
      recommendations: {
        title: "Next Week Recommendations",
        items: [
          "Increase WhatsApp messages by 20% - better performance than SMS",
          "Launch dormant campaign Tuesday 10 AM",
          "Test new T-6h reminder template with map",
          "Reduce Friday messages - low open rate",
        ],
      },
    },
  };

  const t = content[lang];

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

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

  const getHeatmapIntensity = () => {
    const random = Math.random();
    if (random > 0.7) return "bg-green-500";
    if (random > 0.4) return "bg-yellow-500";
    if (random > 0.2) return "bg-orange-500";
    return "bg-gray-300 dark:bg-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>

      {/* KPI Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {Object.entries(t.metrics).map(([key, metric]) => {
          if (key === "title") return null;
          const m = metric as MetricData;
          return (
            <div
              key={key}
              className="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-lg"
            >
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                {m.label}
              </p>
              <div className="flex items-baseline gap-2">
                <span className="text-3xl font-bold text-brand-ink dark:text-white">
                  {m.value}
                </span>
                <span
                  className={`text-sm font-semibold ${getTrendColor(m.trend)}`}
                >
                  {m.change} {getTrendIcon(m.trend)}
                </span>
              </div>
            </div>
          );
        })}
      </div>

      {/* Weekly Digest */}
      <div className="bg-gradient-to-br from-purple-600 to-pink-600 text-white rounded-3xl p-8">
        <div className="space-y-6">
          <div>
            <h3 className="text-2xl font-bold mb-2">{t.digest.title}</h3>
            <p className="text-purple-100">{t.digest.period}</p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {t.digest.highlights.map((highlight, i) => (
              <div key={i}>
                <p className="text-purple-100 text-sm mb-1">
                  {highlight.metric}
                </p>
                <div className="flex items-baseline gap-2">
                  <span className="text-2xl font-bold">{highlight.value}</span>
                  <span className="text-sm text-green-300">
                    {highlight.change}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid lg:grid-cols-2 gap-8">
        {/* Smart Insights */}
        <div className="space-y-4">
          <h3 className="text-lg font-bold text-brand-ink dark:text-white">
            {t.insights.title}
          </h3>
          <div className="grid grid-cols-2 gap-4">
            {t.insights.items.map((insight, i) => (
              <div
                key={i}
                className="bg-white dark:bg-slate-900 rounded-xl p-4 shadow-lg hover:shadow-xl transition-shadow"
              >
                <div className="text-3xl mb-2">{insight.icon}</div>
                <h4 className="font-semibold text-brand-ink dark:text-white text-sm">
                  {insight.title}
                </h4>
                <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
                  {insight.desc}
                </p>
                <p className="text-lg font-bold text-brand-green mt-2">
                  {insight.metric}
                </p>
                <button className="text-xs text-blue-600 hover:text-blue-700 mt-2">
                  {insight.action} →
                </button>
              </div>
            ))}
          </div>
        </div>

        {/* Template Performance */}
        <div className="space-y-4">
          <h3 className="text-lg font-bold text-brand-ink dark:text-white">
            {t.templates.title}
          </h3>
          <div className="bg-gray-50 dark:bg-slate-800 rounded-2xl p-6">
            <div className="space-y-3">
              {t.templates.best.map((template, i) => (
                <div key={i} className="flex items-center justify-between">
                  <div className="flex-1">
                    <p className="font-medium text-brand-ink dark:text-white">
                      {template.name}
                    </p>
                    <p className="text-xs text-gray-500">
                      {isAr ? "مرسل:" : "Sent:"} {template.sent}
                    </p>
                  </div>
                  <div className="flex gap-4">
                    <div className="text-center">
                      <p className="text-sm font-bold text-green-600">
                        {template.opened}
                      </p>
                      <p className="text-xs text-gray-500">
                        {isAr ? "فتح" : "Open"}
                      </p>
                    </div>
                    <div className="text-center">
                      <p className="text-sm font-bold text-blue-600">
                        {template.clicked}
                      </p>
                      <p className="text-xs text-gray-500">
                        {isAr ? "نقر" : "Click"}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Send Time Heatmap */}
      <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-lg">
        <h3 className="text-lg font-bold text-brand-ink dark:text-white mb-4">
          {t.heatmap.title}
        </h3>
        <div className="space-y-4">
          <div className="flex gap-4">
            <div className="w-12"></div>
            {t.heatmap.hours.map((hour, i) => (
              <div key={i} className="flex-1 text-center">
                <span className="text-xs text-gray-500">{hour}</span>
              </div>
            ))}
          </div>
          {t.heatmap.days.map((day, dayIdx) => (
            <div key={dayIdx} className="flex gap-4 items-center">
              <div className="w-12 text-xs text-gray-600 dark:text-gray-400">
                {day}
              </div>
              {t.heatmap.hours.map((_, hourIdx) => (
                <div
                  key={hourIdx}
                  className={`flex-1 h-8 rounded ${getHeatmapIntensity()}`}
                />
              ))}
            </div>
          ))}
        </div>
        <div className="flex items-center gap-4 mt-4 justify-center">
          <span className="text-xs text-gray-500">
            {isAr ? "منخفض" : "Low"}
          </span>
          <div className="flex gap-1">
            <div className="w-4 h-4 bg-gray-300 rounded"></div>
            <div className="w-4 h-4 bg-orange-500 rounded"></div>
            <div className="w-4 h-4 bg-yellow-500 rounded"></div>
            <div className="w-4 h-4 bg-green-500 rounded"></div>
          </div>
          <span className="text-xs text-gray-500">
            {isAr ? "عالي" : "High"}
          </span>
        </div>
      </div>

      {/* Recommendations */}
      <div className="bg-gradient-to-r from-brand-green to-emerald-600 text-white rounded-2xl p-6">
        <h3 className="text-lg font-bold mb-4">{t.recommendations.title}</h3>
        <ul className="space-y-3">
          {t.recommendations.items.map((item, i) => (
            <li key={i} className="flex items-start gap-3">
              <span className="text-white/80 mt-0.5">💡</span>
              <span className="text-sm text-white/90">{item}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Email Digest Preview */}
      <div className="bg-gray-50 dark:bg-slate-800 rounded-2xl p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-bold text-brand-ink dark:text-white">
            {isAr ? "بريد الملخص الأسبوعي" : "Weekly Email Digest"}
          </h3>
          <button className="px-4 py-2 bg-brand-green text-white rounded-xl text-sm font-semibold hover:bg-brand-greenHover">
            {isAr ? "إرسال الآن" : "Send Now"}
          </button>
        </div>
        <div className="bg-white dark:bg-slate-900 rounded-xl p-4">
          <p className="text-sm text-gray-600 dark:text-gray-400">
            <span className="font-semibold">{isAr ? "إلى:" : "To:"}</span>{" "}
            owner@clinic.com
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
            <span className="font-semibold">
              {isAr ? "الموضوع:" : "Subject:"}
            </span>{" "}
            {isAr
              ? "📊 ملخصك الأسبوعي: +18% في الإيرادات، -62% عدم الحضور"
              : "📊 Your Weekly Digest: +18% Revenue, -62% No-Shows"}
          </p>
        </div>
      </div>
    </div>
  );
}