lti-web-client/src/components/pages/marketing/pdf/SalesOrderExport.tsx

import Button from '@/components/Button';
import { Marketing } from '@/types/api/marketing/marketing';
import { Icon } from '@iconify/react';
import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
import { useMemo, useState } from 'react';
import pdfStyles from './styles/MarketingPDFStyles';
import { formatDate, formatNumber } from '@/lib/helper';

interface SalesOrderExportProps {
  data?: Marketing;
  className?: string;
}

const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
  const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
  const salesData = data;

  const handleDownloadPDF = async () => {
    if (!salesData) {
      alert('No sales order data available');
      return;
    }
    setIsGeneratingPDF(true);
    try {
      const blob = await pdf(<PDFDocument data={salesData} />).toBlob();
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `${salesData?.so_number || 'sales-order'}.pdf`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error('Error generating PDF:', error);
      alert('Failed to generate PDF. Please try again.');
    } finally {
      setIsGeneratingPDF(false);
    }
  };

  if (!salesData) {
    return (
      <div className='flex items-center justify-center min-h-screen'>
        <div className='text-gray-500'>No sales order data available</div>
      </div>
    );
  }

  return salesData?.so_number && salesData.so_number !== 'Belum dibuat' ? (
    <Button
      color='primary'
      className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
      onClick={handleDownloadPDF}
      isLoading={isGeneratingPDF}
    >
      <Icon icon='material-symbols:file-open-outline' width={16} height={16} />
      {salesData.so_number}
    </Button>
  ) : null;
};

export default SalesOrderExport;
const PDFDocument = ({ data }: { data: Marketing }) => {
  const grandTotal = useMemo(() => {
    return data?.sales_order?.reduce((a, b) => a + b.total_price, 0) ?? 0;
  }, [data?.sales_order]);

  return (
    <Document>
      <Page size='A4' style={pdfStyles.page}>
        {/* Header Section */}
        <View style={pdfStyles.header}>
          <Image
            src={'https://placehold.co/120x30/png'}
            style={pdfStyles.logo}
            id={'mbu-logo'}
          />
          <Text style={pdfStyles.companyInfo}>PT LUMBUNG TELUR INDONESIA</Text>
          <Text style={pdfStyles.address}>
            SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
            Cipedes, Kec. Sukajadi, Kota Bandung 40162
          </Text>
          <View style={pdfStyles.divider} />
        </View>

        {/* Sales Order Title */}
        <View style={pdfStyles.titleSection}>
          <Text style={pdfStyles.title}>SALES ORDER</Text>
          <View style={pdfStyles.poInfo}>
            <Text>SO Number: {data?.so_number || '-'}</Text>
            <Text>
              Date:{' '}
              {data?.so_date
                ? formatDate(data.so_date, 'DD MMM YYYY')
                : formatDate(new Date(), 'DD MMM YYYY')}
            </Text>
          </View>
        </View>

        {/* Customer Table */}
        <View style={pdfStyles.table}>
          <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
            <View style={pdfStyles.tableCellHeader}>
              <Text>Customer</Text>
            </View>
            <View style={pdfStyles.tableCellHeaderLast}>
              <Text>Sales</Text>
            </View>
          </View>
          <View style={pdfStyles.tableRow}>
            <View style={pdfStyles.tableCell}>
              <Text style={{ fontWeight: 'bold' }}>
                {data?.customer?.name || '-'} ({data?.customer?.type || '-'})
              </Text>
              <Text style={{ marginTop: '2px' }}>
                {data?.customer.email || ''} - {data?.customer.phone || ''}
              </Text>
              <Text></Text>
              <Text>{data?.customer.address || ''}</Text>
              <Text style={{ fontSize: '7px', marginTop: '3px' }}></Text>
            </View>
            <View style={pdfStyles.tableCellLast}>
              <Text style={{ fontWeight: 'bold' }}>
                PT LUMBUNG TELUR INDONESIA
              </Text>
              <Text style={{ fontWeight: 'bold', marginTop: '2px' }}>
                {data?.sales_person?.name || '-'}
              </Text>
              <Text>{data?.sales_person.email}</Text>
            </View>
          </View>
        </View>

        {/* Product Sales Order Table */}
        <Text style={pdfStyles.sectionTitle}>Product Sold</Text>
        <View style={pdfStyles.table}>
          <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
            <View style={pdfStyles.tableCellHeader}>
              <Text>Item Description</Text>
            </View>
            <View style={pdfStyles.tableCellHeader}>
              <Text>From</Text>
            </View>
            <View style={pdfStyles.tableCellHeader}>
              <Text>Unit Price</Text>
            </View>
            <View style={pdfStyles.tableCellHeader}>
              <Text>Quantity</Text>
            </View>
            <View style={pdfStyles.tableCellHeaderLast}>
              <Text>Total Amount</Text>
            </View>
          </View>
          {data?.sales_order?.map((item, index) => {
            const isLastItem = index === (data?.sales_order?.length || 0) - 1;
            return (
              <View
                key={index}
                style={[
                  pdfStyles.tableRow,
                  // isLastItem ? {} : pdfStyles.tableBorderBottom,
                ]}
              >
                <View style={pdfStyles.tableCell}>
                  <Text>{item.product_warehouse?.product?.name || '-'}</Text>
                </View>
                <View style={pdfStyles.tableCell}>
                  <Text>{item.product_warehouse?.warehouse?.name || '-'}</Text>
                </View>
                <View style={pdfStyles.tableCellRight}>
                  <Text>Rp{formatNumber(item.unit_price || 0)}</Text>
                </View>
                <View style={pdfStyles.tableCellRight}>
                  <Text>{formatNumber(item.qty || 0)}</Text>
                </View>
                <View style={pdfStyles.tableCellRightLast}>
                  <Text>Rp{formatNumber(item.total_price || 0)}</Text>
                </View>
              </View>
            );
          }) || []}

          {/* Grand Total Row inside table */}
          <View style={pdfStyles.grandTotalRow}>
            <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
              <Text></Text>
            </View>
            <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
              <Text></Text>
            </View>
            <View style={[pdfStyles.tableCellRight, { borderRightWidth: 0 }]}>
              <Text></Text>
            </View>
            <View style={pdfStyles.tableCellRight}>
              <Text style={{ fontWeight: 'bold' }}>Grand Total</Text>
            </View>
            <View
              style={[pdfStyles.tableCellRightLast, { fontWeight: 'bold' }]}
            >
              <Text>Rp{formatNumber(grandTotal)}</Text>
            </View>
          </View>
        </View>

        {/* Footer with Special Instructions */}
        <View style={pdfStyles.footer}>
          <View style={pdfStyles.specialInstructionTable}>
            <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
              <View style={pdfStyles.tableCellHeaderLast}>
                <Text>Notes</Text>
              </View>
            </View>
            <View style={pdfStyles.tableRow}>
              <View style={pdfStyles.tableCellLast}>
                <Text>{data?.notes || '-'}</Text>
              </View>
            </View>
          </View>
          <View style={pdfStyles.footerCompany}>
            <Text>PT LUMBUNG TELUR INDONESIA</Text>
          </View>
        </View>
      </Page>
    </Document>
  );
};