"use client";

import { useEffect, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";

function SuccessUI() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const isConnected = searchParams.get("connected") === "1";

  useEffect(() => {
    if (isConnected) {
      const timer = setTimeout(() => {
        // Redirecting to your dashboard after success
        router.push("/amazon/dashboard");
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [isConnected, router]);

  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] text-center p-6">
      {isConnected ? (
        <div className="animate-in fade-in zoom-in duration-500">
          <div className="bg-green-100 p-6 rounded-full inline-block mb-4">
            <svg className="w-16 h-16 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <h1 className="text-3xl font-bold text-gray-800">Store Connected!</h1>
          <p className="text-gray-600 mt-2">We've successfully linked your Amazon account to Eleantz.</p>
          <p className="text-sm text-gray-400 mt-8">Redirecting you to your dashboard...</p>
        </div>
      ) : (
        <div className="text-red-500">
          <h1 className="text-2xl font-bold">Connection Error</h1>
          <p>Please try again from the dashboard.</p>
        </div>
      )}
    </div>
  );
}

export default function CallbackPage() {
  return (
    <Suspense fallback={<div>Processing...</div>}>
      <SuccessUI />
    </Suspense>
  );
}