"use client";

import { useState, useEffect, useMemo } from "react";
import { Loader2 } from "lucide-react";

interface DashboardLoadingScreenProps {
  isAr: boolean;
}

export function DashboardLoadingScreen({ isAr }: DashboardLoadingScreenProps) {
  const STEP_DURATION_MS = 500;

  const checkpoints = useMemo(
    () =>
      isAr
        ? [
            "جلب آخر المواعيد",
            "تجهيز المحادثات",
            "تحديث التقارير",
            "تأكيد صلاحيات الحساب",
          ]
        : [
            "Fetching latest appointments",
            "Preparing conversations",
            "Updating analytics",
            "Confirming account access",
          ],
    [isAr],
  );

  const [stepIndex, setStepIndex] = useState(0);

  useEffect(() => {
    setStepIndex(0);
    const timer = setInterval(() => {
      setStepIndex((prev) => {
        const next = Math.min(prev + 1, checkpoints.length);
        if (next === checkpoints.length) clearInterval(timer);
        return next;
      });
    }, STEP_DURATION_MS);
    return () => clearInterval(timer);
  }, [checkpoints]);

  const progress = Math.min((stepIndex / checkpoints.length) * 100, 100);

  return (
    <div
      className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-emerald-900 to-slate-900 px-6 text-white"
      dir={isAr ? "rtl" : "ltr"}
    >
      <div className="relative w-full max-w-xl overflow-hidden rounded-3xl border border-white/10 bg-white/5 p-10 shadow-2xl backdrop-blur-xl">
        <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-white/5 to-emerald-500/10" />
        <div className="relative space-y-6" aria-live="polite">
          <div className="flex items-center gap-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-emerald-300/30 bg-emerald-400/10">
              <Loader2 className="h-6 w-6 animate-spin text-emerald-200" />
            </div>
            <div>
              <p className="text-lg font-semibold">
                {isAr ? "جاري تجهيز لوحة التحكم" : "Setting up your dashboard"}
              </p>
              <p className="text-sm text-emerald-100/80">
                {isAr
                  ? "نقوم بمزامنة المواعيد والرسائل والبيانات، يرجى الانتظار لحظات"
                  : "Syncing bookings, messages, and analytics. Please hold on a moment."}
              </p>
            </div>
          </div>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            {checkpoints.map((label, idx) => {
              const done = idx < stepIndex;
              const active = idx === stepIndex;
              return (
                <div
                  key={idx}
                  className={`flex items-center gap-3 rounded-2xl px-4 py-3 border bg-white/5 transition-colors ${
                    done
                      ? "border-emerald-200/60 bg-emerald-500/10"
                      : "border-white/10"
                  }`}
                >
                  <span
                    className={`inline-flex h-3 w-3 items-center justify-center rounded-full ${done ? "bg-emerald-300" : "bg-emerald-300/70"}`}
                  >
                    {done ? (
                      <span className="block h-3 w-3 rounded-full border border-white/40 bg-emerald-400" />
                    ) : active ? (
                      <span className="block h-3 w-3 animate-ping rounded-full bg-emerald-200" />
                    ) : null}
                  </span>
                  <span className="text-sm text-emerald-50">{label}</span>
                </div>
              );
            })}
          </div>
          <div className="space-y-2">
            <div className="h-2 w-full overflow-hidden rounded-full bg-white/10">
              <div
                className="h-full rounded-full bg-gradient-to-r from-emerald-400 via-emerald-300 to-emerald-200 transition-all duration-500"
                style={{ width: `${progress}%` }}
              />
            </div>
            <div className="flex items-center gap-2 text-xs text-emerald-100/70">
              <span className="flex h-8 w-8 items-center justify-center rounded-full border border-emerald-200/30 bg-emerald-400/10 text-emerald-50">
                ✓
              </span>
              <span>
                {isAr
                  ? "سيتم التحويل تلقائياً عند اكتمال التحميل"
                  : "You will land on the dashboard as soon as the data is ready."}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default DashboardLoadingScreen;