import { useMemo } from 'react';
import { Page, View, Text, Image, Document, Font, StyleSheet } from '@react-pdf/renderer';
// utils
import { fDate } from 'src/utils/format-time';
import { fCurrency } from 'src/utils/format-number';
// types
import { Invoice } from 'src/schemas';
import { createFullAddress } from 'src/utils/create-full-address';
import { getQuantityType } from 'src/utils/get-invoice-quantity-type';
// import signatureImage from 'src/assets/png/signature.png';

// ----------------------------------------------------------------------

Font.register({
  family: 'Roboto',
  fonts: [{ src: '/fonts/Roboto-Regular.ttf' }, { src: '/fonts/Roboto-Bold.ttf' }],
});

const useStyles = () =>
  useMemo(
    () =>
      StyleSheet.create({
        col4: { width: '25%' },
        col8: { width: '75%' },
        col6: { width: '50%' },
        mb4: { marginBottom: 4 },
        mb8: { marginBottom: 8 },
        mb40: { marginBottom: 40 },
        h3: { fontSize: 16, fontWeight: 700 },
        h4: { fontSize: 13, fontWeight: 700 },
        body1: { fontSize: 11 },
        body2: { fontSize: 10 },
        subtitle1: { fontSize: 11, fontWeight: 700 },
        subtitle2: { fontSize: 10, fontWeight: 700 },
        alignRight: { textAlign: 'right' },
        page: {
          fontSize: 9,
          lineHeight: 1.6,
          fontFamily: 'Roboto',
          backgroundColor: '#FFFFFF',
          textTransform: 'capitalize',
          padding: '40px 24px 120px 24px',
        },
        footer: {
          left: 0,
          right: 0,
          bottom: 0,
          padding: 24,
          margin: 'auto',
          borderTopWidth: 1,
          borderStyle: 'solid',
          position: 'absolute',
          borderColor: '#DFE3E8',
        },
        bankInfo: {
          alignItems: 'stretch', // Keeps original alignment from your structure
          flexDirection: 'column',
        },
        bankRow: {
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between', // Ensures the key is left and value is right aligned
          gap: 24,
        },
        bankKey: {
          color: '#808080', // Light gray for the key
        },
        bankValue: {
          textAlign: 'right', // Aligns the value to the right
        },
        signatures: {
          left: 0,
          right: 0,
          bottom: 0,
          padding: 24,
          margin: 'auto',
          borderStyle: 'solid',
          position: 'absolute',
        },
        gridContainer: {
          flexDirection: 'row',
          justifyContent: 'space-between',
        },
        table: {
          display: 'flex',
          width: 'auto',
        },
        tableHead: {
          padding: '5px 5px',
          flexDirection: 'row',
        },
        tableRow: {
          padding: '5px 5px',
          flexDirection: 'row',
          borderBottomWidth: 1,
          borderStyle: 'solid',
          borderColor: '#DFE3E8',
        },
        noBorder: {
          paddingTop: 8,
          paddingBottom: 0,
          borderBottomWidth: 0,
        },
        tableCell_1: {
          width: '5%',
        },
        tableCell_2: {
          width: '50%',
          paddingRight: 16,
        },
        tableCell_3: {
          width: '15%',
        },
      }),
    []
  );

// ----------------------------------------------------------------------

type Props = {
  invoice: Invoice;
  currentStatus: string;
};

