import { DataViews, type Action, type Field, type View } from "@wordpress/dataviews/wp";
import { download, upload } from "@wordpress/icons";
import { __ } from "@wordpress/i18n";
import { useEffect, useMemo, useState } from "@wordpress/element";
import {
  EmptyState,
  FilterControls,
  StatusBadge,
  type FilterControlsProps,
} from "../../../components/common";
import { DataViewsControls, DataViewsSettings } from "../../../components/common/DataViewsControls";
import { Text, VStack } from "../../../components/wp";
import type { MarketplaceOrder, PaginationInfo } from "../../../types";
import { formatMoney } from "../../../utils";

interface OrderTableProps {
  filters: FilterControlsProps;
  isLoading: boolean;
  isRefreshing: boolean;
  onDetail: (order: MarketplaceOrder) => void;
  onExport: (orders: MarketplaceOrder[]) => void;
  onImport?: (orders: MarketplaceOrder[]) => void;
  onPageChange: (page: number) => void;
  onToggle: (id: number | string) => void;
  orders: MarketplaceOrder[];
  paginationInfo: PaginationInfo;
  selected: Array<number | string>;
}

const orderFields = [
  "order_number",
  "marketplace",
  "type",
  "order_date",
  "shipping_name",
  "imported_in_store",
  "tracking_synced",
  "marketplace_commission",
  "latest_delivery_date",
  "order_total",
];

const initialView: View = {
  type: "table",
  page: 1,
  perPage: 15,
  fields: orderFields,
  layout: {
    density: "comfortable",
    enableMoving: false,
    styles: {
      order_number: { align: "start", width: "13%" },
      marketplace: { align: "start", width: "11%" },
      type: { align: "start", width: "9%" },
      order_date: { align: "start", width: "11%" },
      shipping_name: { align: "start", width: "13%" },
      imported_in_store: { align: "start", width: "12%" },
      tracking_synced: { align: "start", width: "11%" },
      marketplace_commission: { align: "start", width: "10%" },
      latest_delivery_date: { align: "start", width: "12%" },
      order_total: { align: "start", width: "10%" },
    },
  },
};

