import React, { useEffect, useState } from 'react';
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
import {
  CheckCircle,
  XCircle,
  AlertCircle,
  Home,
  Receipt,
  Loader2,
} from 'lucide-react';
import { useCompanySettings } from '../../shared/contexts/CompanySettingsContext';

const PaymentResultPage: React.FC = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const [countdown, setCountdown] = useState(10);
  const { settings } = useCompanySettings();

  
  const supportEmail = settings.company_email || null;
  const supportPhone = settings.company_phone || null;

  const status = searchParams.get('status');
  const bookingId = searchParams.get('bookingId');
  const transactionId = searchParams.get('transactionId');
  const message = searchParams.get('message');

  useEffect(() => {
    if (status === 'success' && bookingId) {
      const timer = setInterval(() => {
        setCountdown((prev) => {
          if (prev <= 1) {
            clearInterval(timer);
            navigate(`/bookings/${bookingId}`);
            return 0;
          }
          return prev - 1;
        });
      }, 1000);

      return () => clearInterval(timer);
    }
  }, [status, bookingId, navigate]);

  const getStatusContent = () => {
    switch (status) {
      case 'success':
        return {
          icon: <CheckCircle className="w-20 h-20 text-green-500" />,
          title: 'Payment Successful!',
          description: 
            'Thank you for your payment. Your booking has been confirmed.',
          bgColor: 'bg-green-50',
          borderColor: 'border-green-200',
          textColor: 'text-green-800',
        };
      case 'failed':
        return {
          icon: <XCircle className="w-20 h-20 text-red-500" />,
          title: 'Payment Failed',
          description: message || 
            'Transaction was not successful. Please try again.',
          bgColor: 'bg-red-50',
          borderColor: 'border-red-200',
          textColor: 'text-red-800',
        };
      case 'invalid_signature':
        return {
          icon: <AlertCircle className="w-20 h-20 text-orange-500" />,
          title: 'Authentication Error',
          description: 
            'Unable to verify transaction. Please contact support.',
          bgColor: 'bg-orange-50',
          borderColor: 'border-orange-200',
          textColor: 'text-orange-800',
        };
      case 'payment_not_found':
        return {
          icon: <AlertCircle className="w-20 h-20 text-gray-500" />,
          title: 'Payment Not Found',
          description: 
            'Payment information not found. ' +
            'Please check again.',
          bgColor: 'bg-gray-50',
          borderColor: 'border-gray-200',
          textColor: 'text-gray-800',
        };
      default:
        return {
          icon: <AlertCircle className="w-20 h-20 text-gray-500" />,
          title: 'Unknown Error',
          description: message || 
            'An error occurred. Please try again later.',
          bgColor: 'bg-gray-50',
          borderColor: 'border-gray-200',
          textColor: 'text-gray-800',
        };
    }
  };

  const content = getStatusContent();

  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="max-w-2xl mx-auto px-4">
        <div
          className={`${content.bgColor} border-2 
            ${content.borderColor} rounded-lg p-8`}
        >
          {}
          <div className="flex justify-center mb-6">
            {content.icon}
          </div>

          {}
          <h1
            className={`text-3xl font-bold text-center 
              mb-4 ${content.textColor}`}
          >
            {content.title}
          </h1>

          {}
          <p className="text-center text-gray-700 mb-6">
            {content.description}
          </p>

          {}
          {status === 'success' && transactionId && (
            <div
              className="bg-white border border-gray-200 
                rounded-lg p-4 mb-6"
            >
              <div className="text-sm space-y-2">
                <div className="flex justify-between">
                  <span className="text-gray-600">
                    Transaction ID
                  </span>
                  <span className="font-medium font-mono">
                    {transactionId}
                  </span>
                </div>
                {bookingId && (
                  <div className="flex justify-between">
                    <span className="text-gray-600">
                      Booking ID
                    </span>
                    <span className="font-medium">
                      #{bookingId}
                    </span>
                  </div>
                )}
              </div>
            </div>
          )}

          {}
          {status === 'success' && bookingId && countdown > 0 && (
            <div className="text-center mb-6">
              <div className="flex items-center justify-center gap-2 
                text-gray-600"
              >
                <Loader2 className="w-4 h-4 animate-spin" />
                <span>
                  Auto redirecting to booking details in {countdown}s...
                </span>
              </div>
            </div>
          )}

          {}
          <div className="flex flex-col sm:flex-row gap-3">
            {status === 'success' && bookingId ? (
              <>
                <Link
                  to={`/bookings/${bookingId}`}
                  className="flex-1 flex items-center justify-center 
                    gap-2 px-6 py-3 bg-green-600 text-white 
                    rounded-lg hover:bg-green-700 
                    transition-colors font-medium"
                >
                  <Receipt className="w-5 h-5" />
                  View booking details
                </Link>
                <Link
                  to="/"
                  className="flex-1 flex items-center justify-center 
                    gap-2 px-6 py-3 bg-white text-gray-700 
                    border-2 border-gray-300 rounded-lg 
                    hover:bg-gray-50 transition-colors 
                    font-medium"
                >
                  <Home className="w-5 h-5" />
                  Go to home
                </Link>
              </>
            ) : status === 'failed' && bookingId ? (
              <>
                <Link
                  to={`/bookings/${bookingId}`}
                  className="flex-1 px-6 py-3 bg-indigo-600 
                    text-white rounded-lg hover:bg-indigo-700 
                    transition-colors font-medium text-center"
                >
                  View Booking
                </Link>
                <Link
                  to="/bookings"
                  className="flex-1 px-6 py-3 bg-white 
                    text-gray-700 border-2 border-gray-300 
                    rounded-lg hover:bg-gray-50 
                    transition-colors font-medium text-center"
                >
                  Booking list
                </Link>
              </>
            ) : (
              <Link
                to="/"
                className="w-full flex items-center 
                  justify-center gap-2 px-6 py-3 
                  bg-indigo-600 text-white rounded-lg 
                  hover:bg-indigo-700 transition-colors 
                  font-medium"
              >
                <Home className="w-5 h-5" />
                Go to home
              </Link>
            )}
          </div>
        </div>

        {}
        <div className="mt-6 text-center text-sm text-gray-600">
          <p>
            If you have any issues, please contact{' '}
            <a
              href={`mailto:${supportEmail}`}
              className="text-indigo-600 hover:underline"
            >
              {supportEmail}
            </a>
            {supportPhone && (
              <>
                {' '}or call{' '}
                <a
                  href={`tel:${supportPhone.replace(/\s+/g, '').replace(/[()]/g, '')}`}
                  className="text-indigo-600 hover:underline"
                >
                  {supportPhone}
                </a>
              </>
            )}
          </p>
        </div>
      </div>
    </div>
  );
};

export default PaymentResultPage;
