import { Document, Page, Text, View, StyleSheet, Font } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    padding: 50,
    fontSize: 10,
    color: '#333',
    fontFamily: 'Helvetica',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 40,
  },
  companyInfo: {
    textAlign: 'right',
  },
  title: {
    fontSize: 24,
    color: '#000',
    marginBottom: 20,
  },
  section: {
    marginBottom: 20,
  },
  label: {
    fontSize: 8,
    color: '#999',
    textTransform: 'uppercase',
    marginBottom: 2,
  },
  table: {

    width: 'auto',
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: '#eee',
    borderRightWidth: 0,
    borderBottomWidth: 0,
    marginBottom: 20,
  },
  tableRow: {
    margin: 'auto',
    flexDirection: 'row',
  },
  tableCol: {
    width: '60%',
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: '#eee',
    borderLeftWidth: 0,
    borderTopWidth: 0,
    padding: 8,
  },
  tableColPrice: {
    width: '40%',
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: '#eee',
    borderLeftWidth: 0,
    borderTopWidth: 0,
    padding: 8,
    textAlign: 'right',
  },
  tableCell: {
    margin: 'auto',
    marginTop: 5,
    fontSize: 10,
  },
  total: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginTop: 20,
    borderTop: 1,
    borderColor: '#000',
    paddingTop: 10,
  },
  totalLabel: {
    fontSize: 14,
    fontWeight: 'bold',
  },
  footer: {
    position: 'absolute',
    bottom: 30,
    left: 50,
    right: 50,
    textAlign: 'center',
    color: '#999',
    fontSize: 8,
    borderTop: 1,
    borderColor: '#eee',
    paddingTop: 10,
  },
});