export default function InvoiceEEPDF({ invoice, currentStatus }: Props) {
  const {
    items,
    dueDate,
    discount,
    invoiceTo,
    issueDate,
    totalAmount,
    invoiceFrom,
    invoiceNumber,
    subTotal,
    currency,
    quantityType,
  } = invoice;

  const styles = useStyles();

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={[styles.gridContainer, styles.mb40]}>
          <Image source="/logo/logo_single.png" style={{ width: 48, height: 48 }} />

          <View style={{ alignItems: 'stretch', flexDirection: 'column' }}>
            <Text style={styles.h3}>Invoice No. {invoiceNumber}</Text>
            <Text style={styles.body2}>{invoiceFrom.name}</Text>
            {currency === 'EUR' ? (
              <>
                <View style={styles.bankRow}>
                  <Text style={styles.bankKey}>WISE EUROPE SA:</Text>
                  <Text style={styles.bankValue}>
                    {invoiceFrom.bankAccounts?.eur?.accountNumber}
                  </Text>
                </View>
                <View style={styles.bankRow}>
                  <Text style={styles.bankKey}>IBAN:</Text>
                  <Text style={styles.bankValue}>{invoiceFrom.bankAccounts?.eur?.iban}</Text>
                </View>
                <View style={styles.bankRow}>
                  <Text style={styles.bankKey}>SWIFT/BIC:</Text>
                  <Text style={styles.bankValue}>{invoiceFrom.bankAccounts?.eur?.bicSwift}</Text>
                </View>
              </>
            ) : (
              <>
                <View style={styles.bankRow}>
                  <Text style={styles.bankKey}>WISE EUROPE SA:</Text>
                  <Text style={styles.bankValue}>
                    {invoiceFrom.bankAccounts?.usd?.accountNumber}
                  </Text>
                </View>
                <View style={styles.bankRow}>
                  <Text style={styles.bankKey}>ROUTING NUMBER:</Text>
                  <Text style={styles.bankValue}>
                    {invoiceFrom.bankAccounts?.usd?.routingNumber}
                  </Text>
                </View>
                <View style={styles.bankRow}>
                  <Text style={styles.bankKey}>SWIFT/BIC:</Text>
                  <Text style={styles.bankValue}>{invoiceFrom.bankAccounts?.usd?.bicSwift}</Text>
                </View>
              </>
            )}
          </View>
        </View>

        <View style={[styles.gridContainer, styles.mb40, { gap: 16 }]}>
          <View
            style={[
              styles.col6,
              { border: 1, borderColor: '#DFE3E8', borderRadius: 5, padding: 4 },
            ]}
          >
            <Text style={[styles.subtitle1, styles.mb4]}>Invoice from</Text>
            <Text style={[styles.body2, { fontWeight: 700 }]}>{invoiceFrom.name}</Text>
            <Text style={styles.body2}>{createFullAddress(invoiceFrom.address)}</Text>
            <Text style={styles.body2}>{invoiceFrom.phoneNumber}</Text>
            <View style={{ marginTop: 5 }} />
            <Text style={{ ...styles.body2, textTransform: 'lowercase' }}>{invoiceFrom.email}</Text>
          </View>

          <View
            style={[
              styles.col6,
              { border: 1, borderColor: '#DFE3E8', borderRadius: 5, padding: 4 },
            ]}
          >
            <Text style={[styles.subtitle1, styles.mb4]}>Invoice to</Text>
            <Text style={[styles.body2, { fontWeight: 700 }]}>{invoiceTo.name}</Text>
            {invoiceTo.companyId && (
              <Text style={[styles.body2]}>Company ID: {invoiceTo.companyId}</Text>
            )}
            <Text style={styles.body2}>{createFullAddress(invoiceTo.address)}</Text>
            <Text style={styles.body2}>{invoiceTo.phoneNumber}</Text>
            <View style={{ marginTop: 5 }} />
            <Text style={{ ...styles.body2, textTransform: 'lowercase' }}>{invoiceTo.email}</Text>
          </View>
        </View>

        <View style={[styles.gridContainer, styles.mb40]}>
          <View style={styles.col6}>
            <Text style={[styles.subtitle1, styles.mb4]}>Invoice Number</Text>
            <Text style={styles.body2}>{invoiceNumber}</Text>
          </View>
          <View style={styles.col6}>
            <Text style={[styles.subtitle1, styles.mb4]}>Date Issued</Text>
            <Text style={styles.body2}>{fDate(issueDate)}</Text>
          </View>
          <View style={styles.col6}>
            <Text style={[styles.subtitle1, styles.mb4]}>Due date</Text>
            <Text style={styles.body2}>{fDate(dueDate)}</Text>
          </View>
        </View>

        <Text style={[styles.subtitle1, styles.mb8]}>Invoice Details</Text>

        <View style={styles.table}>
          <View>
            <View style={[styles.tableHead, { backgroundColor: 'black', color: 'white' }]}>
              <View style={styles.tableCell_1}>
                <Text style={styles.subtitle1}>#</Text>
              </View>

              <View style={styles.tableCell_2}>
                <Text style={styles.subtitle1}>Description</Text>
              </View>

              <View style={styles.tableCell_3}>
                <Text style={styles.subtitle1}>{getQuantityType(invoice)}</Text>
              </View>

              <View style={styles.tableCell_3}>
                <Text style={styles.subtitle1}>Unit price</Text>
              </View>

              <View style={styles.tableCell_3}>
                <Text style={styles.subtitle1}>VAT</Text>
              </View>

              <View style={[styles.tableCell_3, styles.alignRight]}>
                <Text style={styles.subtitle1}>Total</Text>
              </View>
            </View>
          </View>

          <View>
            {items.map((item, index) => (
              <View style={styles.tableRow} key={item.title}>
                <View style={styles.tableCell_1}>
                  <Text>{index + 1}</Text>
                </View>

                <View style={styles.tableCell_2}>
                  <Text style={styles.subtitle2}>{item.title}</Text>
                  <Text>{item.description}</Text>
                </View>

                <View style={styles.tableCell_3}>
                  <Text>{item.quantity}</Text>
                </View>

                <View style={styles.tableCell_3}>
                  <Text>{item.price}</Text>
                </View>

                <View style={styles.tableCell_3}>
                  <Text>0%&nbsp;&nbsp;[1]</Text>
                </View>

                <View style={[styles.tableCell_3, styles.alignRight]}>
                  <Text>{fCurrency(item.price * item.quantity, currency)}</Text>
                </View>
              </View>
            ))}

            <View style={[styles.tableRow, styles.noBorder]}>
              <View style={styles.tableCell_1} />
              <View style={styles.tableCell_2} />
              <View style={styles.tableCell_3} />
              <View style={styles.tableCell_3}>
                <Text>Subtotal</Text>
              </View>
              <View style={[styles.tableCell_3, styles.alignRight]}>
                <Text>{fCurrency(subTotal, currency)}</Text>
              </View>
            </View>

            <View style={[styles.tableRow, styles.noBorder]}>
              <View style={styles.tableCell_1} />
              <View style={styles.tableCell_2} />
              <View style={styles.tableCell_3} />
              <View style={styles.tableCell_3}>
                <Text>VAT&nbsp;&nbsp;[1]</Text>
              </View>
              <View style={[styles.tableCell_3, styles.alignRight]}>
                <Text>0,00</Text>
              </View>
            </View>

            {!!discount && (
              <View style={[styles.tableRow, styles.noBorder]}>
                <View style={styles.tableCell_1} />
                <View style={styles.tableCell_2} />
                <View style={styles.tableCell_3} />
                <View style={styles.tableCell_3}>
                  <Text>Discount</Text>
                </View>
                <View style={[styles.tableCell_3, styles.alignRight]}>
                  <Text>{fCurrency(-discount, currency)}</Text>
                </View>
              </View>
            )}

            {/* <View style={[styles.tableRow, styles.noBorder]}>
              <View style={styles.tableCell_1} />
              <View style={styles.tableCell_2} />
              <View style={styles.tableCell_3} />
              <View style={styles.tableCell_3}>
                <Text>Taxes</Text>
              </View>
              <View style={[styles.tableCell_3, styles.alignRight]}>
                <Text>{fCurrency(taxes)}</Text>
              </View>
            </View> */}

            <View style={[styles.tableRow, styles.noBorder]}>
              <View style={styles.tableCell_1} />
              <View style={styles.tableCell_2} />
              <View style={styles.tableCell_3} />
              <View style={styles.tableCell_3}>
                <Text style={styles.h4}>Total</Text>
              </View>
              <View style={[styles.tableCell_3, styles.alignRight]}>
                <Text style={styles.h4}>{fCurrency(totalAmount, currency)}</Text>
              </View>
            </View>
          </View>
        </View>

        <View style={[styles.gridContainer, styles.footer]} fixed>
          <View style={styles.col8}>
            <Text style={styles.subtitle2}>VAT references</Text>
            <Text>[1] - Reverse charge 0%</Text>
          </View>
          <View style={[styles.col4, styles.alignRight]}>
            <Text style={[styles.subtitle2]}>Have a question?</Text>
            <Text style={{ textTransform: 'lowercase' }}>{invoiceFrom.email}</Text>
          </View>
        </View>
      </Page>
    </Document>
  );
}
