"use client";

import type { Table } from "@tanstack/react-table";
import type { DateRange } from "react-day-picker";

import { CustomerRangeFilterInputs } from "@/components/customer/customer-table-primitives";
import { DateRangePicker } from "@/components/date-range-picker";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { TableHead, TableRow } from "@/components/ui/table";

import type { TransactionTableRow } from "./customer-transaction-list-columns";

export type TransactionFilterOption = string | { value: string; label: string };

export type TransactionFilterOptions = {
  banks: readonly TransactionFilterOption[];
  types: readonly TransactionFilterOption[];
  executionTypes: readonly TransactionFilterOption[];
  transactions: readonly TransactionFilterOption[];
  assetClasses?: readonly TransactionFilterOption[];
  transactionCategories?: readonly TransactionFilterOption[];
  interestSourceTypes?: readonly TransactionFilterOption[];
  interestModes?: readonly TransactionFilterOption[];
};

export type TransactionRangeFilters = {
  price?: { from?: string; to?: string };
  quantity?: { from?: string; to?: string };
  amount?: { from?: string; to?: string };
  total?: { from?: string; to?: string };
};

function normalizeFilterOption(option: TransactionFilterOption) {
  return typeof option === "string" ? { value: option, label: option } : option;
}

function uniqueFilterOptions(options: readonly TransactionFilterOption[]) {
  const seen = new Set<string>();
  const unique: { value: string; label: string }[] = [];
  for (const raw of options) {
    const option = normalizeFilterOption(raw);
    if (!option.value || seen.has(option.value)) continue;
    seen.add(option.value);
    unique.push(option);
  }
  return unique;
}

/** Bank dropdown: one entry per label; value may be `id1|id2` for multi-id collapse. */
function uniqueBankFilterOptions(options: readonly TransactionFilterOption[]) {
  const byLabel = new Map<string, { label: string; ids: Set<string> }>();

  for (const raw of options) {
    const option = normalizeFilterOption(raw);
    const label = option.label.trim() || option.value.trim();
    const value = option.value.trim();
    if (!label || !value || value === "All" || label === "All") continue;

    const key = label.toLowerCase();
    let entry = byLabel.get(key);
    if (!entry) {
      entry = { label, ids: new Set() };
      byLabel.set(key, entry);
    }
    for (const part of value.split(/[|,]+/)) {
      const id = part.trim();
      if (id && id !== "0") entry.ids.add(id);
    }
  }

  const uniqueBanks = [...byLabel.values()]
    .map(({ label, ids }) => ({
      label,
      value: [...ids]
        .sort((left, right) => left.localeCompare(right, undefined, { numeric: true }))
        .join("|"),
    }))
    .filter((option) => option.value !== "")
    .sort((left, right) => left.label.localeCompare(right.label));

  return [{ value: "All", label: "All" }, ...uniqueBanks];
}

function readFilterValue<TRow extends TransactionTableRow>(
  table: Table<TRow>,
  columnId: string,
  serverMode: boolean,
  getFilterValue: ((columnId: string) => string) | undefined,
) {
  if (serverMode && getFilterValue) {
    return getFilterValue(columnId);
  }

  return (table.getColumn(columnId)?.getFilterValue() as string) ?? "";
}

function isRefColumn(columnId: string) {
  return columnId === "refId" || columnId === "uid_title";
}

function isPlacementDateColumn(columnId: string) {
  return columnId === "placementDate" || columnId === "placement_date";
}

function isTickerColumn(columnId: string) {
  return (
    columnId === "ticker" ||
    columnId === "security_ticker" ||
    columnId === "security_ticker_isin"
  );
}

function isStructureNameColumn(columnId: string) {
  return columnId === "structure_name" || columnId === "structureName";
}

function isParentIsinColumn(columnId: string) {
  return columnId === "parentIsin" || columnId === "parent_isin_display";
}

function isCategoryColumn(columnId: string) {
  return columnId === "type" || columnId === "category";
}

