'use client';

import React, { Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { Button } from 'primereact/button';
import { Card } from 'primereact/card';
import { redirectToLogin } from '@/lib/auth';

function LoginContent() {
  const searchParams = useSearchParams();
  const returnUrl = searchParams.get('returnUrl') || '/dashboard';

  const handleLogin = () => {
    // Stocker l'URL de retour dans le sessionStorage
    if (returnUrl) {
      sessionStorage.setItem('returnUrl', returnUrl);
    }

    // Rediriger vers Keycloak pour l'authentification
    redirectToLogin(returnUrl);
  };

  return (
    <div className="min-h-screen flex align-items-center justify-content-center" style={{
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
    }}>
      <div className="surface-card p-4 shadow-2 border-round w-full lg:w-6">
        <div className="text-center mb-5">
          <div className="text-900 text-3xl font-medium mb-3">
            BTP Xpress
          </div>
          <span className="text-600 font-medium line-height-3">
            Plateforme de gestion pour le secteur du BTP
          </span>
        </div>

        <Card>
          <div className="text-center">
            <i className="pi pi-lock text-6xl text-primary mb-4"></i>
            <h2 className="text-900 font-bold text-2xl mb-2">
              Connexion requise
            </h2>
            <p className="text-600 mb-4">
              Veuillez vous connecter pour accéder à l'application
            </p>

            <Button
              label="Se connecter avec Keycloak"
              icon="pi pi-sign-in"
              onClick={handleLogin}
              className="w-full p-3 text-xl"
              severity="info"
            />

            <div className="mt-4 text-center">
              <span className="text-600 text-sm">
                Authentification sécurisée via Keycloak OAuth 2.0
              </span>
            </div>
          </div>
        </Card>

        <div className="mt-5 text-center">
          <span className="text-white-alpha-80 text-sm">
            © 2025 BTP Xpress - Tous droits réservés
          </span>
        </div>
      </div>
    </div>
  );
}

export default function LoginPage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex align-items-center justify-content-center">
        <i className="pi pi-spin pi-spinner text-4xl"></i>
      </div>
    }>
      <LoginContent />
    </Suspense>
  );
}