import ListViewTemplate from "../../components/ui/ListViewTemplate";
import type { Column } from "../../types/table";
import type { FilterConfig } from "../../types/filters";
import { DEFAULT_CURRENCY } from "../../utils/constants";
import { DOCUMENT_STATUS } from "../../utils/enums";
import StatusBadge from "../../components/ui/StatusBadge";
import { getStatusColors } from "../../utils/statusColors";

const filters: FilterConfig[] = [
  {
    key: "DocumentStatus",
    label: "Estado",
    type: "select",
    options: DOCUMENT_STATUS,
    defaultValue: "bost_Open",
  },
  {
    key: "Indicator",
    label: "Indicador",
    type: "multi-select",
    endpoint: "FactoringIndicators",
    valueField: "IndicatorCode",
    labelField: "IndicatorName",
    valueType: "string",
  },
  {
    key: "DocCurrency",
    label: "Moneda",
    type: "multi-select",
    endpoint: "Currencies",
    valueField: "Code",
    labelField: "Name",
  },
  {
    key: "FolioPrefixString",
    label: "Serie",
    type: "text",
  },
  {
    key: "FolioNumber",
    label: "Número",
    type: "text",
  },
  {
    key: "DocDate",
    label: "Fecha Contab.",
    type: "date",
  },
  {
    key: "DocDueDate",
    label: "Fecha Venc.",
    type: "date",
  },
  {
    key: "TaxDate",
    label: "Fecha Emisión",
    type: "date",
  },
];

export default function PurchaseInvoicesList() {
  const columns: Column[] = [
    {
      key: "DocNum",
      title: "Número",
      width: "100px",
      isMono: true,
    },
    {
      key: "SerieNumero",
      title: "Serie-Número",
      width: "130px",
      isMono: true,
      render: (row) =>
        [row.Indicator, row.FolioPrefixString, row.FolioNumber]
          .filter(Boolean)
          .join("-"),
    },
    {
      key: "DocumentStatus",
      title: "Estado",
      width: "100px",
      render: (row: any) => {
        const val = row.DocumentStatus;
        const label =
          DOCUMENT_STATUS[val as keyof typeof DOCUMENT_STATUS] || val;
        const colors = getStatusColors("DOCUMENT_STATUS", val);
        return colors ? <StatusBadge label={label} {...colors} /> : label;
      },
    },
    {
      key: "CardCode",
      title: "Proveedor",
      width: "120px",
    },
    {
      key: "CardName",
      title: "Razón Social",
    },
    {
      key: "DocDate",
      title: "Fecha Contab.",
      type: "date",
      width: "60px",
    },
    {
      key: "DocDueDate",
      title: "Fecha Venc.",
      type: "date",
      width: "60px",
    },
    {
      key: "TaxDate",
      title: "Fecha Emisión",
      type: "date",
      width: "60px",
    },
    {
      key: "DocTotal",
      title: "Total",
      width: "100px",
      align: "right",
      render: (row) => {
        const total =
          row.DocCurrency === DEFAULT_CURRENCY ? row.DocTotal : row.DocTotalFc;
        return total != null
          ? `${row.DocCurrency} ${Number(total).toLocaleString("en-US", { minimumFractionDigits: 2 })}`
          : "";
      },
    },
    {
      key: "DocEntry",
      title: "Documento",
      width: "100px",
    },
  ];

  return (
    <ListViewTemplate
      title="Facturas de compra"
      description="Listado de facturas de compra"
      endpoint="PurchaseInvoices"
      fields={[
        "DocEntry",
        "DocNum",
        "CardCode",
        "CardName",
        "NumAtCard",
        "DocType",
        "DocCurrency",
        "DocDate",
        "DocTotal",
        "DocTotalFc",
        "DocDueDate",
        "TaxDate",
        "DocumentStatus",
        "FolioPrefixString",
        "FolioNumber",
        "Indicator",
      ]}
      baseFilter="DocumentSubType eq 'bod_None'"
      columns={columns}
      editPathPrefix="/compras/facturas/mantenimiento"
      editIdField="DocEntry"
      newButtonLabel="+ Nueva Factura"
      newButtonPath="/compras/facturas/mantenimiento"
      orderby="DocEntry desc"
      errorMessage="Error al obtener el listado de facturas de compra"
      rowKey="DocEntry"
      filters={filters}
    />
  );
}