import { For, createSignal } from 'solid-js';

interface InvoiceItem {
  description: string;
  quantity: number;
  unitPrice: number;
  total: number;
}

interface InvoiceData {
  invoiceNumber: string;
  date: string;
  dueDate: string;
  companyName: string;
  companyAddress: string;
  companyPhone: string;
  companyEmail: string;
  clientName: string;
  clientAddress: string;
  items: InvoiceItem[];
  subtotal: number;
  taxRate: number;
  taxAmount: number;
  total: number;
}

function Invoice() {
  const [invoiceData] = createSignal<InvoiceData>({
    invoiceNumber: 'INV-2024-001',
    date: '2024-01-15',
    dueDate: '2024-02-15',
    companyName: 'Your Company Name',
    companyAddress: '123 Business Street\nSuite 100\nCity, State 12345',
    companyPhone: '(555) 123-4567',
    companyEmail: 'billing@yourcompany.com',
    clientName: 'Client Company Inc.',
    clientAddress: '456 Client Avenue\nBuilding B\nClient City, State 67890',
    items: [
      {
        description: 'Web Development Services',
        quantity: 40,
        unitPrice: 75.00,
        total: 3000.00
      },
      {
        description: 'UI/UX Design',
        quantity: 20,
        unitPrice: 85.00,
        total: 1700.00
      },
      {
        description: 'Project Management',
        quantity: 15,
        unitPrice: 60.00,
        total: 900.00
      }
    ],
    subtotal: 5600.00,
    taxRate: 0.08,
    taxAmount: 448.00,
    total: 6048.00
  });

  const data = invoiceData();

  return (
    <div width="8.27in">
      <table  cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
            {/* Header */}
            <table width="100%" cellpadding="10" cellspacing="0">
              <tr>
                <td width="50%" valign="top">
                  <h2>{data.companyName}</h2>
                  <p style="white-space: pre-line; margin: 0;">{data.companyAddress}</p>
                  <p style="margin: 5px 0 0 0;">Phone: {data.companyPhone}</p>
                  <p style="margin: 5px 0 0 0;">Email: {data.companyEmail}</p>
                </td>
                <td width="50%" valign="top" align="right">
                  <h1 style="margin: 0; font-size: 28px;">INVOICE</h1>
                  <table cellpadding="5" cellspacing="0">
                    <tr>
                      <td><strong>Invoice #:</strong></td>
                      <td>{data.invoiceNumber}</td>
                    </tr>
                    <tr>
                      <td><strong>Date:</strong></td>
                      <td>{data.date}</td>
                    </tr>
                    <tr>
                      <td><strong>Due Date:</strong></td>
                      <td>{data.dueDate}</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>

            {/* Bill To Section */}
            <table width="100%" cellpadding="10" cellspacing="0">
              <tr>
                <td width="50%" valign="top">
                  <h3 style="margin: 0 0 10px 0;">Bill To:</h3>
                  <p style="white-space: pre-line; margin: 0;">{data.clientAddress}</p>
                </td>
                <td width="50%" valign="top">
                  <h3 style="margin: 0 0 10px 0;">Client:</h3>
                  <p style="margin: 0;">{data.clientName}</p>
                </td>
              </tr>
            </table>

            {/* Items Table */}
            <table width="100%" cellpadding="10" cellspacing="0" border="1" style="border-collapse: collapse;">
              <thead>
                <tr style="background-color: #f5f5f5;">
                  <th align="left" style="padding: 10px;">Description</th>
                  <th align="center" style="padding: 10px;">Qty</th>
                  <th align="right" style="padding: 10px;">Unit Price</th>
                  <th align="right" style="padding: 10px;">Total</th>
                </tr>
              </thead>
              <tbody>
                <For each={data.items}>
                  {(item) => (
                    <tr>
                      <td style="padding: 10px;">{item.description}</td>
                      <td align="center" style="padding: 10px;">{item.quantity}</td>
                      <td align="right" style="padding: 10px;">${item.unitPrice.toFixed(2)}</td>
                      <td align="right" style="padding: 10px;">${item.total.toFixed(2)}</td>
                    </tr>
                  )}
                </For>
              </tbody>
            </table>

            {/* Totals */}
            <table width="100%" cellpadding="10" cellspacing="0">
              <tr>
                <td width="70%"></td>
                <td width="30%">
                  <table width="100%" cellpadding="5" cellspacing="0">
                    <tr>
                      <td align="right"><strong>Subtotal:</strong></td>
                      <td align="right" width="80">${data.subtotal.toFixed(2)}</td>
                    </tr>
                    <tr>
                      <td align="right">Tax ({(data.taxRate * 100).toFixed(1)}%):</td>
                      <td align="right">${data.taxAmount.toFixed(2)}</td>
                    </tr>
                    <tr style="border-top: 2px solid #000;">
                      <td align="right"><strong>Total:</strong></td>
                      <td align="right"><strong>${data.total.toFixed(2)}</strong></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>

            {/* Footer */}
            <table width="100%" cellpadding="20" cellspacing="0">
              <tr>
                <td align="center">
                  <p style="margin: 0; font-style: italic;">
                    Thank you for your business!<br/>
                    Payment is due within 30 days of invoice date.
                  </p>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
  );
}

export default Invoice;