function isExecutionTypeColumn(columnId: string) {
  return columnId === "executionType" || columnId === "execution_type";
}

function isTransactionTypeColumn(columnId: string) {
  return columnId === "transaction" || columnId === "transaction_type";
}

function isPriceColumn(columnId: string) {
  return columnId === "price" || columnId === "price_formatted";
}

function isQuantityColumn(columnId: string) {
  return columnId === "quantity" || columnId === "quantity_formatted";
}

function isAmountColumn(columnId: string) {
  return columnId === "amount" || columnId === "amount_formatted" || columnId === "total_formatted";
}

function isTotalColumn(columnId: string) {
  return columnId === "total_formatted";
}

function isNetColumn(columnId: string) {
  return columnId === "net" || columnId === "net_formatted";
}

function isTransactionCategoryColumn(columnId: string) {
  return columnId === "transaction_category";
}

function isInterestSourceTypeColumn(columnId: string) {
  return columnId === "interest_source_type";
}

function isInterestModeColumn(columnId: string) {
  return columnId === "interest_mode";
}

function isTransactionRefColumn(columnId: string) {
  return columnId === "transaction_ref";
}

function isRNoColumn(columnId: string) {
  return columnId === "r_no";
}

function isCurrencyBoughtColumn(columnId: string) {
  return columnId === "currency_bought";
}

function isCurrencySoldColumn(columnId: string) {
  return columnId === "currency_sold";
}

type RenderCustomerAssetColumnFilterArgs<TRow extends TransactionTableRow> = {
  columnId: string;
  table: Table<TRow>;
  filterOptions: TransactionFilterOptions;
  placementDateRange: DateRange | undefined;
  onPlacementDateRangeChange: (range: DateRange | undefined) => void;
  onColumnFilterChange: (columnId: string, value: string | undefined) => void;
  serverMode?: boolean;
  getFilterValue?: (columnId: string) => string;
  rangeFilters?: TransactionRangeFilters;
  onRangeFilterChange?: (
    field: keyof TransactionRangeFilters,
    value: { from?: string; to?: string },
  ) => void;
};

