"use client";

import * as React from "react";
import { ChevronDown } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";

import {
  ReportSortableHead,
  ReportTableHead,
} from "@/app/customer/[tenant]/reports/_shared/components/report-table-chrome";
import type { StructuredProductSortColumn } from "../../_lib/structured-product-types";
import { RIGHT_ALIGNED_FIELDS } from "./structured-product-cells";
import type { StructuredProductColumnDef } from "./structured-product-columns";
import type {
  StructuredProductLifecycle,
  StructuredProductReportFilters,
  StructuredProductSortOrder,
} from "./schema";

function HeaderTextFilter({
  value,
  placeholder,
  onChange,
  className,
}: {
  value: string;
  placeholder: string;
  onChange: (value: string) => void;
  className?: string;
}) {
  return (
    <Input
      value={value}
      placeholder={placeholder}
      className={cn("h-8 min-w-28 text-xs", className)}
      onChange={(event) => onChange(event.currentTarget.value)}
    />
  );
}

export function StructuredProductTableHeader({
  lifecycle,
  showPotentialActions,
  sortColumn: _sortColumn,
  sortDirection: _sortDirection,
  onSort,
  filters,
  productTypes,
  onFiltersChange,
  visibleColumns,
}: {
  lifecycle: StructuredProductLifecycle;
  showPotentialActions: boolean;
  sortColumn: StructuredProductSortColumn | null;
  sortDirection: StructuredProductSortOrder;
  onSort: (column: StructuredProductSortColumn) => void;
  filters: StructuredProductReportFilters;
  productTypes: string[];
  onFiltersChange: (filters: StructuredProductReportFilters) => void;
  visibleColumns: StructuredProductColumnDef[];
}) {
  const showActionColumn = lifecycle === "potential" && showPotentialActions;

  return (
    <TableHeader>
      <TableRow className="bg-muted/20 hover:bg-muted/20">
        {showActionColumn ? (
          <ReportTableHead className="text-muted-foreground">Action</ReportTableHead>
        ) : null}
        {visibleColumns.map((column) =>
          column.sortColumn ? (
            <ReportSortableHead
              key={column.field}
              label={column.label}
              onSort={() => onSort(column.sortColumn!)}
              align={RIGHT_ALIGNED_FIELDS.has(column.field) ? "right" : "left"}
            />
          ) : (
            <ReportTableHead
              key={column.field}
              className={cn(
                "text-muted-foreground",
                RIGHT_ALIGNED_FIELDS.has(column.field) && "text-right",
              )}
            >
              {column.label}
            </ReportTableHead>
          ),
        )}
      </TableRow>
      <TableRow className="bg-muted/10 hover:bg-muted/10">
        {showActionColumn ? <TableHead className="px-2 py-2" /> : null}
        {visibleColumns.map((column) =>
          column.filterKey ? (
            <TableHead key={column.field} className="px-2 py-2">
              {column.filterKey === "isin" ? (
                <HeaderTextFilter
                  value={filters.isin}
                  placeholder="ISIN"
                  onChange={(isin) => onFiltersChange({ ...filters, isin })}
                />
              ) : column.filterKey === "productTypes" ? (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      type="button"
                      variant="outline"
                      className="h-8 w-full min-w-28 justify-between gap-1 px-2 font-normal text-xs shadow-none"
                    >
                      <span className="truncate">
                        {filters.productTypes.length
                          ? filters.productTypes.length === 1
                            ? filters.productTypes[0]
                            : `${filters.productTypes.length} selected`
                          : "All products"}
                      </span>
                      <ChevronDown className="size-3.5 shrink-0 opacity-50" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent
                    className="min-w-[12rem] overflow-hidden p-0"
                    align="start"
                  >
                    <ScrollArea className="h-64">
                      <div className="p-1 pr-2">
                        <DropdownMenuItem
                          onSelect={() => onFiltersChange({ ...filters, productTypes: [] })}
                        >
                          All products
                        </DropdownMenuItem>
                        {productTypes.map((productType) => (
                          <DropdownMenuCheckboxItem
                            key={productType}
                            checked={
                              filters.productTypes.length === 0 ||
                              filters.productTypes.includes(productType)
                            }
                            onSelect={(event) => event.preventDefault()}
                            onCheckedChange={(checked) => {
                              const selected = filters.productTypes.length
                                ? filters.productTypes
                                : productTypes;
                              const next = checked
                                ? [...new Set([...selected, productType])]
                                : selected.filter((item) => item !== productType);
                              onFiltersChange({
                                ...filters,
                                productTypes: next.length === productTypes.length ? [] : next,
                              });
                            }}
                          >
                            {productType}
                          </DropdownMenuCheckboxItem>
                        ))}
                      </div>
                    </ScrollArea>
                  </DropdownMenuContent>
                </DropdownMenu>
              ) : column.filterKey === "underlyingIsin" ? (
                <HeaderTextFilter
                  value={filters.underlyingIsin}
                  placeholder="Underlying ISIN"
                  onChange={(underlyingIsin) => onFiltersChange({ ...filters, underlyingIsin })}
                />
              ) : (
                <HeaderTextFilter
                  value={filters.underlying}
                  placeholder="Underlying"
                  onChange={(underlying) => onFiltersChange({ ...filters, underlying })}
                />
              )}
            </TableHead>
          ) : (
            <TableHead key={column.field} className="px-2 py-2" />
          ),
        )}
      </TableRow>
    </TableHeader>
  );
}