"use client"

import type { ColumnDef, FilterFn } from "@tanstack/react-table"

import { Input } from "@/components/ui/input"
import { SETTINGS_INPUT_CLASS } from "@/components/settings/constants"
import { cn } from "@/lib/utils"
import type { IsinMarketPriceRow } from "./schema"

const includesStringFilter: FilterFn<IsinMarketPriceRow> = (
  row,
  columnId,
  value
) => {
  if (!value) return true
  return String(row.getValue(columnId) ?? "")
    .toLowerCase()
    .includes(String(value).toLowerCase())
}

const priceInputClass = cn(SETTINGS_INPUT_CLASS, "h-8 text-right font-mono")

export function createIsinMarketPriceColumns(handlers: {
  getPrice: (isin: string, fallback: string) => string
  onPriceChange: (isin: string, value: string) => void
}): ColumnDef<IsinMarketPriceRow>[] {
  return [
    {
      accessorKey: "isin",
      header: "ISIN",
      filterFn: includesStringFilter,
      cell: ({ row }) => (
        <span className="font-mono text-sm">{row.original.isin}</span>
      ),
    },
    {
      accessorKey: "industry",
      header: "Industry",
      filterFn: includesStringFilter,
    },
    {
      accessorKey: "sector",
      header: "Sector",
      filterFn: includesStringFilter,
    },
    {
      accessorKey: "marketPriceDate",
      header: "Market price date",
      enableColumnFilter: false,
      cell: ({ row }) => (
        <span className="block text-right text-sm tabular-nums">
          {row.original.marketPriceDate}
        </span>
      ),
    },
    {
      id: "marketPrice",
      header: () => <span className="block w-full text-right">Market price</span>,
      enableColumnFilter: false,
      cell: ({ row }) => (
        <Input
          className={priceInputClass}
          value={handlers.getPrice(row.original.isin, row.original.marketPrice)}
          onChange={(e) =>
            handlers.onPriceChange(row.original.isin, e.target.value)
          }
        />
      ),
    },
  ]
}