import { __, _n, sprintf } from "@wordpress/i18n";
import { Notice } from "@wordpress/components";
import { boot } from "../boot";
import { formatCents, formatPercent } from "../engine/format";
import { bySource, recoverLot } from "../engine/recovery";
import type { Store } from "../store";

// How much of what was paid has come back, by where the lots were bought. No order is read: a piece counts as sold when
// it has left the stock, valued at its price today, so every figure is an estimate and is labelled so.
export function SourcesView({ store }: { store: Store }) {
  const items = store.costed.map((row) => ({ lot: row.lot, recovery: recoverLot(row) }));
  const sources = bySource(items);
  const unknown = items.reduce((sum, i) => sum + i.recovery.unknownPieces, 0);
  const none = __("No source", "lotcost");

  if (items.length === 0) {
    return (
      <div className="lotcost-section">
        <p className="description">{__("No lot yet. Record a lot first: this page sums up what has come back, by lot and by where you bought.", "lotcost")}</p>
      </div>
    );
  }

  return (
    <div className="lotcost-section">
      <Notice status="info" isDismissible={false}>
        <strong>{__("An estimate.", "lotcost")}</strong>{" "}
        {__("LotCost reads no order. A piece counts as sold when it has left your stock, valued at its price today: discounts and later price changes are not seen.", "lotcost")}{" "}
        {unknown > 0 &&
          sprintf(
            /* translators: %d: number of pieces */
            _n(
              "%d piece cannot be told: its stock is not counted, or it is gone from your store.",
              "%d pieces cannot be told: their stock is not counted, or they are gone from your store.",
              unknown,
              "lotcost",
            ),
            unknown,
          )}
      </Notice>

      <h2>{__("By source", "lotcost")}</h2>
      <table className="widefat striped lotcost-table">
        <thead>
          <tr>
            <th>{__("Source", "lotcost")}</th>
            <th className="lotcost-num">{__("Lots", "lotcost")}</th>
            <th className="lotcost-num">{__("Paid", "lotcost")}</th>
            <th className="lotcost-num">{__("Back so far", "lotcost")}</th>
            <th className="lotcost-num">{__("Recovered", "lotcost")}</th>
            <th className="lotcost-num">{__("Units sold", "lotcost")}</th>
            <th className="lotcost-num">{__("Still in stock", "lotcost")}</th>
          </tr>
        </thead>
        <tbody>
          {sources.map((s) => (
            <tr key={s.source.toLowerCase()}>
              <td>
                <strong>{s.source || none}</strong>
              </td>
              <td className="lotcost-num">{s.lots}</td>
              <td className="lotcost-num">{formatCents(s.totalCents, boot.currency)}</td>
              <td className="lotcost-num">{formatCents(s.revenueCents, boot.currency)}</td>
              <td className="lotcost-num">{formatPercent(s.recoveredPercent)}</td>
              <td className="lotcost-num">{`${s.unitsSold} / ${s.unitsTotal}`}</td>
              <td className="lotcost-num">{formatCents(s.stockValueCents, boot.currency)}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <h2>{__("By lot", "lotcost")}</h2>
      <table className="widefat striped lotcost-table">
        <thead>
          <tr>
            <th>{__("Lot", "lotcost")}</th>
            <th className="lotcost-num">{__("Paid", "lotcost")}</th>
            <th className="lotcost-num">{__("Back so far", "lotcost")}</th>
            <th className="lotcost-num">{__("Recovered", "lotcost")}</th>
            <th className="lotcost-num">{__("Pieces sold", "lotcost")}</th>
            <th className="lotcost-num">{__("Profit so far", "lotcost")}</th>
          </tr>
        </thead>
        <tbody>
          {items.map(({ lot, recovery }) => (
            <tr key={lot.id}>
              <td>
                <strong>{lot.name}</strong>
                <div className="description">{lot.source || none}</div>
              </td>
              <td className="lotcost-num">{formatCents(recovery.totalCents, boot.currency)}</td>
              <td className="lotcost-num">{formatCents(recovery.revenueCents, boot.currency)}</td>
              <td className="lotcost-num">{formatPercent(recovery.recoveredPercent)}</td>
              <td className="lotcost-num">{`${recovery.soldPieces} / ${recovery.pieces}`}</td>
              <td className="lotcost-num">{formatCents(recovery.profitCents, boot.currency)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}