'use client';

import { Card } from "@alga-psa/ui/components/Card";
import { Badge } from "@alga-psa/ui/components/Badge";
import { Table } from "@alga-psa/ui/components/Table";
import { Button } from "@alga-psa/ui/components/Button";
import { Dialog, DialogContent } from "@alga-psa/ui/components/Dialog";
import { Input } from "@alga-psa/ui/components/Input";
import { Checkbox } from "@alga-psa/ui/components/Checkbox";
import { useState, useEffect } from 'react';
import { useTranslation } from '@alga-psa/ui/lib/i18n/client';
import {
  getInvoices,
  getBillingCycles,
  getPaymentMethods,
  addPaymentMethod,
  removePaymentMethod,
  setDefaultPaymentMethod,
  type Invoice,
  type BillingCycle,
  type PaymentMethod
} from "@alga-psa/client-portal/actions";

// Validation rules
const CARD_NUMBER_REGEX = /^[0-9]{16}$/;
const CVV_REGEX = /^[0-9]{3,4}$/;
const MONTH_REGEX = /^(0[1-9]|1[0-2])$/;
const YEAR_REGEX = /^20[2-9][0-9]$/;

interface ValidationErrors {
  cardNumber?: string;
  expMonth?: string;
  expYear?: string;
  cvv?: string;
}

