import type { Route } from "./+types/success";
import { useState, useEffect } from "react";
import {
  CheckCircleIcon,
  ArrowRightIcon,
  MonitorSmartphone,
} from "lucide-react";
import { Link, useNavigate, useSearchParams } from "react-router";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { Button } from "~/components/ui/button";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "Khollisé - Connexion" },
    { name: "description", content: "Connexion réussie à Khollisé" },
  ];
}

export default function AuthSuccessPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const [email, redirect, code] = ["email", "redirect", "code"].map((param) =>
    searchParams.get(param)
  );
  const [countdown, setCountdown] = useState(5000);

  // Valider l'URL de redirection
  const redirectUrl = "/home";
  //   isValidRedirectUrl(redirectParam) ? redirectParam : "/accueil"

  useEffect(() => {
    // Démarrer le compte à rebours pour la redirection
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          clearInterval(timer);
          navigate(redirectUrl);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, [redirectUrl, navigate]);

  return (
    <main className="flex h-full flex-col items-center justify-center p-4 bg-gray-50">
      <div className="w-full max-w-md">
        <Card className="w-full overflow-hidden">
          <div className="bg-green-500 h-2" />
          <CardHeader className="space-y-1 pb-6">
            <div className="flex justify-center mb-4">
              <div className="rounded-full bg-green-100 p-3">
                <CheckCircleIcon className="h-10 w-10 text-green-600" />
              </div>
            </div>
            <CardTitle className="text-2xl font-bold text-center">
              Authentification réussie
            </CardTitle>
            <CardDescription className="text-center">
              Vous êtes maintenant connecté en tant que
              <span className="font-bold"> {email}</span>
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-4">
              <div className="flex items-start space-x-3 p-3 bg-green-50 rounded-lg border border-green-100">
                <CheckCircleIcon className="h-5 w-5 text-green-600 mt-0.5 flex-shrink-0" />
                <div>
                  <p className="text-sm font-medium text-green-800">
                    Cet appareil a été authentifié avec succès
                  </p>
                  <p className="text-xs text-green-700 mt-1">
                    Vous êtes maintenant connecté et pouvez accéder à votre
                    compte.
                  </p>
                </div>
              </div>

              <div className="flex items-start space-x-3 p-3 bg-blue-50 rounded-lg border border-blue-100">
                <MonitorSmartphone className="h-5 w-5 text-blue-600 mt-0.5 flex-shrink-0" />
                <div>
                  <p className="text-sm font-medium text-blue-800">
                    Authentification multi-appareils
                  </p>
                  <p className="text-xs text-blue-700 mt-1">
                    Si vous avez initié cette connexion depuis un autre
                    appareil, celui-ci a également été authentifié.
                  </p>
                </div>
              </div>
            </div>

            <div className="flex flex-col space-y-3">
              <p className="text-sm text-center text-gray-500">
                Vous allez être redirigé dans{" "}
                <span className="font-bold">{countdown}</span> secondes...
              </p>
              <Button asChild className="w-full">
                <Link
                  to={redirectUrl}
                  className="flex items-center justify-center"
                >
                  Continuer maintenant
                  <ArrowRightIcon className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>

            <div className="pt-4 border-t border-gray-100">
              <div className="flex items-center justify-between">
                <p className="text-xs text-gray-500">Besoin d'aide ?</p>
                <Button variant="link" size="sm" asChild className="h-auto p-0">
                  <Link to="/support" className="text-xs">
                    Contacter le support
                  </Link>
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </main>
  );
}