/**
 * WhatsApp Setup Steps
 * Visual step-by-step guide with infographics for Meta API setup
 */

"use client";

import { useState } from "react";
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 StepIndicator from "@/components/DemoScheduler/components/StepIndicator";
import {
  ExternalLink,
  ChevronLeft,
  ChevronRight,
  Building2,
  Phone,
  Code2,
  KeyRound,
  Lock,
  ClipboardCheck,
} from "lucide-react";

interface WhatsAppSetupStepsProps {
  lang: Lang;
  initialStep?: number;
  onComplete: () => void;
  onBack: () => void;
}

interface StepInfo {
  title: string;
  description: string;
  Icon: React.ComponentType<{ className?: string }>;
  optional?: boolean;
}

export default function WhatsAppSetupSteps({
  lang,
  initialStep = 1,
  onComplete,
  onBack,
}: WhatsAppSetupStepsProps) {
  const isAr = lang === "ar";
  const dir = isAr ? "rtl" : "ltr";
  const t = isAr ? dashboardAr : dashboardEn;
  const [currentStep, setCurrentStep] = useState(initialStep);

  const steps: StepInfo[] = [
    {
      title: t.whatsappSetupStep1Title,
      description: t.whatsappSetupStep1Desc,
      Icon: Building2,
    },
    {
      title: t.whatsappSetupStep2Title,
      description: t.whatsappSetupStep2Desc,
      Icon: Phone,
    },
    {
      title: t.whatsappSetupStep3Title,
      description: t.whatsappSetupStep3Desc,
      Icon: Code2,
    },
    {
      title: t.whatsappSetupStep4Title,
      description: t.whatsappSetupStep4Desc,
      Icon: KeyRound,
    },
    {
      title: t.whatsappSetupStep5Title,
      description: t.whatsappSetupStep5Desc,
      Icon: Lock,
    },
    {
      title: t.whatsappSetupStep6Title,
      description: t.whatsappSetupStep6Desc,
      Icon: ClipboardCheck,
      optional: true,
    },
  ];

  const stepLabels = steps.map((s) => s.title);
  const currentStepData = steps[currentStep - 1];
  const isLastStep = currentStep === steps.length;
  const isFirstStep = currentStep === 1;

  const handleNext = () => {
    if (isLastStep) {
      onComplete();
    } else {
      setCurrentStep((prev) => prev + 1);
    }
  };

  const handlePrevious = () => {
    if (isFirstStep) {
      onBack();
    } else {
      setCurrentStep((prev) => prev - 1);
    }
  };

  return (
    <div className="rounded-xl bg-white shadow-sm p-6" dir={dir}>
      {/* Step Indicator */}
      <div className="mb-8">
        <StepIndicator
          currentStep={currentStep}
          totalSteps={steps.length}
          stepLabels={stepLabels}
          dir={dir}
        />
      </div>

      {/* Step Content */}
      <div className="max-w-3xl mx-auto">
        {/* Step Visual — large icon on tinted background */}
        <div className="relative mb-6 rounded-2xl overflow-hidden bg-gradient-to-br from-green-50 to-emerald-100 border border-green-200 py-16 flex flex-col items-center justify-center">
          <div className="w-24 h-24 rounded-full bg-white shadow-md flex items-center justify-center mb-4">
            <currentStepData.Icon className="w-12 h-12 text-green-600" />
          </div>
          <div className="text-7xl font-bold text-green-200/80 leading-none select-none">
            {String(currentStep).padStart(2, "0")}
          </div>
          {currentStepData.optional && (
            <span className="absolute top-3 right-3 px-2 py-1 text-xs font-medium bg-amber-100 text-amber-700 rounded">
              {t.whatsappSetupOptional}
            </span>
          )}
        </div>

        {/* Step Title & Description */}
        <div className="text-center mb-6">
          <h3 className="text-xl font-bold text-slate-900 mb-2">
            {currentStepData.title}
          </h3>
          <p className="text-slate-600">{currentStepData.description}</p>
        </div>

        {/* Meta Console Link */}
        <div className="flex justify-center mb-8">
          <a
            href="https://developers.facebook.com/apps"
            target="_blank"
            rel="noopener noreferrer"
            className={`inline-flex items-center gap-2 text-green-600 hover:text-green-700 font-medium ${isAr ? "flex-row-reverse" : ""}`}
          >
            <ExternalLink className="w-4 h-4" />
            {t.whatsappSetupOpenMetaConsole}
          </a>
        </div>

        {/* Navigation Buttons */}
        <div
          className={`flex items-center justify-between ${isAr ? "flex-row-reverse" : ""}`}
        >
          <button
            onClick={handlePrevious}
            className={`flex items-center gap-2 px-5 py-2.5 text-slate-600 hover:text-slate-900 font-medium transition-colors ${isAr ? "flex-row-reverse" : ""}`}
          >
            {isAr ? (
              <ChevronRight className="w-4 h-4" />
            ) : (
              <ChevronLeft className="w-4 h-4" />
            )}
            {t.whatsappSetupPrevious}
          </button>

          <button
            onClick={handleNext}
            className={`flex items-center gap-2 px-6 py-2.5 bg-green-600 text-white font-semibold rounded-xl hover:bg-green-700 transition-colors ${isAr ? "flex-row-reverse" : ""}`}
          >
            {isLastStep
              ? t.whatsappSetupContinueToCredentials
              : t.whatsappSetupNext}
            {!isLastStep &&
              (isAr ? (
                <ChevronLeft className="w-4 h-4" />
              ) : (
                <ChevronRight className="w-4 h-4" />
              ))}
          </button>
        </div>
      </div>
    </div>
  );
}