import React from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { XCircle, ArrowLeft, RefreshCw } from 'lucide-react';
import Header from '@/components/Header';
import Footer from '@/components/Footer';

const PaymentError = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const errorMessage = searchParams.get('message') || 'Hubo un problema al procesar tu pago';

  return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      
      <div className="container mx-auto px-4 pt-24 pb-12">
        <div className="max-w-2xl mx-auto">
          {/* Error Header */}
          <div className="text-center mb-8">
            <div className="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <XCircle className="w-12 h-12 text-red-600" />
            </div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              Error en el Pago
            </h1>
            <p className="text-gray-600">
              No pudimos procesar tu pago. No te preocupes, no se ha realizado ningún cargo.
            </p>
          </div>

          {/* Error Details */}
          <Card className="mb-6">
            <CardHeader>
              <CardTitle>Detalles del Error</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                <p className="text-red-800">{errorMessage}</p>
              </div>

              <div className="mt-6 space-y-3">
                <h3 className="font-semibold text-gray-900">Razones comunes:</h3>
                <ul className="text-sm text-gray-700 space-y-2">
                  <li>• Fondos insuficientes en tu tarjeta</li>
                  <li>• Información de la tarjeta incorrecta</li>
                  <li>• Tu banco bloqueó la transacción por seguridad</li>
                  <li>• La tarjeta ha expirado o fue rechazada</li>
                </ul>
              </div>

              <div className="mt-6 space-y-3">
                <h3 className="font-semibold text-gray-900">¿Qué puedes hacer?</h3>
                <ul className="text-sm text-gray-700 space-y-2">
                  <li>• Verifica los datos de tu tarjeta e intenta nuevamente</li>
                  <li>• Intenta con otra tarjeta o método de pago</li>
                  <li>• Contacta a tu banco para autorizar la transacción</li>
                  <li>• Contacta nuestro soporte si el problema persiste</li>
                </ul>
              </div>
            </CardContent>
          </Card>

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button onClick={() => navigate('/checkout')} variant="default">
              <RefreshCw className="w-4 h-4 mr-2" />
              Intentar Nuevamente
            </Button>
            <Button onClick={() => navigate('/explore')} variant="outline">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Volver a Explorar
            </Button>
          </div>

          {/* Support Info */}
          <div className="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-lg text-center">
            <h3 className="font-semibold text-blue-900 mb-2">¿Necesitas Ayuda?</h3>
            <p className="text-sm text-blue-700 mb-3">
              Nuestro equipo de soporte está disponible 24/7 para ayudarte
            </p>
            <div className="flex flex-col sm:flex-row gap-2 justify-center text-sm">
              <a href="tel:+18091234567" className="text-blue-600 hover:text-blue-800 font-medium">
                📞 +1 (809) 123-4567
              </a>
              <span className="hidden sm:inline text-blue-400">|</span>
              <a href="mailto:soporte@karibeo.com" className="text-blue-600 hover:text-blue-800 font-medium">
                ✉️ soporte@karibeo.com
              </a>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
};

export default PaymentError;
