// Minimal HTML invoice template — a clean, professional layout on a white
// "paper" surface. This is the single source of layout for the on-screen
// preview in both apps and is authored to render identically through a future
// HTML -> PDF pipeline.

import { sanitizeHexColor } from "../../utils/color";
import {
  cleanLineDescription,
  formatInvoiceCurrency,
  formatInvoiceDate,
  formatInvoiceDateShort,
  formatLineQuantity,
  hasInvoiceFooter,
  InvoiceFrame,
  lineQuantityHeader,
} from "./shared";
import type { InvoiceTemplateProps } from "./types";

const MINIMAL_CSS = `
.scribe-invoice.t-minimal .si-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: var(--inv-gap);
}
.scribe-invoice.t-minimal .si-title {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--inv-primary);
}
.scribe-invoice.t-minimal .si-number {
  color: var(--inv-muted);
  font-size: 14px;
}
.scribe-invoice.t-minimal .si-company {
  text-align: right;
  font-size: 13px;
  color: var(--inv-muted);
  line-height: 1.5;
}
.scribe-invoice.t-minimal .si-company strong {
  display: block;
  margin-bottom: 2px;
  color: var(--inv-muted-strong);
  font-size: 14px;
}
.scribe-invoice.t-minimal .si-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: var(--inv-gap);
}
.scribe-invoice.t-minimal .si-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inv-muted);
}
.scribe-invoice.t-minimal .si-client-name {
  font-weight: 600;
  color: var(--inv-text);
}
.scribe-invoice.t-minimal .si-client-line {
  font-size: 13px;
  color: var(--inv-muted);
  white-space: pre-line;
}
.scribe-invoice.t-minimal .si-dates {
  display: grid;
  gap: 6px;
  font-size: 13px;
}
.scribe-invoice.t-minimal .si-dates .si-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.scribe-invoice.t-minimal .si-dates .si-row span:first-child {
  color: var(--inv-muted);
}
.scribe-invoice.t-minimal .si-items {
  margin-bottom: 24px;
  border: 1px solid var(--inv-border);
  border-radius: 10px;
  overflow: hidden;
}
.scribe-invoice.t-minimal thead {
  background: var(--inv-subtle);
}
.scribe-invoice.t-minimal th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inv-muted);
  text-align: right;
}
.scribe-invoice.t-minimal th:first-child,
.scribe-invoice.t-minimal td:first-child {
  text-align: left;
}
.scribe-invoice.t-minimal td {
  padding: 12px 16px;
  font-size: 13px;
  text-align: right;
  border-top: 1px solid var(--inv-border);
}
.scribe-invoice.t-minimal tbody tr:first-child td { border-top: 0; }
.scribe-invoice.t-minimal tr { break-inside: avoid; }
.scribe-invoice.t-minimal .si-desc {
  display: flex;
  align-items: center;
  gap: 8px;
}
.scribe-invoice.t-minimal .si-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex: 0 0 auto;
}
.scribe-invoice.t-minimal .si-amount { font-weight: 600; }
.scribe-invoice.t-minimal .si-totals {
  display: flex;
  justify-content: flex-end;
  break-inside: avoid;
}
.scribe-invoice.t-minimal .si-totals-inner {
  width: 260px;
  display: grid;
  gap: 8px;
}
.scribe-invoice.t-minimal .si-totals .si-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.scribe-invoice.t-minimal .si-rule {
  height: 1px;
  background: var(--inv-border);
  margin: 4px 0;
}
.scribe-invoice.t-minimal .si-grand {
  font-size: 18px;
  font-weight: 700;
}
.scribe-invoice.t-minimal .si-grand span:last-child { color: var(--inv-primary); }
.scribe-invoice.t-minimal .si-notes {
  margin-top: var(--inv-gap);
  padding-top: 24px;
  border-top: 1px solid var(--inv-border);
  display: grid;
  gap: 16px;
}
.scribe-invoice.t-minimal .si-notes p { font-size: 13px; white-space: pre-line; }
.scribe-invoice.t-minimal .si-pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.scribe-invoice.t-minimal .si-pay-method strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.scribe-invoice.t-minimal .si-pay-detail {
  font-size: 12px;
  color: var(--inv-muted);
}
.scribe-invoice.t-minimal .si-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--inv-accent);
}
@media print {
  .scribe-invoice.t-minimal .si-notes {
    margin-top: 16px;
    padding-top: 12px;
    gap: 10px;
  }
  .scribe-invoice.t-minimal .si-notes .si-label {
    margin-bottom: 4px;
  }
  .scribe-invoice.t-minimal .si-pay-methods {
    gap: 10px;
  }
  .scribe-invoice.t-minimal .si-footer {
    margin-top: 12px;
    break-inside: avoid;
  }
}
`;

