'use client';

import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { participantService } from '@/lib/services';
import { Loader2 } from 'lucide-react';

// Force dynamic rendering to avoid SSR issues with Supabase
export const dynamic = 'force-dynamic';

export default function ShortVoteRedirect() {
  const params = useParams();
  const router = useRouter();
  const shortId = params.shortId as string;
  
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    if (shortId) {
      redirectToVotePage();
    }
  }, [shortId]);

  const redirectToVotePage = async () => {
    try {
      setLoading(true);
      
      // Récupérer le participant par short_id
      const participant = await participantService.getByShortId(shortId);
      
      if (!participant) {
        setError('Lien de vote invalide ou expiré');
        return;
      }
      
      // Rediriger vers l'ancienne route avec les IDs complets
      const voteUrl = `/campaigns/${participant.campaign_id}/vote/${participant.id}`;
      router.replace(voteUrl);
      
    } catch (error) {
      console.error('Erreur lors de la redirection:', error);
      setError('Erreur lors du chargement du lien de vote');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-indigo-600" />
          <p className="text-gray-600">Redirection vers la page de vote...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="bg-white rounded-lg shadow-lg p-8 max-w-md mx-auto">
            <svg className="mx-auto h-12 w-12 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
            </svg>
            <h2 className="mt-4 text-lg font-medium text-gray-900">Erreur</h2>
            <p className="mt-2 text-sm text-gray-600">{error}</p>
            <button
              onClick={() => router.push('/')}
              className="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
            >
              Retour à l'accueil
            </button>
          </div>
        </div>
      </div>
    );
  }

  return null;
}