import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card } from '../ui/Card';
import { Logo } from '../ui/Logo';
import { FiCheckCircle, FiMail, FiSmartphone, FiDownload } from 'react-icons/fi';

interface SuccessPageProps {
  transactionId: string;
  amount: number;
  email: string;
}

export const SuccessPage: React.FC<SuccessPageProps> = ({
  transactionId,
  amount,
  email,
}) => {
  const [emailSent, setEmailSent] = useState(false);
  const navigate = useNavigate();

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(amount);
  };

  const handleSendEmail = async () => {
    // Simulate sending email
    await new Promise(resolve => setTimeout(resolve, 1000));
    setEmailSent(true);
    // In real app, this would call an API to send the download link via email
    console.log('Sending download link to:', email);
  };

  const handleDownloadIOS = () => {
    // In real app, this would redirect to App Store
    window.open('https://apps.apple.com/app/amba', '_blank');
  };

  const handleDownloadAndroid = () => {
    // In real app, this would redirect to Google Play Store
    window.open('https://play.google.com/store/apps/details?id=com.amba', '_blank');
  };

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className="max-w-2xl w-full">
        <Card className="p-8 md:p-12">
          {/* Success Icon */}
          <div className="text-center mb-8">
            <div className="w-20 h-20 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <FiCheckCircle className="w-12 h-12 text-primary-500" />
            </div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              Payment Successful!
            </h1>
            <p className="text-gray-600 mb-1">
              Your payment of {formatCurrency(amount)} has been processed successfully.
            </p>
            <p className="text-sm text-gray-500">Transaction ID: {transactionId}</p>
          </div>

          {/* Download App Section */}
          <div className="mb-8">
            <h2 className="text-xl font-bold text-gray-900 mb-4 text-center">
              Download the Amba App
            </h2>
            <p className="text-sm text-gray-600 text-center mb-6">
              Get the Amba app to manage your payments and transactions on the go.
            </p>

            {/* Download Buttons */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
              <button
                onClick={handleDownloadIOS}
                className="flex items-center justify-center gap-3 px-6 py-4 bg-gray-900 hover:bg-gray-800 text-white rounded-lg transition-colors"
              >
                <FiSmartphone className="w-6 h-6" />
                <div className="text-left">
                  <p className="text-xs">Download on the</p>
                  <p className="font-semibold">App Store</p>
                </div>
              </button>
              <button
                onClick={handleDownloadAndroid}
                className="flex items-center justify-center gap-3 px-6 py-4 bg-gray-900 hover:bg-gray-800 text-white rounded-lg transition-colors"
              >
                <FiSmartphone className="w-6 h-6" />
                <div className="text-left">
                  <p className="text-xs">Get it on</p>
                  <p className="font-semibold">Google Play</p>
                </div>
              </button>
            </div>

            {/* Email Link Section */}
            <div className="border-t border-gray-200 pt-6">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <FiMail className="w-5 h-5 text-primary-500" />
                  <div>
                    <p className="font-medium text-gray-900">Send download link via email</p>
                    <p className="text-sm text-gray-600">{email}</p>
                  </div>
                </div>
                <button
                  onClick={handleSendEmail}
                  disabled={emailSent}
                  className="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
                >
                  {emailSent ? 'Sent!' : 'Send Link'}
                </button>
              </div>
              {emailSent && (
                <div className="bg-green-50 border border-green-200 rounded-lg p-3 text-sm text-green-800">
                  Download link has been sent to your email!
                </div>
              )}
            </div>
          </div>

          {/* Footer Actions */}
          <div className="flex gap-4">
            <button
              onClick={() => navigate('/')}
              className="flex-1 px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors font-medium"
            >
              Back to Home
            </button>
            <button
              onClick={() => window.print()}
              className="px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors font-medium flex items-center gap-2"
            >
              <FiDownload className="w-4 h-4" />
              Download Receipt
            </button>
          </div>
        </Card>
      </div>
    </div>
  );
};