export const OrderTable = ({
  filters,
  isLoading,
  isRefreshing,
  onDetail,
  onExport,
  onImport,
  onPageChange,
  onToggle,
  orders,
  paginationInfo,
  selected,
}: OrderTableProps) => {
  const [view, setView] = useState<View>(() => ({
    ...initialView,
    page: paginationInfo.currentPage,
    perPage: paginationInfo.perPage,
  }));
  const selectedIds = selected.map(String);

  useEffect(() => {
    setView((current) => ({
      ...current,
      page: paginationInfo.currentPage,
      perPage: paginationInfo.perPage,
    }));
  }, [paginationInfo.currentPage, paginationInfo.perPage]);

  const fields = useMemo<Field<MarketplaceOrder>[]>(
    () => [
      {
        id: "order_number",
        label: __("Order Number", "market-sync"),
        enableHiding: false,
        enableSorting: false,
        filterBy: false,
        getValue: ({ item }) => item.order_number,
        render: ({ item }) => (
          <VStack
            alignment="stretch"
            data-order-row-id={String(item.id)}
            spacing={1}
            style={{ minWidth: 0 }}
          >
            <Text weight={700}>{item.order_number || "—"}</Text>
            {item.platform_order_number && (
              <Text size="caption" variant="muted">
                {item.platform_order_number}
              </Text>
            )}
          </VStack>
        ),
      },
      {
        id: "marketplace",
        label: __("Marketplace", "market-sync"),
        enableSorting: false,
        filterBy: false,
        getValue: ({ item }) => item.marketplace,
        render: ({ item }) => <Text>{item.marketplace || "—"}</Text>,
      },
      {
        id: "type",
        label: __("Type", "market-sync"),
        enableSorting: false,
        filterBy: false,
        getValue: ({ item }) => item.type,
        render: ({ item }) => <Text>{item.type || "—"}</Text>,
      },
      {
        id: "order_date",
        label: __("Order Date", "market-sync"),
        enableSorting: false,
        filterBy: false,
        getValue: ({ item }) => item.order_date,
        render: ({ item }) => <Text>{item.order_date || "—"}</Text>,
      },
      {
        id: "shipping_name",
        label: __("Shipping Name", "market-sync"),
        enableSorting: false,
        filterBy: false,
        getValue: ({ item }) => item.shipping_name,
        render: ({ item }) => <Text>{item.shipping_name || "—"}</Text>,
      },
      {
        id: "imported_in_store",
        label: __("Imported in Store", "market-sync"),
        enableSorting: false,
        filterBy: false,
        getValue: ({ item }) => (item.imported_in_store ? "Yes" : "No"),
        render: ({ item }) => (
          <StatusBadge tone={item.imported_in_store ? "success" : "warning"}>
            {item.imported_in_store ? __("Yes", "market-sync") : __("No", "market-sync")}
          </StatusBadge>
        ),
      },
      {
        id: "tracking_synced",
        label: __("Tracking Synced", "market-sync"),
        enableSorting: false,
        filterBy: false,
        getValue: ({ item }) => (item.tracking_synced ? "Yes" : "No"),
        render: ({ item }) => (
          <StatusBadge tone={item.tracking_synced ? "success" : "warning"}>
            {item.tracking_synced ? __("Yes", "market-sync") : __("No", "market-sync")}
          </StatusBadge>
        ),
      },
      {
        id: "marketplace_commission",
        label: __("Marketplace Commission", "market-sync"),
        enableSorting: false,
        filterBy: false,
        getValue: ({ item }) => item.marketplace_commission,
        render: ({ item }) => (
          <Text>{formatMoney(item.currency, item.marketplace_commission)}</Text>
        ),
      },
      {
        id: "latest_delivery_date",
        label: __("Latest Delivery Date", "market-sync"),
        enableSorting: false,
        filterBy: false,
        getValue: ({ item }) => item.latest_delivery_date || "",
        render: ({ item }) => <Text>{item.latest_delivery_date || "—"}</Text>,
      },
      {
        id: "order_total",
        label: __("Order Total", "market-sync"),
        enableSorting: false,
        filterBy: false,
        getValue: ({ item }) => item.order_total,
        render: ({ item }) => <Text>{formatMoney(item.currency, item.order_total)}</Text>,
      },
    ],
    [],
  );

  const actions = useMemo<Action<MarketplaceOrder>[]>(
    () => [
      ...(onImport
        ? [
            {
              id: "import-into-woo",
              label: __("Import into Woo", "market-sync"),
              icon: upload,
              supportsBulk: true,
              callback: onImport,
            },
          ]
        : []),
      {
        id: "export-orders-csv",
        label: __("Export CSV", "market-sync"),
        icon: download,
        supportsBulk: true,
        callback: onExport,
      },
    ],
    [onImport, onExport],
  );

  const changeSelection = (nextSelection: string[]) => {
    const nextIds = new Set(nextSelection);
    const currentIds = new Set(selectedIds);

    orders.forEach((order) => {
      const id = String(order.id);
      if (nextIds.has(id) !== currentIds.has(id)) onToggle(order.id);
    });
  };

  const changeView = (nextView: View) => {
    const visibleFields = new Set(nextView.fields || []);
    const normalizedView = {
      ...nextView,
      fields: orderFields.filter((field) => visibleFields.has(field)),
      perPage: paginationInfo.perPage,
    };
    const nextPage = normalizedView.page || 1;
    const pageChanged = nextPage !== (view.page || 1);
    setView(normalizedView);
    if (pageChanged) onPageChange(nextPage);
  };

  return (
    <DataViews
      actions={actions}
      config={{ perPageSizes: [paginationInfo.perPage] }}
      data={orders}
      defaultLayouts={{ table: true }}
      empty={<EmptyState>{__("No orders found.", "market-sync")}</EmptyState>}
      fields={fields}
      getItemId={(order) => String(order.id)}
      onChangeSelection={changeSelection}
      onChangeView={changeView}
      onClickItem={onDetail}
      paginationInfo={paginationInfo}
      selection={selectedIds}
      view={view}
    >
      <DataViewsControls
        filters={
          <FilterControls {...filters}>
            <DataViewsSettings />
          </FilterControls>
        }
        footerDisplayedItems={Math.min(
          paginationInfo.currentPage * paginationInfo.perPage,
          paginationInfo.totalItems,
        )}
        footerTotalItems={paginationInfo.totalItems}
        getItemId={(order) => order.id}
        isLoading={isLoading}
        isRefreshing={isRefreshing}
        items={orders}
        onClickItem={onDetail}
        rowDataAttribute="data-order-row-id"
        skeletonColumns={orderFields.length}
        showBulkActions={orders.length > 0 && actions.some((action) => action.supportsBulk)}
      />
    </DataViews>
  );
};