/**
 * Receipt PDF Template
 * React-PDF template for generating receipt PDFs
 */

import React from 'react';
import {
  Document,
  Page,
  Text,
  View,
  StyleSheet,
  Image,
} from '@react-pdf/renderer';
import { formatDateForDisplay } from '../../../shared/lib/dates.js';

const LOCALE = 'fr-FR';

// Create styles - Simple black and white design
const styles = StyleSheet.create({
  page: {
    padding: 30,
    fontSize: 10,
    fontFamily: 'Helvetica',
    color: '#000',
  },
  // Header section
  receiptTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  paidBadge: {
    fontSize: 14,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#059669', // Green color for PAID
  },
  datesSection: {
    marginBottom: 25,
    fontSize: 9,
  },
  dateItem: {
    marginBottom: 3,
  },
  dateLabel: {
    fontWeight: 'normal',
  },
  // Transaction section
  transactionSection: {
    marginBottom: 25,
    padding: 10,
    backgroundColor: '#f3f4f6',
    borderRadius: 4,
  },
  transactionTitle: {
    fontSize: 10,
    fontWeight: 'bold',
    marginBottom: 6,
  },
  transactionItem: {
    fontSize: 9,
    marginBottom: 3,
  },
  // Company and Client Info
  infoSection: {
    flexDirection: 'row',
    marginBottom: 25,
  },
  companySection: {
    width: '50%',
    paddingRight: 15,
  },
  clientSection: {
    width: '50%',
    paddingLeft: 15,
  },
  sectionTitle: {
    fontSize: 10,
    fontWeight: 'bold',
    marginBottom: 6,
  },
  infoText: {
    fontSize: 9,
    marginBottom: 2,
    lineHeight: 1.3,
  },
  // Price notice
  priceNotice: {
    fontSize: 15,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'left',
    color: '#059669', // Green for paid amount
  },
  // Table
  table: {
    marginTop: 10,
    marginBottom: 20,
  },
  tableHeader: {
    flexDirection: 'row',
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#E5E5E5',
    fontSize: 9,
    fontWeight: 'bold',
  },
  tableRow: {
    flexDirection: 'row',
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#E5E5E5',
    fontSize: 9,
  },
  tableColDescription: {
    width: '50%',
  },
  tableColQuantity: {
    width: '15%',
    textAlign: 'center',
  },
  tableColPrice: {
    width: '17.5%',
    textAlign: 'right',
  },
  tableColTotal: {
    width: '17.5%',
    textAlign: 'right',
  },
  itemDescription: {
    fontSize: 8,
    marginTop: 2,
    lineHeight: 1.2,
  },
  // Totals
  totalsSection: {
    marginTop: 15,
    marginBottom: 30,
    alignItems: 'flex-end',
  },
  totalRow: {
    flexDirection: 'row',
    paddingVertical: 5,
    width: '35%',
    fontSize: 10,
  },
  totalLabel: {
    width: '60%',
    textAlign: 'right',
    paddingRight: 15,
  },
  totalValue: {
    width: '40%',
    textAlign: 'right',
  },
  // Notes section
  notesSection: {
    marginTop: 20,
    marginBottom: 20,
  },
  notesTitle: {
    fontSize: 10,
    fontWeight: 'bold',
    marginBottom: 6,
  },
  notesText: {
    fontSize: 9,
    lineHeight: 1.4,
  },
  logoSection: {
    position: 'absolute',
    top: 30,
    right: 30,
    alignItems: 'flex-end',
  },
  logoImage: {
    maxWidth: 120,
    maxHeight: 40,
    objectFit: 'contain',
  },
});

/**
 * Format currency
 */
const formatCurrency = (amount) => {
  const currency = process.env.ZEN_CURRENCY_SYMBOL || '$';
  return `${currency}${parseFloat(amount).toFixed(2)}`;
};

/**
 * Format date (using UTC date utilities)
 */
