/**
 * CheckoutCancel Page
 * Displayed when user cancels Stripe checkout
 */

import React from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import { XCircle, ArrowLeft, HelpCircle, MessageCircle } from 'lucide-react';

export default function CheckoutCancel() {
  const [searchParams] = useSearchParams();
  const reason = searchParams.get('reason');

  return (
    <div className="min-h-[80vh] flex items-center justify-center px-4">
      <div className="max-w-md w-full text-center">
        {/* Cancel Icon */}
        <div className="w-24 h-24 bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-8">
          <XCircle className="w-12 h-12 text-gray-400" />
        </div>

        {/* Title */}
        <h1 className="text-3xl font-bold text-white mb-4">
          Pago Cancelado
        </h1>

        <p className="text-gray-400 mb-8">
          {reason === 'expired'
            ? 'La sesion de pago ha expirado. Por favor intenta de nuevo.'
            : 'Has cancelado el proceso de pago. No se ha realizado ningun cargo a tu cuenta.'}
        </p>

        {/* Help Section */}
        <div className="bg-gray-800 rounded-xl border border-gray-700 p-6 mb-8 text-left">
          <h3 className="text-white font-medium mb-4 flex items-center gap-2">
            <HelpCircle className="w-5 h-5 text-blue-400" />
            Tuviste algun problema?
          </h3>
          <ul className="space-y-3 text-sm text-gray-400">
            <li className="flex items-start gap-2">
              <span className="text-blue-400 mt-1">•</span>
              <span>
                Si tu tarjeta fue rechazada, verifica los datos o intenta con otro metodo de pago.
              </span>
            </li>
            <li className="flex items-start gap-2">
              <span className="text-blue-400 mt-1">•</span>
              <span>
                Puedes contactarnos si necesitas ayuda con el proceso de pago.
              </span>
            </li>
            <li className="flex items-start gap-2">
              <span className="text-blue-400 mt-1">•</span>
              <span>
                Todos los pagos son procesados de forma segura a traves de Stripe.
              </span>
            </li>
          </ul>
        </div>

        {/* Actions */}
        <div className="space-y-3">
          <Link
            to="/pricing"
            className="flex items-center justify-center gap-2 w-full py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition-colors"
          >
            <ArrowLeft className="w-5 h-5" />
            Volver a Planes
          </Link>
          <Link
            to="/assistant"
            className="flex items-center justify-center gap-2 w-full py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
          >
            <MessageCircle className="w-5 h-5" />
            Contactar Soporte
          </Link>
        </div>

        {/* FAQ Link */}
        <p className="mt-8 text-sm text-gray-500">
          Revisa nuestras{' '}
          <a href="#" className="text-blue-400 hover:text-blue-300">
            preguntas frecuentes sobre pagos
          </a>
        </p>
      </div>
    </div>
  );
}