export default function BillingSection() {
  const { t: tAccount } = useTranslation('client-portal');
  const { t: tBilling } = useTranslation('features/billing');
  const { t: tCommon } = useTranslation('common');
  const tAccountBilling = (key: string, options?: Record<string, any> | string): string => {
    if (typeof options === 'string') {
      return tAccount(`account.billing.${key}`, { defaultValue: options });
    }
    return tAccount(`account.billing.${key}`, options) as string;
  };
  const [billingCycles, setBillingCycles] = useState<BillingCycle[]>([]);
  const [invoices, setInvoices] = useState<Invoice[]>([]);
  const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');
  const [isAddingPayment, setIsAddingPayment] = useState(false);
  const [addPaymentError, setAddPaymentError] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);
  const [validationErrors, setValidationErrors] = useState<ValidationErrors>({});

  // Form state for adding payment method
  const [paymentForm, setPaymentForm] = useState({
    cardNumber: '',
    expMonth: '',
    expYear: '',
    cvv: '',
    setDefault: true
  });

  useEffect(() => {
    const loadBillingData = async () => {
      try {
        const [invoicesData, cyclesData, methodsData] = await Promise.all([
          getInvoices(),
          getBillingCycles(),
          getPaymentMethods()
        ]);
        setInvoices(invoicesData);
        setBillingCycles(cyclesData);
        setPaymentMethods(methodsData);
      } catch (err) {
        setError(err instanceof Error ? err.message : tAccountBilling('loadError', 'Failed to load billing data'));
      } finally {
        setIsLoading(false);
      }
    };

    loadBillingData();
  }, []);

  const validatePaymentForm = (): boolean => {
    const errors: ValidationErrors = {};
    let isValid = true;

    if (!CARD_NUMBER_REGEX.test(paymentForm.cardNumber)) {
      errors.cardNumber = tAccountBilling('validation.cardNumber', 'Please enter a valid 16-digit card number');
      isValid = false;
    }

    if (!MONTH_REGEX.test(paymentForm.expMonth)) {
      errors.expMonth = tAccountBilling('validation.expMonth', 'Please enter a valid month (01-12)');
      isValid = false;
    }

    if (!YEAR_REGEX.test(paymentForm.expYear)) {
      errors.expYear = tAccountBilling('validation.expYear', 'Please enter a valid year (2024-2099)');
      isValid = false;
    }

    if (!CVV_REGEX.test(paymentForm.cvv)) {
      errors.cvv = tAccountBilling('validation.cvv', 'Please enter a valid CVV');
      isValid = false;
    }

    setValidationErrors(errors);
    return isValid;
  };

  const handleAddPayment = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setAddPaymentError('');
    
    if (!validatePaymentForm()) {
      return;
    }

    setIsProcessing(true);

    try {
      // This is a placeholder - you would integrate with your payment processor here
      const token = await processPaymentDetails(paymentForm);
      
      await addPaymentMethod({
        type: 'credit_card',
        token,
        setDefault: paymentForm.setDefault
      });

      // Refresh payment methods
      const updatedMethods = await getPaymentMethods();
      setPaymentMethods(updatedMethods);
      
      // Reset form and close dialog
      setPaymentForm({
        cardNumber: '',
        expMonth: '',
        expYear: '',
        cvv: '',
        setDefault: true
      });
      setIsAddingPayment(false);
    } catch (err) {
      setAddPaymentError(err instanceof Error ? err.message : tAccountBilling('addPaymentError', 'Failed to add payment method'));
    } finally {
      setIsProcessing(false);
    }
  };

  const handleRemovePayment = async (id: string) => {
    try {
      await removePaymentMethod(id);
      const updatedMethods = await getPaymentMethods();
      setPaymentMethods(updatedMethods);
    } catch (err) {
      setError(err instanceof Error ? err.message : tAccountBilling('removePaymentError', 'Failed to remove payment method'));
    }
  };

  const handleSetDefaultPayment = async (id: string) => {
    try {
      await setDefaultPaymentMethod(id);
      const updatedMethods = await getPaymentMethods();
      setPaymentMethods(updatedMethods);
    } catch (err) {
      setError(err instanceof Error ? err.message : tAccountBilling('setDefaultError', 'Failed to set default payment method'));
    }
  };

  // This is a placeholder function - replace with actual payment processor integration
  const processPaymentDetails = async (details: typeof paymentForm) => {
    // Simulate payment processor API call
    return new Promise<string>((resolve) => {
      setTimeout(() => {
        resolve('mock_payment_token');
      }, 500);
    });
  };

  const formatAmount = (amount: number, currencyCode: string = 'USD') => {
    try {
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: currencyCode,
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(Number(amount));
    } catch (err) {
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(0);
    }
  };

  if (isLoading) {
    return <div className="text-center py-8">{tAccountBilling('loadingBillingInfo', 'Loading billing information...')}</div>;
  }

  if (error) {
    return (
      <div className="text-center py-8 text-red-500">
        {error}
      </div>
    );
  }

  return (
    <div className="space-y-8">
      {/* Billing Overview */}
      <section>
        <h3 className="text-lg font-medium mb-4">{tAccountBilling('overviewTitle', 'Billing Overview')}</h3>
        <Card className="p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 className="text-sm font-medium mb-2">{tAccountBilling('paymentMethodsTitle', 'Payment Methods')}</h4>
              {paymentMethods.length === 0 ? (
                <p className="text-sm text-gray-600 mb-4">
                  {tAccountBilling('noPaymentMethods', 'No payment methods on file')}
                </p>
              ) : (
                <div className="space-y-4">
                  {paymentMethods.map((method): React.JSX.Element => (
                    <div key={method.id} className="flex items-center justify-between">
                      <div>
                        <p className="text-sm">
                          {method.type === 'credit_card' ? '•••• ' : ''}
                          {method.last4}
                          {method.expMonth && method.expYear && ` (${method.expMonth}/${method.expYear})`}
                          {method.isDefault && ` ${tAccountBilling('labels.defaultTag', '(Default)')}`}
                        </p>
                      </div>
                      <div className="flex space-x-2">
                        {!method.isDefault && (
                          <Button
                            id={`set-default-payment-${method.id}`}
                            variant="outline"
                            size="sm"
                            onClick={() => handleSetDefaultPayment(method.id)}
                          >
                            {tAccountBilling('actions.setDefault', 'Set Default')}
                          </Button>
                        )}
                        <Button
                          id={`remove-payment-${method.id}`}
                          variant="ghost"
                          size="sm"
                          onClick={() => handleRemovePayment(method.id)}
                        >
                          {tAccountBilling('actions.remove', 'Remove')}
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
              <Button
                id="add-payment-method"
                variant="outline"
                className="mt-4"
                onClick={() => setIsAddingPayment(true)}
              >
                {tAccountBilling('actions.addPaymentMethod', 'Add Payment Method')}
              </Button>
            </div>
            <div>
              <h4 className="text-sm font-medium mb-2">{tAccountBilling('billingCycleTitle', 'Billing Cycle')}</h4>
              <p className="text-sm text-gray-600">
                {billingCycles[0]?.period || tAccountBilling('noBillingCycle', 'No billing cycle found')}
              </p>
            </div>
          </div>
        </Card>
      </section>

      {/* Add Payment Method Dialog */}
      <Dialog isOpen={isAddingPayment} onClose={() => setIsAddingPayment(false)}>
        <DialogContent>
          <form onSubmit={handleAddPayment} className="space-y-4">
            <h3 className="text-lg font-medium">{tAccountBilling('actions.addPaymentMethod', 'Add Payment Method')}</h3>
            
            <div>
              <label htmlFor="cardNumber" className="block text-sm font-medium mb-1">
                {tAccountBilling('fields.cardNumber', 'Card Number')}
              </label>
              <Input
                id="cardNumber"
                value={paymentForm.cardNumber}
                onChange={(e) => setPaymentForm(prev => ({
                  ...prev,
                  cardNumber: e.target.value
                }))}
                maxLength={16}
                placeholder="1234 5678 9012 3456"
                className={validationErrors.cardNumber ? 'border-red-500' : ''}
              />
              {validationErrors.cardNumber && (
                <p className="mt-1 text-sm text-red-500">{validationErrors.cardNumber}</p>
              )}
            </div>

            <div className="grid grid-cols-3 gap-4">
              <div>
                <label htmlFor="expMonth" className="block text-sm font-medium mb-1">
                  {tAccountBilling('fields.expiryMonth', 'Month')}
                </label>
                <Input
                  id="expMonth"
                  value={paymentForm.expMonth}
                  onChange={(e) => setPaymentForm(prev => ({
                    ...prev,
                    expMonth: e.target.value
                  }))}
                  maxLength={2}
                  placeholder="MM"
                  className={validationErrors.expMonth ? 'border-red-500' : ''}
                />
                {validationErrors.expMonth && (
                  <p className="mt-1 text-sm text-red-500">{validationErrors.expMonth}</p>
                )}
              </div>

              <div>
                <label htmlFor="expYear" className="block text-sm font-medium mb-1">
                  {tAccountBilling('fields.expiryYear', 'Year')}
                </label>
                <Input
                  id="expYear"
                  value={paymentForm.expYear}
                  onChange={(e) => setPaymentForm(prev => ({
                    ...prev,
                    expYear: e.target.value
                  }))}
                  maxLength={4}
                  placeholder="YYYY"
                  className={validationErrors.expYear ? 'border-red-500' : ''}
                />
                {validationErrors.expYear && (
                  <p className="mt-1 text-sm text-red-500">{validationErrors.expYear}</p>
                )}
              </div>

              <div>
                <label htmlFor="cvv" className="block text-sm font-medium mb-1">
                  {tAccountBilling('fields.cvv', 'CVV')}
                </label>
                <Input
                  id="cvv"
                  value={paymentForm.cvv}
                  onChange={(e) => setPaymentForm(prev => ({
                    ...prev,
                    cvv: e.target.value
                  }))}
                  maxLength={4}
                  placeholder="123"
                  className={validationErrors.cvv ? 'border-red-500' : ''}
                />
                {validationErrors.cvv && (
                  <p className="mt-1 text-sm text-red-500">{validationErrors.cvv}</p>
                )}
              </div>
            </div>

            <div className="flex items-center">
              <Checkbox
                id="setDefault"
                label="Set as default payment method"
                checked={paymentForm.setDefault}
                onChange={(e) => setPaymentForm(prev => ({
                  ...prev,
                  setDefault: (e.target as HTMLInputElement).checked
                }))}
              />
              <label htmlFor="setDefault" className="text-sm">
                {tAccountBilling('fields.setAsDefault', 'Set as default payment method')}
              </label>
            </div>

            {addPaymentError && (
              <p className="text-sm text-red-500">{addPaymentError}</p>
            )}

            <div className="flex justify-end space-x-2">
              <Button
                id="cancel-add-payment"
                type="button"
                variant="ghost"
                onClick={() => setIsAddingPayment(false)}
                disabled={isProcessing}
              >
                {tCommon('common.cancel', 'Cancel')}
              </Button>
              <Button
                id="submit-add-payment"
                type="submit"
                disabled={isProcessing}
              >
                {isProcessing
                  ? tAccountBilling('actions.adding', 'Adding...')
                  : tAccountBilling('actions.addPaymentMethod', 'Add Payment Method')}
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>

      {/* Recent Invoices */}
      <section>
        <h3 className="text-lg font-medium mb-4">{tAccountBilling('recentInvoicesTitle', 'Recent Invoices')}</h3>
        <Table>
          <thead>
            <tr>
              <th>{tBilling('invoice.number', 'Invoice #')}</th>
              <th>{tBilling('invoice.date', 'Invoice Date')}</th>
              <th>{tBilling('invoice.amount', 'Amount')}</th>
              <th>{tBilling('invoice.status', 'Status')}</th>
              <th>{tCommon('common.actions', 'Actions')}</th>
            </tr>
          </thead>
          <tbody>
            {invoices.length === 0 ? (
              <tr>
                <td colSpan={5} className="text-center py-4 text-gray-500">
                  {tBilling('messages.noInvoices', 'No invoices found')}
                </td>
              </tr>
            ) : (
              invoices.map((invoice): React.JSX.Element => (
                <tr key={invoice.id}>
                  <td>{invoice.number}</td>
                  <td>{invoice.date}</td>
                  <td>{formatAmount(invoice.amount)}</td>
                  <td>
                    <Badge variant={
                      invoice.status === 'paid' ? 'success' :
                      invoice.status === 'pending' ? 'warning' :
                      'error'
                    }>
                      {invoice.status}
                    </Badge>
                  </td>
                  <td>
                    <Button id={`view-invoice-${invoice.id}`} variant="ghost" size="sm">
                      {tAccountBilling('actions.view', 'View')}
                    </Button>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </Table>
      </section>

      {/* Billing History */}
      <section>
        <h3 className="text-lg font-medium mb-4">{tAccountBilling('billingHistoryTitle', 'Billing History')}</h3>
        <Table>
          <thead>
            <tr>
              <th>{tAccountBilling('history.period', 'Period')}</th>
              <th>{tAccountBilling('history.startDate', 'Start Date')}</th>
              <th>{tAccountBilling('history.endDate', 'End Date')}</th>
              <th>{tAccountBilling('history.status', 'Status')}</th>
            </tr>
          </thead>
          <tbody>
            {billingCycles.length === 0 ? (
              <tr>
                <td colSpan={4} className="text-center py-4 text-gray-500">
                  {tAccountBilling('history.empty', 'No billing history available')}
                </td>
              </tr>
            ) : (
              billingCycles.map((cycle): React.JSX.Element => (
                <tr key={cycle.id}>
                  <td>{cycle.period}</td>
                  <td>{cycle.startDate}</td>
                  <td>{cycle.endDate}</td>
                  <td>
                    <Badge variant={
                      cycle.status === 'active' ? 'success' :
                      cycle.status === 'upcoming' ? 'info' :
                      'default-muted'
                    }>
                      {cycle.status}
                    </Badge>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </Table>
      </section>
    </div>
  );
}