const formatDate = (dateString) => {
  return formatDateForDisplay(dateString, LOCALE, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
};

const PAYMENT_METHOD_LABELS = {
  stripe: 'Carte de crédit (Stripe)',
  cash: 'Comptant',
  check: 'Chèque',
  wire: 'Virement bancaire',
  interac: 'Virement Interac',
  other: 'Autre',
};

/**
 * Format payment method for display
 */
const formatPaymentMethod = (method) => {
  return PAYMENT_METHOD_LABELS[method] || method;
};

/**
 * Receipt PDF Document Component
 */
const ReceiptPDFTemplate = ({ invoice, transaction, companyInfo = {} }) => {
  if (!invoice) {
    return null;
  }

  const clientName = invoice.company_name || `${invoice.first_name} ${invoice.last_name}`;
  const interestAmount = parseFloat(invoice.interest_amount || 0);
  const hasInterest = interestAmount > 0;
  const totalWithInterest = parseFloat(invoice.total_amount) + interestAmount;

  // Default company info
  const company = {
    name: companyInfo.name || process.env.ZEN_MODULE_INVOICE_COMPANY_NAME || 'Your Company',
    address: companyInfo.address || process.env.ZEN_MODULE_INVOICE_COMPANY_ADDRESS || '',
    city: companyInfo.city || process.env.ZEN_MODULE_INVOICE_COMPANY_CITY || '',
    province: companyInfo.province || process.env.ZEN_MODULE_INVOICE_COMPANY_PROVINCE || '',
    postalCode: companyInfo.postalCode || process.env.ZEN_MODULE_INVOICE_COMPANY_POSTAL_CODE || '',
    country: companyInfo.country || process.env.ZEN_MODULE_INVOICE_COMPANY_COUNTRY || '',
    phone: companyInfo.phone || process.env.ZEN_MODULE_INVOICE_COMPANY_PHONE || '',
    email: companyInfo.email || process.env.ZEN_MODULE_INVOICE_COMPANY_EMAIL || '',
  };

  const logoBlackUrl = companyInfo.publicLogoBlack || '';

  return (
    <Document>
      <Page size="LETTER" style={styles.page}>
        {/* Logo top right */}
        {logoBlackUrl && (
          <View style={styles.logoSection}>
            <Image style={styles.logoImage} src={logoBlackUrl} />
          </View>
        )}

        {/* Header: Receipt Number and Status */}
        <View>
          <Text style={styles.receiptTitle}>REÇU #{invoice.invoice_number}</Text>
          <Text style={styles.paidBadge}>PAYÉ</Text>
          <View style={styles.datesSection}>
            <Text style={styles.dateItem}>
              <Text style={styles.dateLabel}>Date de facture : </Text>
              <Text style={{ fontWeight: 'bold' }}>{formatDate(invoice.issue_date)}</Text>
            </Text>
            {transaction && (
              <Text style={styles.dateItem}>
                <Text style={styles.dateLabel}>Date de paiement : </Text>
                <Text style={{ fontWeight: 'bold' }}>{formatDate(transaction.transaction_date)}</Text>
              </Text>
            )}
          </View>
        </View>

        {/* Transaction Information */}
        {transaction && (
          <View style={styles.transactionSection}>
            <Text style={styles.transactionTitle}>Informations de paiement</Text>
            <Text style={styles.transactionItem}>
              <Text style={styles.dateLabel}>Numéro de transaction : </Text>
              <Text style={{ fontWeight: 'bold' }}>{transaction.transaction_number}</Text>
            </Text>
            <Text style={styles.transactionItem}>
              <Text style={styles.dateLabel}>Mode de paiement : </Text>
              <Text style={{ fontWeight: 'bold' }}>{formatPaymentMethod(transaction.payment_method)}</Text>
            </Text>
            <Text style={styles.transactionItem}>
              <Text style={styles.dateLabel}>Montant payé : </Text>
              <Text style={{ fontWeight: 'bold' }}>{formatCurrency(transaction.amount)}</Text>
            </Text>
          </View>
        )}

        {/* Company and Client Info - Side by Side */}
        <View style={styles.infoSection}>
          {/* Company Info */}
          <View style={styles.companySection}>
            <Text style={styles.sectionTitle}>{company.name}</Text>
            {company.address && <Text style={styles.infoText}>{company.address}</Text>}
            {(company.city || company.province || company.postalCode) && (
              <Text style={styles.infoText}>
                {[company.city, company.province, company.postalCode]
                  .filter(Boolean)
                  .join(', ')}
              </Text>
            )}
            {company.country && <Text style={styles.infoText}>{company.country}</Text>}
            {company.phone && <Text style={styles.infoText}>{company.phone}</Text>}
            {company.email && <Text style={styles.infoText}>{company.email}</Text>}
          </View>

          {/* Client Info */}
          <View style={styles.clientSection}>
            <Text style={styles.sectionTitle}>Payé par :</Text>
            <Text style={styles.infoText}>{clientName}</Text>
            {invoice.address && <Text style={styles.infoText}>{invoice.address}</Text>}
            {(invoice.city || invoice.province || invoice.postal_code) && (
              <Text style={styles.infoText}>
                {[invoice.city, invoice.province, invoice.postal_code]
                  .filter(Boolean)
                  .join(', ')}
              </Text>
            )}
            {invoice.country && <Text style={styles.infoText}>{invoice.country}</Text>}
            {invoice.client_email && <Text style={styles.infoText}>{invoice.client_email}</Text>}
          </View>
        </View>

        {/* Amount paid notice */}
        <Text style={styles.priceNotice}>
          {formatCurrency(transaction ? transaction.amount : invoice.total_amount)} payé en entier
        </Text>

        {/* Items Table */}
        <View style={styles.table}>
          <View style={styles.tableHeader}>
            <Text style={styles.tableColDescription}>Description</Text>
            <Text style={styles.tableColQuantity}>Qté</Text>
            <Text style={styles.tableColPrice}>Prix unitaire</Text>
            <Text style={styles.tableColTotal}>Total</Text>
          </View>

          {invoice.items && invoice.items.map((item, index) => (
            <View key={index} style={styles.tableRow}>
              <View style={styles.tableColDescription}>
                <Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
                {item.description && (
                  <Text style={styles.itemDescription}>
                    {item.description}
                  </Text>
                )}
              </View>
              <Text style={styles.tableColQuantity}>{item.quantity}</Text>
              <Text style={styles.tableColPrice}>{formatCurrency(item.unit_price)}</Text>
              <Text style={styles.tableColTotal}>{formatCurrency(item.total)}</Text>
            </View>
          ))}
        </View>

        {/* Totals - Simple Subtotal and Total */}
        <View style={styles.totalsSection}>
          <View style={styles.totalRow}>
            <Text style={styles.totalLabel}>Sous-total</Text>
            <Text style={styles.totalValue}>{formatCurrency(invoice.subtotal)}</Text>
          </View>

          {hasInterest && (
            <View style={styles.totalRow}>
              <Text style={styles.totalLabel}>Intérêts</Text>
              <Text style={styles.totalValue}>{formatCurrency(interestAmount)}</Text>
            </View>
          )}

          <View style={[styles.totalRow, { fontWeight: 'bold', fontSize: 12 }]}>
            <Text style={styles.totalLabel}>Total payé</Text>
            <Text style={styles.totalValue}>{formatCurrency(totalWithInterest)}</Text>
          </View>
        </View>

        {/* Notes Section */}
        {invoice.notes && (
          <View style={styles.notesSection}>
            <Text style={styles.notesTitle}>Notes</Text>
            <Text style={styles.notesText}>{invoice.notes}</Text>
          </View>
        )}

      </Page>
    </Document>
  );
};

export default ReceiptPDFTemplate;