/**
 * WhatsApp Setup Welcome Screen
 * Introduction to the WhatsApp onboarding wizard with benefits list
 */

"use client";

import type { Lang } from "@/lib/config";
import { dashboardEn } from "@/lib/config/translations/modules/dashboard.en";
import { dashboardAr } from "@/lib/config/translations/modules/dashboard.ar";
import { MessageCircle, Clock, Globe, Bell, Inbox } from "lucide-react";

interface WhatsAppSetupWelcomeProps {
  lang: Lang;
  onGetStarted: () => void;
  onSkipToCredentials: () => void;
  onUseTwilio?: () => void;
}

export default function WhatsAppSetupWelcome({
  lang,
  onGetStarted,
  onSkipToCredentials,
  onUseTwilio,
}: WhatsAppSetupWelcomeProps) {
  const isAr = lang === "ar";
  const dir = isAr ? "rtl" : "ltr";
  const t = isAr ? dashboardAr : dashboardEn;

  const benefits = [
    { icon: Clock, text: t.whatsappSetupBenefit1 },
    { icon: MessageCircle, text: t.whatsappSetupBenefit2 },
    { icon: Globe, text: t.whatsappSetupBenefit3 },
    { icon: Bell, text: t.whatsappSetupBenefit4 },
    { icon: Inbox, text: t.whatsappSetupBenefit5 },
  ];

  return (
    <div className="rounded-xl bg-white shadow-sm p-8" dir={dir}>
      <div className="max-w-2xl mx-auto text-center">
        {/* WhatsApp Icon */}
        <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-green-100 flex items-center justify-center">
          <svg
            className="w-10 h-10 text-green-600"
            viewBox="0 0 24 24"
            fill="currentColor"
          >
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
          </svg>
        </div>

        {/* Title & Subtitle */}
        <h2 className="text-2xl font-bold text-slate-900 mb-2">
          {t.whatsappSetupWelcomeTitle}
        </h2>
        <p className="text-slate-600 mb-8">{t.whatsappSetupWelcomeSubtitle}</p>

        {/* Benefits List */}
        <div
          className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8 text-left"
          dir={dir}
        >
          {benefits.map((benefit, index) => {
            const Icon = benefit.icon;
            return (
              <div
                key={index}
                className={`flex items-center gap-3 p-3 rounded-lg bg-slate-50 ${isAr ? "flex-row-reverse text-right" : ""}`}
              >
                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
                  <Icon className="w-4 h-4 text-green-600" />
                </div>
                <span className="text-sm text-slate-700">{benefit.text}</span>
              </div>
            );
          })}
        </div>

        {/* Action Buttons */}
        <div
          className={`flex flex-col sm:flex-row gap-3 justify-center ${isAr ? "sm:flex-row-reverse" : ""}`}
        >
          <button
            onClick={onGetStarted}
            className="px-6 py-3 bg-green-600 text-white font-semibold rounded-xl hover:bg-green-700 transition-colors"
          >
            {t.whatsappSetupGetStarted}
          </button>
          <button
            onClick={onSkipToCredentials}
            className="px-6 py-3 text-green-600 font-medium hover:bg-green-50 rounded-xl transition-colors"
          >
            {t.whatsappSetupSkipToCredentials}
          </button>
        </div>

        {/* Twilio alternative — separate path for orgs that prefer Twilio Sandbox */}
        {onUseTwilio && (
          <>
            <div className="my-6 flex items-center gap-3 text-xs uppercase tracking-wider text-slate-400">
              <div className="h-px flex-1 bg-slate-200" />
              {isAr ? "أو" : "or"}
              <div className="h-px flex-1 bg-slate-200" />
            </div>
            <button
              onClick={onUseTwilio}
              className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3 bg-white border-2 border-slate-200 text-slate-700 font-medium rounded-xl hover:border-emerald-300 hover:bg-emerald-50 hover:text-emerald-700 transition-all"
            >
              <span className="inline-flex items-center justify-center w-5 h-5 rounded bg-rose-500 text-white text-xs font-bold">
                T
              </span>
              {isAr ? "ربط عبر Twilio بدلاً من ذلك" : "Connect via Twilio instead"}
            </button>
          </>
        )}
      </div>
    </div>
  );
}