export function MinimalInvoiceTemplate({
  invoice,
  config,
  pageSize = "letter",
  className,
}: InvoiceTemplateProps) {
  const showFooter = hasInvoiceFooter(invoice, config);
  const paymentText = invoice.paymentNotes || config.paymentInstructions;
  const paymentMethods = config.paymentMethods ?? [];

  return (
    <InvoiceFrame
      config={config}
      pageSize={pageSize}
      css={MINIMAL_CSS}
      className={`t-minimal${className ? ` ${className}` : ""}`}
    >
      {/* Header: title left, company right */}
      <div className="si-header">
        <div>
          <h2 className="si-title">INVOICE</h2>
          <p className="si-number">{invoice.invoiceNumber}</p>
        </div>
        {config.showCompanyDetails && (
          <div className="si-company">
            <strong>{config.companyName}</strong>
            {config.companyEmail && <div>{config.companyEmail}</div>}
            {config.companyAddress && (
              <div style={{ whiteSpace: "pre-line" }}>
                {config.companyAddress}
              </div>
            )}
            {config.companyPhone && <div>{config.companyPhone}</div>}
          </div>
        )}
      </div>

      {/* Bill To / dates */}
      <div className="si-meta">
        <div>
          <p className="si-label">Bill To</p>
          {invoice.clientName ? (
            <div>
              <p className="si-client-name">{invoice.clientName}</p>
              {invoice.clientEmail && (
                <p className="si-client-line">{invoice.clientEmail}</p>
              )}
              {invoice.clientAddress && (
                <p className="si-client-line">{invoice.clientAddress}</p>
              )}
            </div>
          ) : (
            <p className="si-client-line">No client selected</p>
          )}
        </div>
        <div className="si-dates">
          <div className="si-row">
            <span>Issue Date</span>
            <span>{formatInvoiceDate(invoice.issueDate)}</span>
          </div>
          {invoice.dueDate && (
            <div className="si-row">
              <span>Due Date</span>
              <span>{formatInvoiceDate(invoice.dueDate)}</span>
            </div>
          )}
          {invoice.periodStart && invoice.periodEnd && (
            <div className="si-row">
              <span>Period</span>
              <span>
                {formatInvoiceDateShort(invoice.periodStart)} -{" "}
                {formatInvoiceDate(invoice.periodEnd)}
              </span>
            </div>
          )}
        </div>
      </div>

      {/* Line items */}
      <div className="si-items">
        <table>
          <thead>
            <tr>
              <th>Description</th>
              {config.showHours && (
                <th>{lineQuantityHeader(invoice.lineItems)}</th>
              )}
              {config.showRate && <th>Rate</th>}
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
            {invoice.lineItems.map((item, index) => {
              // Untrusted (projects.color) — strict-hex sanitize before it
              // reaches the style prop so a poisoned value can't inject CSS into
              // the PDF render. A non-hex value drops the dot entirely.
              const dotColor = sanitizeHexColor(item.projectColor);
              return (
                <tr key={item.id ?? `${item.description}-${index}`}>
                  <td>
                    <div className="si-desc">
                      {dotColor && (
                        <span
                          className="si-dot"
                          style={{ backgroundColor: dotColor }}
                        />
                      )}
                      <span>{cleanLineDescription(item.description)}</span>
                    </div>
                  </td>
                  {config.showHours && <td>{formatLineQuantity(item)}</td>}
                  {config.showRate && (
                    <td>
                      {formatInvoiceCurrency(item.rate, invoice.currency)}
                    </td>
                  )}
                  <td className="si-amount">
                    {formatInvoiceCurrency(item.amount, invoice.currency)}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* Totals */}
      <div className="si-totals">
        <div className="si-totals-inner">
          <div className="si-row">
            <span>Subtotal</span>
            <span>
              {formatInvoiceCurrency(invoice.subtotal, invoice.currency)}
            </span>
          </div>
          {invoice.taxRate > 0 && (
            <div className="si-row">
              <span>Tax ({(invoice.taxRate / 100).toFixed(1)}%)</span>
              <span>
                {formatInvoiceCurrency(invoice.taxAmount, invoice.currency)}
              </span>
            </div>
          )}
          <div className="si-rule" />
          <div className="si-row si-grand">
            <span>Total</span>
            <span>
              {formatInvoiceCurrency(invoice.total, invoice.currency)}
            </span>
          </div>
        </div>
      </div>

      {/* Notes / payment */}
      {showFooter && (
        <div className="si-notes si-flow">
          {invoice.notes && (
            <div>
              <p className="si-label">Notes</p>
              <p>{invoice.notes}</p>
            </div>
          )}
          {paymentText && (
            <div>
              <p className="si-label">Payment Instructions</p>
              <p>{paymentText}</p>
            </div>
          )}
          {paymentMethods.length > 0 && (
            <div>
              <p className="si-label">Payment</p>
              <div className="si-pay-methods">
                {paymentMethods.map((method) => (
                  <div className="si-pay-method" key={method.label}>
                    <strong>{method.label}</strong>
                    {Object.entries(method.details).map(([key, value]) => (
                      <div className="si-pay-detail" key={key}>
                        {key ? `${key}: ${value}` : value}
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          )}
          {config.footerText && (
            <p className="si-footer">{config.footerText}</p>
          )}
        </div>
      )}
    </InvoiceFrame>
  );
}