'use client';

import { useEffect, useState } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import { CheckCircle, XCircle, Loader2 } from 'lucide-react';

export default function CarrierConfirmedPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const token = searchParams.get('token');
  const action = searchParams.get('action');
  const bookingId = searchParams.get('bookingId');
  const isNewAccount = searchParams.get('new') === 'true';

  useEffect(() => {
    const autoLogin = async () => {
      if (!token) {
        setError('Token manquant');
        setLoading(false);
        return;
      }

      try {
        // Stocker le token JWT
        localStorage.setItem('carrier_access_token', token);

        // Rediriger vers le dashboard après 3 secondes
        setTimeout(() => {
          router.push(`/carrier/dashboard/bookings/${bookingId}`);
        }, 3000);

        setLoading(false);
      } catch (err) {
        setError('Erreur lors de la connexion automatique');
        setLoading(false);
      }
    };

    autoLogin();
  }, [token, bookingId, router]);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <Loader2 className="w-12 h-12 animate-spin text-blue-600 mx-auto mb-4" />
          <p className="text-gray-600">Connexion en cours...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md">
          <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
          <h1 className="text-2xl font-bold text-gray-900 text-center mb-4">Erreur</h1>
          <p className="text-gray-600 text-center">{error}</p>
        </div>
      </div>
    );
  }

  const isAccepted = action === 'accepted';

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="bg-white p-8 rounded-lg shadow-lg max-w-2xl w-full">
        {/* Success Icon */}
        {isAccepted ? (
          <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
        ) : (
          <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
        )}

        {/* Title */}
        <h1 className="text-3xl font-bold text-gray-900 text-center mb-4">
          {isAccepted ? '✅ Demande acceptée avec succès' : '❌ Demande refusée'}
        </h1>

        {/* New Account Message */}
        {isNewAccount && (
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
            <p className="text-blue-900 font-semibold mb-2">🎉 Bienvenue sur Xpeditis !</p>
            <p className="text-blue-800 text-sm">
              Un compte transporteur a été créé automatiquement pour vous. Vous recevrez un email
              avec vos identifiants de connexion.
            </p>
          </div>
        )}

        {/* Confirmation Message */}
        <div className="mb-6">
          <p className="text-gray-700 text-center mb-4">
            {isAccepted
              ? 'Votre acceptation a été enregistrée. Le client va être notifié automatiquement par email.'
              : 'Votre refus a été enregistré. Le client va être notifié automatiquement.'}
          </p>
        </div>

        {/* Redirection Notice */}
        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
          <p className="text-gray-800 text-center">
            <Loader2 className="w-4 h-4 animate-spin inline mr-2" />
            Redirection vers votre tableau de bord dans quelques secondes...
          </p>
        </div>

        {/* Next Steps */}
        <div className="border-t pt-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-3">📋 Prochaines étapes</h2>
          {isAccepted ? (
            <ul className="space-y-2 text-gray-700">
              <li className="flex items-start">
                <span className="mr-2">1.</span>
                <span>Le client va vous contacter directement par email</span>
              </li>
              <li className="flex items-start">
                <span className="mr-2">2.</span>
                <span>Envoyez-lui le numéro de réservation (booking number)</span>
              </li>
              <li className="flex items-start">
                <span className="mr-2">3.</span>
                <span>Organisez l'enlèvement de la marchandise</span>
              </li>
              <li className="flex items-start">
                <span className="mr-2">4.</span>
                <span>Suivez l'expédition depuis votre tableau de bord</span>
              </li>
            </ul>
          ) : (
            <ul className="space-y-2 text-gray-700">
              <li className="flex items-start">
                <span className="mr-2">1.</span>
                <span>Le client sera notifié de votre refus</span>
              </li>
              <li className="flex items-start">
                <span className="mr-2">2.</span>
                <span>Il pourra rechercher une alternative</span>
              </li>
            </ul>
          )}
        </div>

        {/* Manual Link */}
        <div className="mt-6 text-center">
          <button
            onClick={() => router.push(`/carrier/dashboard/bookings/${bookingId}`)}
            className="text-blue-600 hover:text-blue-800 font-medium"
          >
            Accéder maintenant au tableau de bord →
          </button>
        </div>
      </div>
    </div>
  );
}