export const InvoicePDF = ({ order, orderSnapshot, customer }: any) => {
  const items = orderSnapshot?.items ?? [];
  const taxRate = orderSnapshot?.tax_rate ?? 19;

  const oneTimeItems = items.filter((item: any) => item.billing_interval === 'one_time');
  const monthlyItems = items.filter((item: any) => item.billing_interval === 'monthly');

  const oneTimeNet = oneTimeItems.reduce((sum: number, item: any) => sum + (item.item_total || 0), 0);
  const oneTimeTax = Math.round(oneTimeNet * (taxRate / 100) * 100) / 100;
  const oneTimeGross = Math.round((oneTimeNet + oneTimeTax) * 100) / 100;

  const monthlyNet = monthlyItems.reduce((sum: number, item: any) => sum + (item.item_total || 0), 0);
  const monthlyTax = Math.round(monthlyNet * (taxRate / 100) * 100) / 100;
  const monthlyGross = Math.round((monthlyNet + monthlyTax) * 100) / 100;

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.header}>
          <View>
            <Text style={{ fontSize: 18, fontWeight: 'bold' }}>CASPOS</Text>
            <Text>Software Solutions</Text>
          </View>
          <View style={styles.companyInfo}>
            <Text>CASPOS Computerabrechnungssysteme GmbH</Text>
            <Text>Alte Bundesstraße 16</Text>
            <Text>76846 Hauenstein</Text>
            <Text>Deutschland</Text>
          </View>
        </View>

        <Text style={styles.title}>Anfragebestätigung</Text>

        <View style={styles.section}>
          <Text style={styles.label}>Anfragender Kunde</Text>
          <Text>{customer.company_name}</Text>
          <Text>{customer.first_name} {customer.last_name}</Text>
          <Text>{customer.address}</Text>
          <Text>{customer.zip_code} {customer.city}</Text>
          <Text>USt-IdNr: {customer.vat_id}</Text>
          {customer.bank_iban && (
            <Text style={{ marginTop: 4, color: '#666' }}>
              Bank: {customer.bank_name || '-'} · IBAN: {customer.bank_iban} · BIC: {customer.bank_bic || '-'} · Inhaber: {customer.bank_owner || '-'}
            </Text>
          )}
        </View>

        <View style={styles.section}>
          <Text style={styles.label}>Anfragedetails</Text>
          <Text>Anfrage-Nummer: {order.order_number || order.id}</Text>
          <Text>Datum: {new Date(order.created_at || Date.now()).toLocaleDateString('de-DE')}</Text>
        </View>

        {orderSnapshot?.price_multiplier !== null && orderSnapshot?.price_multiplier !== undefined && (
          <View style={[styles.section, { backgroundColor: '#f9f9f9', padding: 8 }]}>
            <Text style={styles.label}>Update-Konditionen</Text>
            <Text style={{ fontWeight: 'bold' }}>
              {orderSnapshot.price_multiplier === 0
                ? "Update (0-12 Monate): 100% Rabatt (inklusive)"
                : orderSnapshot.price_multiplier === 0.15
                  ? "Update (13-14 Monate): 15% vom Listenpreis"
                  : orderSnapshot.price_multiplier === 0.30
                    ? "Update (15-25 Monate): 30% vom Listenpreis"
                    : orderSnapshot.price_multiplier === 0.45
                      ? "Update (26-37 Monate): 45% vom Listenpreis"
                      : orderSnapshot.price_multiplier === 0.60
                        ? "Update (38-49 Monate): 60% vom Listenpreis"
                        : orderSnapshot.price_multiplier === 0.90
                          ? "Neukauf (>= 50 Monate): 10% Rabatt auf Neukauf"
                          : `Gebühr: ${orderSnapshot.price_multiplier * 100}%`}
            </Text>
            {orderSnapshot.last_license_date && (
              <Text style={{ marginTop: 2, color: '#666' }}>
                Letzte Lizenz vom: {new Date(orderSnapshot.last_license_date).toLocaleDateString('de-DE')}
              </Text>
            )}
          </View>
        )}

        <View style={styles.table}>
          <View style={[styles.tableRow, { backgroundColor: '#f9f9f9' }]}>
            <View style={styles.tableCol}><Text style={{ fontWeight: 'bold' }}>Beschreibung</Text></View>
            <View style={styles.tableColPrice}><Text style={{ fontWeight: 'bold' }}>Preis (netto)</Text></View>
          </View>

          {items.map((item: any, idx: number) => (
            <View key={idx}>
              <View style={styles.tableRow}>
                <View style={styles.tableCol}>
                  <Text style={{ fontWeight: 'bold' }}>{item.product_name} ({item.category_name})</Text>
                </View>
                <View style={styles.tableColPrice}>
                  <Text>
                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.base_price)}
                    {' '}{item.billing_interval === 'one_time' ? 'einmalig' : 'mtl.'}
                  </Text>
                </View>
              </View>
              {item.selected_modules?.map((mod: any, mIdx: number) => {
                const qty = mod.quantity || 1;
                const price = mod.total_price ?? (mod.price * qty);
                const hasQty = qty > 1;
                return (
                  <View key={mIdx} style={styles.tableRow}>
                    <View style={[styles.tableCol, { paddingLeft: 20 }]}>
                      <Text style={{ color: '#666' }}>
                        + {mod.module_name} {hasQty ? `(x${qty})` : ''}
                      </Text>
                    </View>
                    <View style={styles.tableColPrice}>
                      <Text style={{ color: '#666' }}>
                        +{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(price)}
                      </Text>
                    </View>
                  </View>
                );
              })}
            </View>
          ))}
        </View>

        <View style={styles.total}>
          <View style={{ width: '50%' }}>
            {oneTimeNet > 0 && (
              <View style={{ marginBottom: monthlyNet > 0 ? 10 : 0 }}>
                {monthlyNet > 0 && (
                  <Text style={{ fontWeight: 'bold', marginBottom: 4, fontSize: 11 }}>Einmaliger Betrag:</Text>
                )}
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 3 }}>
                  <Text>Netto-Zwischensumme:</Text>
                  <Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</Text>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 3 }}>
                  <Text>zzgl. {taxRate}% USt:</Text>
                  <Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</Text>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 5, borderTopWidth: 1, borderTopColor: '#000', paddingTop: 5 }}>
                  <Text style={styles.totalLabel}>
                    {monthlyNet > 0 ? 'Gesamtbetrag einmalig (brutto):' : 'Gesamtbetrag (brutto):'}
                  </Text>
                  <Text style={styles.totalLabel}>
                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}
                  </Text>
                </View>
              </View>
            )}

            {oneTimeNet > 0 && monthlyNet > 0 && (
              <View style={{ borderTopWidth: 1, borderTopColor: '#eee', marginVertical: 10 }} />
            )}

            {monthlyNet > 0 && (
              <View>
                {oneTimeNet > 0 && (
                  <Text style={{ fontWeight: 'bold', marginBottom: 4, fontSize: 11 }}>Monatlicher Betrag:</Text>
                )}
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 3 }}>
                  <Text>Netto-Zwischensumme:</Text>
                  <Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</Text>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 3 }}>
                  <Text>zzgl. {taxRate}% USt:</Text>
                  <Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</Text>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 5, borderTopWidth: 1, borderTopColor: '#000', paddingTop: 5 }}>
                  <Text style={styles.totalLabel}>
                    {oneTimeNet > 0 ? 'Gesamtbetrag monatlich (brutto):' : 'Gesamtbetrag (brutto):'}
                  </Text>
                  <Text style={styles.totalLabel}>
                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.
                  </Text>
                </View>
              </View>
            )}
          </View>
        </View>

        <View style={styles.footer}>
          <Text>Vielen Dank für Ihre Bestellung!</Text>
          <Text>Dies ist ein automatisch generiertes Dokument.</Text>
        </View>
      </Page>
    </Document>
  );
};