/** Filter cell for one visible column (supports legacy + backend grid column ids). */
export function renderCustomerAssetColumnFilter<TRow extends TransactionTableRow>({
  columnId,
  table,
  filterOptions,
  placementDateRange,
  onPlacementDateRangeChange,
  onColumnFilterChange,
  serverMode = false,
  getFilterValue,
  rangeFilters,
  onRangeFilterChange,
}: RenderCustomerAssetColumnFilterArgs<TRow>) {
  const typeOptions = filterOptions.types.map(normalizeFilterOption);
  const executionTypeOptions = filterOptions.executionTypes.map(normalizeFilterOption);
  const transactionOptions = filterOptions.transactions.map(normalizeFilterOption);
  const assetClassOptions = (filterOptions.assetClasses ?? []).map(normalizeFilterOption);
  const transactionCategoryOptions = (filterOptions.transactionCategories ?? filterOptions.types).map(
    normalizeFilterOption,
  );
  const interestSourceTypeOptions = (filterOptions.interestSourceTypes ?? filterOptions.executionTypes).map(
    normalizeFilterOption,
  );
  const interestModeOptions = (filterOptions.interestModes ?? filterOptions.transactions).map(
    normalizeFilterOption,
  );

  if (columnId === "options") {
    return null;
  }

  if (isRefColumn(columnId)) {
    return (
      <Input
        className="h-8 min-w-28 text-xs"
        value={readFilterValue(table, columnId, serverMode, getFilterValue)}
        onChange={(event) => onColumnFilterChange(columnId, event.target.value)}
      />
    );
  }

  if (isPlacementDateColumn(columnId)) {
    return (
      <DateRangePicker
        value={placementDateRange}
        placeholder="Select Range"
        className="h-8 w-full min-w-28 text-xs"
        align="start"
        onChange={(range) => {
          onPlacementDateRangeChange(range);
          if (!serverMode) {
            table.getColumn(columnId)?.setFilterValue(range);
            table.setPageIndex(0);
          }
        }}
      />
    );
  }

  if (columnId === "bank") {
    return (
      <Select
        value={readFilterValue(table, columnId, serverMode, getFilterValue) || "All"}
        onValueChange={(value) => onColumnFilterChange(columnId, value === "All" ? undefined : value)}
      >
        <SelectTrigger className="h-8 w-full min-w-20 text-xs">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {uniqueBankFilterOptions(filterOptions.banks).map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
          ))}
        </SelectContent>
      </Select>
    );
  }

  if (
    isTickerColumn(columnId) ||
    isStructureNameColumn(columnId) ||
    columnId === "name" ||
    columnId === "primary_rm" ||
    columnId === "security_name" ||
    columnId === "asset_type" ||
    columnId === "asset_type_title" ||
    isParentIsinColumn(columnId) ||
    columnId === "currency"
  ) {
    return (
      <Input
        className="h-8 min-w-28 text-xs"
        value={readFilterValue(table, columnId, serverMode, getFilterValue)}
        onChange={(event) => onColumnFilterChange(columnId, event.target.value)}
      />
    );
  }

  if (columnId === "asset_class_title" || columnId === "asset_class") {
    if (assetClassOptions.length > 0) {
      return (
        <Select
          value={readFilterValue(table, columnId, serverMode, getFilterValue) || "All"}
          onValueChange={(value) => onColumnFilterChange(columnId, value === "All" ? undefined : value)}
        >
          <SelectTrigger className="h-8 w-full min-w-28 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {assetClassOptions.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      );
    }

    return (
      <Input
        className="h-8 min-w-28 text-xs"
        value={readFilterValue(table, columnId, serverMode, getFilterValue)}
        onChange={(event) => onColumnFilterChange(columnId, event.target.value)}
      />
    );
  }

  // Yii1 Crypto list: Reference Link has no column filter
  if (columnId === "ref_link" || columnId === "referenceLink") {
    return null;
  }

  if (isCategoryColumn(columnId)) {
    return (
      <Select
        value={readFilterValue(table, columnId, serverMode, getFilterValue) || "All"}
        onValueChange={(value) => onColumnFilterChange(columnId, value === "All" ? undefined : value)}
      >
        <SelectTrigger className="h-8 w-full min-w-24 text-xs">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {typeOptions.map((type) => (
            <SelectItem key={type.value} value={type.value}>
              {type.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    );
  }

  if (isExecutionTypeColumn(columnId)) {
    return (
      <Select
        value={readFilterValue(table, columnId, serverMode, getFilterValue) || "All"}
        onValueChange={(value) => onColumnFilterChange(columnId, value === "All" ? undefined : value)}
      >
        <SelectTrigger className="h-8 w-full min-w-28 text-xs">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {executionTypeOptions.map((type) => (
            <SelectItem key={type.value} value={type.value}>
              {type.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    );
  }

  if (isTransactionTypeColumn(columnId)) {
    return (
      <Select
        value={readFilterValue(table, columnId, serverMode, getFilterValue) || "All"}
        onValueChange={(value) => onColumnFilterChange(columnId, value === "All" ? undefined : value)}
      >
        <SelectTrigger className="h-8 w-full min-w-28 text-xs">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {transactionOptions.map((type) => (
            <SelectItem key={type.value} value={type.value}>
              {type.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    );
  }

  if (isTransactionCategoryColumn(columnId)) {
    return (
      <Select
        value={readFilterValue(table, columnId, serverMode, getFilterValue) || "All"}
        onValueChange={(value) => onColumnFilterChange(columnId, value === "All" ? undefined : value)}
      >
        <SelectTrigger className="h-8 w-full min-w-28 text-xs">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {transactionCategoryOptions.map((type) => (
            <SelectItem key={type.value} value={type.value}>
              {type.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    );
  }

  if (isInterestSourceTypeColumn(columnId)) {
    return (
      <Select
        value={readFilterValue(table, columnId, serverMode, getFilterValue) || "All"}
        onValueChange={(value) => onColumnFilterChange(columnId, value === "All" ? undefined : value)}
      >
        <SelectTrigger className="h-8 w-full min-w-28 text-xs">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {interestSourceTypeOptions.map((type) => (
            <SelectItem key={type.value} value={type.value}>
              {type.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    );
  }

  if (isInterestModeColumn(columnId)) {
    return (
      <Select
        value={readFilterValue(table, columnId, serverMode, getFilterValue) || "All"}
        onValueChange={(value) => onColumnFilterChange(columnId, value === "All" ? undefined : value)}
      >
        <SelectTrigger className="h-8 w-full min-w-28 text-xs">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {interestModeOptions.map((type) => (
            <SelectItem key={type.value} value={type.value}>
              {type.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    );
  }

  if (isTransactionRefColumn(columnId) || isRNoColumn(columnId) || isNetColumn(columnId)) {
    return (
      <Input
        className="h-8 min-w-28 text-xs"
        value={readFilterValue(table, columnId, serverMode, getFilterValue)}
        onChange={(event) => onColumnFilterChange(columnId, event.target.value)}
      />
    );
  }

  // Interest/Dividend uses a single text quantity filter; portfolio grids use from/to range.
  if (columnId === "quantity_formatted" && rangeFilters && !("quantity" in rangeFilters)) {
    return (
      <Input
        className="h-8 min-w-28 text-xs"
        value={readFilterValue(table, columnId, serverMode, getFilterValue)}
        onChange={(event) => onColumnFilterChange(columnId, event.target.value)}
      />
    );
  }

  if (isPriceColumn(columnId)) {
    return (
      <CustomerRangeFilterInputs
        fromValue={rangeFilters?.price?.from ?? ""}
        toValue={rangeFilters?.price?.to ?? ""}
        onFromChange={
          onRangeFilterChange
            ? (value) => onRangeFilterChange("price", { from: value, to: rangeFilters?.price?.to })
            : undefined
        }
        onToChange={
          onRangeFilterChange
            ? (value) => onRangeFilterChange("price", { from: rangeFilters?.price?.from, to: value })
            : undefined
        }
      />
    );
  }

  if (isQuantityColumn(columnId)) {
    return (
      <CustomerRangeFilterInputs
        fromValue={rangeFilters?.quantity?.from ?? ""}
        toValue={rangeFilters?.quantity?.to ?? ""}
        onFromChange={
          onRangeFilterChange
            ? (value) =>
                onRangeFilterChange("quantity", { from: value, to: rangeFilters?.quantity?.to })
            : undefined
        }
        onToChange={
          onRangeFilterChange
            ? (value) =>
                onRangeFilterChange("quantity", { from: rangeFilters?.quantity?.from, to: value })
            : undefined
        }
      />
    );
  }

  if (isAmountColumn(columnId)) {
    const rangeKey = isTotalColumn(columnId) ? "total" : "amount";
    const range = isTotalColumn(columnId) ? rangeFilters?.total : rangeFilters?.amount;

    return (
      <CustomerRangeFilterInputs
        fromValue={range?.from ?? ""}
        toValue={range?.to ?? ""}
        onFromChange={
          onRangeFilterChange
            ? (value) => onRangeFilterChange(rangeKey, { from: value, to: range?.to })
            : undefined
        }
        onToChange={
          onRangeFilterChange
            ? (value) => onRangeFilterChange(rangeKey, { from: range?.from, to: value })
            : undefined
        }
      />
    );
  }

  if (isCurrencyBoughtColumn(columnId)) {
    return (
      <CustomerRangeFilterInputs
        fromValue={rangeFilters?.price?.from ?? ""}
        toValue={rangeFilters?.price?.to ?? ""}
        onFromChange={
          onRangeFilterChange
            ? (value) => onRangeFilterChange("price", { from: value, to: rangeFilters?.price?.to })
            : undefined
        }
        onToChange={
          onRangeFilterChange
            ? (value) => onRangeFilterChange("price", { from: rangeFilters?.price?.from, to: value })
            : undefined
        }
      />
    );
  }

  if (isCurrencySoldColumn(columnId)) {
    return (
      <CustomerRangeFilterInputs
        fromValue={rangeFilters?.quantity?.from ?? ""}
        toValue={rangeFilters?.quantity?.to ?? ""}
        onFromChange={
          onRangeFilterChange
            ? (value) =>
                onRangeFilterChange("quantity", { from: value, to: rangeFilters?.quantity?.to })
            : undefined
        }
        onToChange={
          onRangeFilterChange
            ? (value) =>
                onRangeFilterChange("quantity", { from: rangeFilters?.quantity?.from, to: value })
            : undefined
        }
      />
    );
  }

  return null;
}

type CustomerTransactionListFilterRowProps<TRow extends TransactionTableRow> = {
  table: Table<TRow>;
  filterOptions: TransactionFilterOptions;
  placementDateRange: DateRange | undefined;
  onPlacementDateRangeChange: (range: DateRange | undefined) => void;
  onColumnFilterChange: (columnId: string, value: string | undefined) => void;
  serverMode?: boolean;
  getFilterValue?: (columnId: string) => string;
  rangeFilters?: TransactionRangeFilters;
  onRangeFilterChange?: (
    field: keyof TransactionRangeFilters,
    value: { from?: string; to?: string },
  ) => void;
  showParentIsinFilter?: boolean;
};

export function CustomerTransactionListFilterRow<TRow extends TransactionTableRow>({
  table,
  filterOptions,
  placementDateRange,
  onPlacementDateRangeChange,
  onColumnFilterChange,
  serverMode = false,
  getFilterValue,
  rangeFilters,
  onRangeFilterChange,
  showParentIsinFilter = false,
}: CustomerTransactionListFilterRowProps<TRow>) {
  const typeOptions = uniqueFilterOptions(filterOptions.types);
  const bankOptions = uniqueBankFilterOptions(filterOptions.banks);
  const executionTypeOptions = uniqueFilterOptions(filterOptions.executionTypes);
  const transactionOptions = uniqueFilterOptions(filterOptions.transactions);

  return (
    <TableRow className="bg-muted/10 hover:bg-muted/10">
      <TableHead className="px-2 py-2">
        <Input
          className="h-8 min-w-28 text-xs"
          value={readFilterValue(table, "refId", serverMode, getFilterValue)}
          onChange={(event) => onColumnFilterChange("refId", event.target.value)}
        />
      </TableHead>
      <TableHead className="px-2 py-2">
        <DateRangePicker
          value={placementDateRange}
          placeholder="Select Range"
          className="h-8 w-full min-w-28 text-xs"
          align="start"
          onChange={(range) => {
            onPlacementDateRangeChange(range);
            if (!serverMode) {
              table.getColumn("placementDate")?.setFilterValue(range);
              table.setPageIndex(0);
            }
          }}
        />
      </TableHead>
      <TableHead className="px-2 py-2">
        <Select
          value={readFilterValue(table, "bank", serverMode, getFilterValue) || "All"}
          onValueChange={(value) => onColumnFilterChange("bank", value === "All" ? undefined : value)}
        >
          <SelectTrigger className="h-8 w-full min-w-20 text-xs">
            <SelectValue placeholder="All" />
          </SelectTrigger>
          <SelectContent>
            {bankOptions.map((bank) => (
              <SelectItem key={bank.value} value={bank.value}>
                {bank.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </TableHead>
      <TableHead className="px-2 py-2">
        <Input
          className="h-8 min-w-28 text-xs"
          value={readFilterValue(table, "ticker", serverMode, getFilterValue)}
          onChange={(event) => onColumnFilterChange("ticker", event.target.value)}
        />
      </TableHead>
      <TableHead className="px-2 py-2">
        <Input
          className="h-8 min-w-36 text-xs"
          value={readFilterValue(table, "name", serverMode, getFilterValue)}
          onChange={(event) => onColumnFilterChange("name", event.target.value)}
        />
      </TableHead>
      {showParentIsinFilter ? (
        <TableHead className="px-2 py-2">
          <Input
            className="h-8 min-w-28 text-xs"
            value={readFilterValue(table, "parentIsin", serverMode, getFilterValue)}
            onChange={(event) => onColumnFilterChange("parentIsin", event.target.value)}
          />
        </TableHead>
      ) : null}
      <TableHead className="px-2 py-2">
        <Select
          value={readFilterValue(table, "type", serverMode, getFilterValue) || "All"}
          onValueChange={(value) => onColumnFilterChange("type", value === "All" ? undefined : value)}
        >
          <SelectTrigger className="h-8 w-full min-w-24 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {typeOptions.map((type) => (
              <SelectItem key={type.value} value={type.value}>
                {type.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </TableHead>
      <TableHead className="px-2 py-2">
        <Select
          value={readFilterValue(table, "executionType", serverMode, getFilterValue) || "All"}
          onValueChange={(value) =>
            onColumnFilterChange("executionType", value === "All" ? undefined : value)
          }
        >
          <SelectTrigger className="h-8 w-full min-w-28 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {executionTypeOptions.map((type) => (
              <SelectItem key={type.value} value={type.value}>
                {type.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </TableHead>
      <TableHead className="px-2 py-2">
        <Select
          value={readFilterValue(table, "transaction", serverMode, getFilterValue) || "All"}
          onValueChange={(value) =>
            onColumnFilterChange("transaction", value === "All" ? undefined : value)
          }
        >
          <SelectTrigger className="h-8 w-full min-w-28 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {transactionOptions.map((type) => (
              <SelectItem key={type.value} value={type.value}>
                {type.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </TableHead>
      <TableHead className="px-2 py-2">
        <CustomerRangeFilterInputs
          fromValue={rangeFilters?.price?.from ?? ""}
          toValue={rangeFilters?.price?.to ?? ""}
          onFromChange={
            onRangeFilterChange
              ? (value) => onRangeFilterChange("price", { from: value, to: rangeFilters?.price?.to })
              : undefined
          }
          onToChange={
            onRangeFilterChange
              ? (value) => onRangeFilterChange("price", { from: rangeFilters?.price?.from, to: value })
              : undefined
          }
        />
      </TableHead>
      <TableHead className="px-2 py-2">
        <CustomerRangeFilterInputs
          fromValue={rangeFilters?.quantity?.from ?? ""}
          toValue={rangeFilters?.quantity?.to ?? ""}
          onFromChange={
            onRangeFilterChange
              ? (value) =>
                  onRangeFilterChange("quantity", { from: value, to: rangeFilters?.quantity?.to })
              : undefined
          }
          onToChange={
            onRangeFilterChange
              ? (value) =>
                  onRangeFilterChange("quantity", { from: rangeFilters?.quantity?.from, to: value })
              : undefined
          }
        />
      </TableHead>
      <TableHead className="px-2 py-2">
        <Input
          className="h-8 min-w-20 text-xs"
          value={readFilterValue(table, "currency", serverMode, getFilterValue)}
          onChange={(event) => onColumnFilterChange("currency", event.target.value)}
        />
      </TableHead>
      <TableHead className="px-2 py-2">
        <CustomerRangeFilterInputs
          fromValue={rangeFilters?.amount?.from ?? ""}
          toValue={rangeFilters?.amount?.to ?? ""}
          onFromChange={
            onRangeFilterChange
              ? (value) => onRangeFilterChange("amount", { from: value, to: rangeFilters?.amount?.to })
              : undefined
          }
          onToChange={
            onRangeFilterChange
              ? (value) => onRangeFilterChange("amount", { from: rangeFilters?.amount?.from, to: value })
              : undefined
          }
        />
      </TableHead>
      <TableHead className="px-2 py-2" />
    </TableRow>
  );
}