import { h, type FunctionComponent } from 'preact'
import { useRoute } from 'preact-iso'
import rek from 'rek'
import type { File, Invoice, Transaction } from '../../../shared/types.db.ts'
import usePromise from '../../shared/hooks/use_promise.ts'
import { formatNumber } from '../utils/format_number.ts'
import Head from './head.ts'

const InvoicePage: FunctionComponent = () => {
  const invoice = usePromise<Invoice & { files?: File[]; transactions?: Transaction[] }>(() =>
    rek(`/api/invoices/${route.params.id}`),
  )
  const route = useRoute()

  return (
    <section>
      <Head>
        <title> : Invoice : {invoice?.id}</title>
      </Head>

      <h1>Invoice</h1>
      <table>
        <thead>
          <tr>
            <th>what</th>
            <th>who</th>
          </tr>
        </thead>
        {invoice && (
          <tbody>
            <tr>
              <td>ID</td>
              <td>{invoice.id}</td>
            </tr>
            <tr>
              <td>Date</td>
              <td>{invoice.invoiceDate}</td>
            </tr>
            <tr>
              <td>Due Date</td>
              <td>{invoice.dueDate}</td>
            </tr>
            <tr>
              <td>Fisken</td>
              <td>{invoice.fiskenNumber}</td>
            </tr>
            <tr>
              <td>PHM</td>
              <td>{invoice.phmNumber}</td>
            </tr>
            <tr>
              <td>Amount</td>
              <td>{invoice.amount}</td>
            </tr>
            <tr>
              <td>Files</td>
              <td>
                {invoice.files?.map((file) => (
                  <a href={`/uploads/invoices/${file.filename}`} target='blank'>
                    {file.filename}
                  </a>
                ))}
              </td>
            </tr>
            <tr>
              <td>ID</td>
              <td>{invoice.id}</td>
            </tr>
            <tr>
              <td>ID</td>
              <td>{invoice.id}</td>
            </tr>
          </tbody>
        )}
      </table>

      <table>
        <thead>
          <tr>
            <th>Entry</th>
            <th>Account</th>
            <th>Debit</th>
            <th>Credit</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          {invoice?.transactions?.map((transaction) => (
            <tr>
              <td>
                <a href={`/entries/${transaction.entryId}`}>{transaction.entryId}</a>
              </td>
              <td>{transaction.accountNumber}</td>
              <td>
                {(transaction.amount as unknown as number) >= 0
                  ? formatNumber(transaction.amount as unknown as number)
                  : null}
              </td>
              <td>
                {(transaction.amount as unknown as number) < 0
                  ? formatNumber(Math.abs(transaction.amount as unknown as number))
                  : null}
              </td>
              <td>{transaction.description}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  )
}

export default InvoicePage
