'use client';

import React, { useState } from 'react';
import { formatCurrency } from '../../../shared/utils/currency.js';
import { Card, Table, Select } from '../../../shared/components/index.js';
import { parseUTCDate, formatDateForDisplay, getDaysBetween, isOverdue, getTodayUTC } from '../../../shared/lib/dates.js';

const DATE_LOCALE = 'fr-FR';

/**
 * Public Invoice Payment Page Component
 * Allows clients to view and pay invoices via public link
 */
const PaymentPage = ({ 
  invoice,
  onPaymentSubmit,
  stripeEnabled = false,
  interacEnabled = false,
  interacEmail = null,
  interacCredentials = null,
  paymentStatus = null,
  token = null,
  publicLogoWhite = '',
  publicLogoBlack = '',
  publicDashboardUrl = '',
}) => {
  const [paymentMethod, setPaymentMethod] = useState(
    stripeEnabled ? 'stripe' : (interacEnabled ? 'interac' : 'other')
  );
  const [isProcessing, setIsProcessing] = useState(false);
  
  // Payment method options for Select component
  const paymentMethodOptions = [
    ...(stripeEnabled ? [{ value: 'stripe', label: "Carte de crédit" }] : []),
    ...(interacEnabled ? [{ value: 'interac', label: "Virement Interac" }] : []),
    { value: 'other', label: "Autre" }
  ];
  
  if (!invoice) {
    return (
      <div className="min-h-screen flex items-center justify-center p-4 bg-white dark:bg-black">
        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg p-8 max-w-md w-full text-center shadow-sm dark:shadow-none">
          <h1 className="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">Facture non trouvée</h1>
          <p className="text-neutral-600 dark:text-neutral-400">
            La facture que vous recherchez n'existe pas ou a été supprimée.
          </p>
        </div>
      </div>
    );
  }
  
  const clientName = invoice.company_name || `${invoice.first_name} ${invoice.last_name}`;
  const isPaid = invoice.status === 'paid';
  const invoiceIsOverdue = isOverdue(invoice.due_date) && !isPaid;
  const principalAmount = parseFloat(invoice.total_amount);
  const interestAmount = parseFloat(invoice.interest_amount || 0);
  const totalWithInterest = principalAmount + interestAmount;
  const paidAmount = parseFloat(invoice.paid_amount || 0);
  const remainingAmount = totalWithInterest - paidAmount;
  const totalAmount = totalWithInterest;
  const hasInterest = interestAmount > 0;
  
  const handlePayment = async () => {
    if (onPaymentSubmit) {
      setIsProcessing(true);
      try {
        await onPaymentSubmit(paymentMethod);
      } finally {
        setIsProcessing(false);
      }
    }
  };
  
  // Calculate days remaining
  const daysRemaining = getDaysBetween(getTodayUTC(), invoice.due_date);
  const dueDateFormatted = formatDateForDisplay(invoice.due_date, DATE_LOCALE);

  // Table columns configuration for invoice items
  const invoiceItemsColumns = [
    {
      key: 'name',
      label: "Description",
      render: (item) => (
        <div className="break-words">
          <p className="text-neutral-900 dark:text-white font-medium break-words">{item.name}</p>
          {item.description && (
            <p className="text-sm text-neutral-600 dark:text-neutral-400 break-words">{item.description}</p>
          )}
        </div>
      )
    },
    {
      key: 'quantity',
      label: "Quantité",
      noWrap: false,
      render: (item) => (
        <div className="text-left text-neutral-900 dark:text-white">{item.quantity}</div>
      )
    },
    {
      key: 'unit_price',
      label: "Prix unitaire",
      noWrap: false,
      render: (item) => (
        <div className="text-left text-neutral-900 dark:text-white">{formatCurrency(item.unit_price)}</div>
      )
    },
    {
      key: 'total',
      label: "Total",
      headerAlign: 'right',
      noWrap: false,
      render: (item) => (
        <div className="text-right text-neutral-900 dark:text-white font-medium">{formatCurrency(item.total)}</div>
      )
    }
  ];

  const hasLogo = publicLogoWhite || publicLogoBlack;
  const logoHref = publicDashboardUrl && publicDashboardUrl.trim() !== '' ? publicDashboardUrl.trim() : null;

  return (
    <div className="min-h-screen bg-neutral-100 dark:bg-black">
      <div className="max-w-7xl mx-auto px-4 py-16 lg:py-24 sm:px-6 lg:px-8">
        <div className='flex flex-col gap-10'>
          {/* Invoice to Pay Header */}
          <div className="flex flex-col gap-[8px] w-full pr-[16%] text-left items-start justify-start py-4">
            {/* Public logo (black in light theme, white in dark theme); link to dashboard when URL configured */}
            {hasLogo && (
              <div className="flex justify-start items-center pb-4">
                {logoHref ? (
                  <a href={logoHref} className="focus:outline-none focus:ring-2 focus:ring-neutral-400 dark:focus:ring-neutral-500 rounded">
                    {publicLogoBlack && (
                      <img
                        src={publicLogoBlack}
                        alt=""
                        className="max-h-16 dark:hidden object-contain object-left"
                      />
                    )}
                    {publicLogoWhite && (
                      <img
                        src={publicLogoWhite}
                        alt=""
                        className="max-h-16 hidden dark:block object-contain object-left"
                      />
                    )}
                  </a>
                ) : (
                  <>
                    {publicLogoBlack && (
                      <img
                        src={publicLogoBlack}
                        alt=""
                        className="max-h-16 dark:hidden object-contain object-left"
                      />
                    )}
                    {publicLogoWhite && (
                      <img
                        src={publicLogoWhite}
                        alt=""
                        className="max-h-16 hidden dark:block object-contain object-left"
                      />
                    )}
                  </>
                )}
              </div>
            )}
            {remainingAmount > 0 && (
              <>
                <h1 className="text-neutral-900 dark:text-white font-bold text-left text-4xl">Facture à payer</h1>
                <p className="text-xs text-neutral-600 dark:text-neutral-400">
                  Vous avez une facture à payer de {formatCurrency(totalAmount)} avant le {dueDateFormatted}.
                </p>
              </>
            )}
            {remainingAmount === 0 && (
              <>
                <h1 className="text-neutral-900 dark:text-white font-bold text-left text-4xl">Facture payée</h1>
                <p className="text-xs text-neutral-600 dark:text-neutral-400">
                  Vous avez une facture de {formatCurrency(totalAmount)} qui a été payée.
                </p>
              </>
            )}
          </div>
          
          {(paymentStatus === 'success' || paymentStatus === 'cancelled' || (invoiceIsOverdue && !isPaid)) && (
            <div className="flex flex-col gap-2">
              {/* Status Badge */}
              {paymentStatus === 'success' && (
                <Card padding='sm' spacing='sm' variant='success'>
                  <p className="text-green-700 dark:text-green-400 font-medium">✓ Paiement effectué avec succès !</p>
                  <p className="text-sm text-neutral-600 dark:text-neutral-400">Vous recevrez un email de confirmation sous peu.</p>
                </Card>
              )}
              
              {paymentStatus === 'cancelled' && (
                <Card padding='sm' spacing='sm' variant='warning'>
                  <p className="text-yellow-700 dark:text-yellow-400 font-medium">Le paiement a été annulé</p>
                  <p className="text-sm text-neutral-600 dark:text-neutral-400">Vous pouvez réessayer ci-dessous.</p>
                </Card>
              )}
              
              {(invoiceIsOverdue && !isPaid) && (
                <Card padding='sm' spacing='sm' variant='danger'>
                  <p className="text-red-700 dark:text-red-400 font-medium">Cette facture est en retard. Veuillez la payer le plus rapidement possible.</p>
                </Card>
              )}
            </div>
          )}
          
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Invoice Details */}
            <div className="lg:col-span-2 space-y-6">
              {/* Invoice Amount Section */}
              <Card padding='sm' spacing='sm'>
                <h2 className="text-neutral-900 dark:text-white text-sm font-semibold">Montant de la facture</h2>
                <div className="text-neutral-900 dark:text-white font-bold text-left text-2xl">
                  {formatCurrency(totalAmount)}
                </div>
                {remainingAmount > 0 && (
                  <p className="text-left text-xs text-neutral-600 dark:text-neutral-400">
                    Payable avant le {dueDateFormatted} ({daysRemaining > 0 ? `${daysRemaining} jours restants` : 'En retard'})
                  </p>
                )}
                {remainingAmount === 0 && (
                  <p className="text-left text-xs text-neutral-600 dark:text-neutral-400">
                    Payable avant le {dueDateFormatted}
                  </p>
                )}
              </Card>

              {/* Downloads Section */}
              <Card padding='sm' spacing='sm'>
                <h2 className="text-neutral-900 dark:text-white text-sm font-semibold">Téléchargements</h2>
                <div className="flex flex-col gap-2 items-start justify-start">
                  <button
                    onClick={() => {
                      const pdfUrl = token 
                        ? `/zen/invoice/${token}/pdf`
                        : `/zen/invoice/${invoice.token}/pdf`;
                      window.open(pdfUrl, '_blank');
                    }}
                    className="p-0 text-sm text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400 hover:underline cursor-pointer"
                  >
                    Facture # {invoice.invoice_number}
                  </button>
                  {isPaid && (
                    <button
                      onClick={() => {
                        const receiptUrl = token 
                          ? `/zen/invoice/${token}/receipt`
                          : `/zen/invoice/${invoice.token}/receipt`;
                        window.open(receiptUrl, '_blank');
                      }}
                      className="p-0 text-sm text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400 hover:underline cursor-pointer"
                    >
                      Reçu # {invoice.invoice_number}
                    </button>
                  )}
                </div>
              </Card>

              {/* Items Table */}
              <Card padding="none">
                <Table 
                  columns={invoiceItemsColumns}
                  data={invoice.items}
                  emptyMessage="Aucun article trouvé"
                  emptyDescription="Cette facture n'a aucun article"
                />
                
                {/* Totals Section */}
                {invoice.items && invoice.items.length > 0 && (
                  <div className="border-t border-neutral-200 dark:border-neutral-700/30 -mt-4">
                    <div className="px-6 py-4">
                      <div className="flex justify-end">
                        <div className="w-full md:w-64 space-y-2">
                          {/* Subtotal */}
                          <div className="flex justify-between items-center">
                            <span className="text-sm font-medium text-neutral-600 dark:text-gray-300">Sous-total</span>
                            <span className="text-sm font-medium text-neutral-900 dark:text-white">
                              {formatCurrency(invoice.items.reduce((sum, item) => sum + parseFloat(item.total || 0), 0))}
                            </span>
                          </div>
                          
                          {/* Interest (if applicable) */}
                          {hasInterest && (
                            <div className="flex justify-between items-center">
                              <span className="text-sm font-medium text-yellow-600 dark:text-yellow-400">Intérêt</span>
                              <span className="text-sm font-medium text-yellow-600 dark:text-yellow-400">
                                {formatCurrency(interestAmount)}
                              </span>
                            </div>
                          )}
                          
                          {/* Total */}
                          <div className="flex justify-between items-center border-t border-neutral-300 dark:border-neutral-600/50 pt-2">
                            <span className="text-base font-semibold text-neutral-900 dark:text-white">Total</span>
                            <span className="text-base font-semibold text-neutral-900 dark:text-white">
                              {formatCurrency(totalWithInterest)}
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </Card>
              
              {/* Notes */}
              {invoice.notes && (
                <Card>
                  <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notes</h3>
                  <p className="text-neutral-600 dark:text-neutral-400 whitespace-pre-wrap">{invoice.notes}</p>
                </Card>
              )}
            </div>
            
            {/* Payment Section */}
            <div className="lg:col-span-1 flex flex-col gap-4">
              <Card padding="sm" spacing="sm">
                {isPaid ? (
                  <div className="text-center py-8">
                    <div className="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                      <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <p className="text-green-700 dark:text-green-400 font-medium mb-2">Payé en totalité</p>
                    <p className="text-sm text-neutral-600 dark:text-neutral-400">
                      Payé le {formatDateForDisplay(invoice.paid_at, DATE_LOCALE)}
                    </p>
                  </div>
                ) : (
                  <div className="flex flex-col gap-4">
                    <div className="flex flex-col gap-1">
                      <p className="block text-xs font-medium text-neutral-600 dark:text-neutral-400">Montant à payer</p>
                      <p className="text-3xl font-bold text-neutral-900 dark:text-white">
                        {formatCurrency(remainingAmount)}
                      </p>
                    </div>
                    
                    <Select
                      label="Méthode de paiement"
                      value={paymentMethod}
                      onChange={setPaymentMethod}
                      options={paymentMethodOptions}
                      placeholder="Sélectionner une méthode de paiement..."
                      required
                    />
                    
                    {(paymentMethod === 'stripe') && (
                      <button
                        onClick={handlePayment}
                        disabled={isProcessing}
                        className="w-full cursor-pointer px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-neutral-400 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors"
                      >
                        {isProcessing ? "Traitement..." : `Payer ${formatCurrency(remainingAmount)}`}
                      </button>
                    )}
                    
                    {paymentMethod === 'other' && (
                      <p className="text-xs text-neutral-500 dark:text-neutral-400 text-center">
                        Veuillez nous contacter pour les instructions de paiement.
                      </p>
                    )}
                  </div>
                )}
              </Card>

              {paymentMethod === 'interac' && interacEnabled && interacEmail && interacCredentials && (
                <Card padding='sm' spacing='sm'>
                  <h2 className="text-neutral-900 dark:text-white text-sm font-semibold">Virement Interac</h2>
                  <p className="text-sm text-neutral-600 dark:text-neutral-400">
                    Veuillez envoyer un virement Interac aux informations suivantes :
                  </p>
                  
                  <div className="space-y-2">
                    <div className='bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700 rounded-lg p-2'>
                      <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-1">Courriel</p>
                      <p className="text-sm text-neutral-900 dark:text-white font-mono">{interacEmail}</p>
                    </div>
                    
                    <div className='bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700 rounded-lg p-2'>
                      <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-1">Question de sécurité</p>
                      <p className="text-sm text-neutral-900 dark:text-white font-mono">{interacCredentials.security_question}</p>
                    </div>
                    
                    <div className='bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700 rounded-lg p-2'>
                      <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-1">Réponse</p>
                      <p className="text-sm text-neutral-900 dark:text-white font-mono">{interacCredentials.security_answer}</p>
                    </div>
                  </div>
                  
                  <div className="mt-4">
                    <p className="text-xs text-neutral-600 dark:text-neutral-400">
                      Votre facture sera marquée comme payée une fois que nous aurons traité votre paiement. Veuillez noter que cela peut prendre un certain temps.
                    </p>
                  </div>
                </Card>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PaymentPage;