/**
 * WhatsApp Setup Success
 * Success screen shown after credentials are saved
 */

"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 { CheckCircle, MessageCircle, Lightbulb } from "lucide-react";

interface WhatsAppSetupSuccessProps {
  lang: Lang;
  displayNumber?: string;
  businessName?: string;
  onGoToConversations: () => void;
}

export default function WhatsAppSetupSuccess({
  lang,
  displayNumber,
  businessName,
  onGoToConversations,
}: WhatsAppSetupSuccessProps) {
  const isAr = lang === "ar";
  const dir = isAr ? "rtl" : "ltr";
  const t = isAr ? dashboardAr : dashboardEn;

  return (
    <div className="rounded-xl bg-white shadow-sm p-8" dir={dir}>
      <div className="max-w-md mx-auto text-center">
        {/* Success Animation */}
        <div className="relative w-24 h-24 mx-auto mb-6">
          {/* Animated ring */}
          <div className="absolute inset-0 rounded-full bg-green-100 animate-ping opacity-25" />
          {/* Static circle with icon */}
          <div className="relative w-24 h-24 rounded-full bg-green-100 flex items-center justify-center">
            <CheckCircle className="w-12 h-12 text-green-600" />
          </div>
        </div>

        {/* Success Title */}
        <h2 className="text-2xl font-bold text-slate-900 mb-2">
          {t.whatsappSetupSuccessTitle}
        </h2>
        <p className="text-slate-600 mb-6">{t.whatsappSetupSuccessSubtitle}</p>

        {/* Connection Details */}
        {(displayNumber || businessName) && (
          <div className="bg-slate-50 rounded-xl p-4 mb-6 text-left" dir={dir}>
            {displayNumber && (
              <div
                className={`flex items-center justify-between py-2 ${isAr ? "flex-row-reverse" : ""}`}
              >
                <span className="text-sm text-slate-500">
                  {t.whatsappSetupConnectedNumber}
                </span>
                <span
                  className="text-sm font-semibold text-slate-900"
                  dir="ltr"
                >
                  {displayNumber}
                </span>
              </div>
            )}
            {businessName && (
              <div
                className={`flex items-center justify-between py-2 ${displayNumber ? "border-t border-slate-200" : ""} ${isAr ? "flex-row-reverse" : ""}`}
              >
                <span className="text-sm text-slate-500">
                  {t.whatsappSetupBusinessName}
                </span>
                <span className="text-sm font-semibold text-slate-900">
                  {businessName}
                </span>
              </div>
            )}
          </div>
        )}

        {/* Quick Tip */}
        <div
          className={`bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6 ${isAr ? "text-right" : "text-left"}`}
        >
          <div
            className={`flex items-start gap-3 ${isAr ? "flex-row-reverse" : ""}`}
          >
            <Lightbulb className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
            <div>
              <p className="text-sm font-semibold text-amber-900">
                {t.whatsappSetupQuickTip}
              </p>
              <p className="text-sm text-amber-800 mt-1">
                {t.whatsappSetupQuickTipText}
              </p>
            </div>
          </div>
        </div>

        {/* Go to Conversations Button */}
        <button
          onClick={onGoToConversations}
          className={`w-full flex items-center justify-center gap-2 px-6 py-3 bg-green-600 text-white font-semibold rounded-xl hover:bg-green-700 transition-colors ${isAr ? "flex-row-reverse" : ""}`}
        >
          <MessageCircle className="w-5 h-5" />
          {t.whatsappSetupGoToConversations}
        </button>
      </div>
    </div>
  );
}