/**
 * Pending Payment Banner
 * Shows alert banner when account status is 'pending_payment'
 * Displays invoice details and provides link to payment confirmation
 */

import { useState, useEffect } from 'react';
import { AlertCircle, CreditCard, X } from 'lucide-react';
import { Link } from 'react-router-dom';
import Button from '../ui/button/Button';
import { useAuthStore } from '../../store/authStore';
import { API_BASE_URL } from '../../services/api';
import PaymentConfirmationModal from './PaymentConfirmationModal';

interface Invoice {
  id: number;
  invoice_number: string;
  total?: string;  // For backward compatibility
  total_amount?: string;  // Backend returns 'total_amount'
  currency: string;
  status: string;
  due_date?: string;
  created_at: string;
}

interface PendingPaymentBannerProps {
  className?: string;
}

export default function PendingPaymentBanner({ className = '' }: PendingPaymentBannerProps) {
  const [invoice, setInvoice] = useState<Invoice | null>(null);
  const [paymentMethod, setPaymentMethod] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [dismissed, setDismissed] = useState(false);
  const [showPaymentModal, setShowPaymentModal] = useState(false);
  const { user, refreshUser } = useAuthStore();

  const accountStatus = user?.account?.status;
  const isPendingPayment = accountStatus === 'pending_payment';

  useEffect(() => {
    if (isPendingPayment && !dismissed) {
      loadPendingInvoice();
    } else {
      setLoading(false);
    }
  }, [isPendingPayment, dismissed]);

  const loadPendingInvoice = async () => {
    try {
      setLoading(true);
      const token = useAuthStore.getState().token;
      
      // Fetch pending invoices for this account
      const response = await fetch(`${API_BASE_URL}/v1/billing/invoices/?status=pending&limit=1`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          ...(token && { Authorization: `Bearer ${token}` }),
        },
        credentials: 'include',
      });

      const data = await response.json();
      
      if (response.ok && data.success && data.results?.length > 0) {
        setInvoice(data.results[0]);
        
        // Load payment method if available - use public endpoint
        const country = (user?.account as any)?.billing_country || 'US';
        const pmResponse = await fetch(`${API_BASE_URL}/v1/billing/payment-configs/payment-methods/?country=${country}`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        
        const pmData = await pmResponse.json();
        // Use public endpoint response format
        if (pmResponse.ok && pmData.success && pmData.results?.length > 0) {
          setPaymentMethod(pmData.results[0]);
        } else if (pmResponse.ok && Array.isArray(pmData) && pmData.length > 0) {
          setPaymentMethod(pmData[0]);
        }
      }
    } catch (err) {
      console.error('Failed to load pending invoice:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleDismiss = () => {
    setDismissed(true);
    // Store dismissal in sessionStorage to persist during session
    sessionStorage.setItem('payment-banner-dismissed', 'true');
  };

  const handlePaymentSuccess = async () => {
    setShowPaymentModal(false);
    // Refresh user data to update account status
    await refreshUser();
  };

  // Don't show if not pending payment, loading, or dismissed
  if (!isPendingPayment || loading || dismissed) {
    return null;
  }

  // Check if already dismissed in this session
  if (sessionStorage.getItem('payment-banner-dismissed') === 'true') {
    return null;
  }

  // If no invoice found, show simplified banner
  if (!invoice) {
    return (
      <div className={`relative border-l-4 border-amber-500 bg-amber-50 dark:bg-amber-900/20 ${className}`}>
        <div className="p-4">
          <div className="flex items-start gap-4">
            <AlertCircle className="w-6 h-6 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
            <div className="flex-1">
              <h3 className="font-semibold text-amber-900 dark:text-amber-100">
                Payment Required
              </h3>
              <p className="mt-1 text-sm text-amber-800 dark:text-amber-200">
                Your account is pending payment. Please complete your payment to activate your subscription.
              </p>
              <div className="mt-3 flex gap-2">
                <Link to="/account/plans">
                  <Button variant="primary" size="sm">
                    Complete Payment
                  </Button>
                </Link>
                <Link to="/dashboard">
                  <Button variant="outline" size="sm">
                    Go to Dashboard
                  </Button>
                </Link>
              </div>
            </div>
            <button
              onClick={handleDismiss}
              className="p-1 hover:bg-amber-100 dark:hover:bg-amber-800/40 rounded transition-colors"
            >
              <X className="w-5 h-5 text-amber-600 dark:text-amber-400" />
            </button>
          </div>
        </div>
      </div>
    );
  }

  // Format due date
  const formatDate = (dateString?: string) => {
    if (!dateString) return 'N/A';
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', { 
      month: 'short', 
      day: 'numeric', 
      year: 'numeric' 
    });
  };

  const isDueSoon = invoice.due_date && new Date(invoice.due_date) <= new Date(Date.now() + 3 * 24 * 60 * 60 * 1000);
  const isOverdue = invoice.due_date && new Date(invoice.due_date) < new Date();

  return (
    <>
      <div className={`relative border-l-4 ${isOverdue ? 'border-red-500 bg-red-50 dark:bg-red-900/20' : 'border-amber-500 bg-amber-50 dark:bg-amber-900/20'} ${className}`}>
        <div className="p-4">
          <div className="flex items-start gap-4">
            <AlertCircle 
              className={`w-6 h-6 flex-shrink-0 mt-0.5 ${isOverdue ? 'text-red-600 dark:text-red-400' : 'text-amber-600 dark:text-amber-400'}`} 
            />
            <div className="flex-1">
              <div className="flex items-center gap-2">
                <h3 className={`font-semibold ${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
                  {isOverdue ? 'Payment Overdue' : 'Payment Required'}
                </h3>
                {isDueSoon && !isOverdue && (
                  <span className="px-2 py-0.5 text-xs font-medium rounded bg-amber-200 text-amber-900 dark:bg-amber-700 dark:text-amber-100">
                    Due Soon
                  </span>
                )}
              </div>
              
              <p className={`mt-1 text-sm ${isOverdue ? 'text-red-800 dark:text-red-200' : 'text-amber-800 dark:text-amber-200'}`}>
                Your subscription is pending payment confirmation. Complete your payment to activate your account and unlock all features.
              </p>

              {/* Invoice Details */}
              <div className="mt-3 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                <div>
                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
                    Invoice
                  </span>
                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
                    #{invoice.invoice_number}
                  </span>
                </div>
                <div>
                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
                    Amount
                  </span>
                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
                    {invoice.currency} {invoice.total_amount}
                  </span>
                </div>
                <div>
                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
                    Status
                  </span>
                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'} capitalize`}>
                    {invoice.status}
                  </span>
                </div>
                <div>
                  <span className={`block font-medium ${isOverdue ? 'text-red-700 dark:text-red-300' : 'text-amber-700 dark:text-amber-300'}`}>
                    {isOverdue ? 'Was Due' : 'Due Date'}
                  </span>
                  <span className={`${isOverdue ? 'text-red-900 dark:text-red-100' : 'text-amber-900 dark:text-amber-100'}`}>
                    {formatDate(invoice.due_date)}
                  </span>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="mt-4 flex flex-wrap gap-3">
                <Button
                  variant="primary"
                  size="sm"
                  startIcon={<CreditCard className="w-4 h-4" />}
                  onClick={() => setShowPaymentModal(true)}
                >
                  Confirm Payment
                </Button>
                <Link to="/account/plans">
                  <Button variant="outline" size="sm">
                    View Billing Details
                  </Button>
                </Link>
              </div>
            </div>

            {/* Dismiss Button */}
            <button
              onClick={handleDismiss}
              className={`p-1 rounded transition-colors ${
                isOverdue 
                  ? 'hover:bg-red-100 dark:hover:bg-red-800/40 text-red-600 dark:text-red-400'
                  : 'hover:bg-amber-100 dark:hover:bg-amber-800/40 text-amber-600 dark:text-amber-400'
              }`}
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>

      {/* Payment Confirmation Modal */}
      {showPaymentModal && invoice && (
        <PaymentConfirmationModal
          isOpen={showPaymentModal}
          onClose={() => setShowPaymentModal(false)}
          onSuccess={handlePaymentSuccess}
          invoice={invoice}
          paymentMethod={paymentMethod || {
            payment_method: 'bank_transfer',
            display_name: 'Bank Transfer',
            country_code: 'US'
          }}
        />
      )}
    </>
  );
}