"use client";

import {
  CalendarDays,
  ChevronLeft,
  ChevronRight,
  List,
  RefreshCw,
  Search,
  X,
} from "lucide-react";
import { toast } from "sonner";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { cn } from "@/lib/utils";

import {
  CustomerFieldsButton,
} from "@/app/customer/_components/customer-fields-panel";

import { CashflowCurrenciesDropdown } from "./cashflow-currencies-dropdown";
import { CashflowFiltersDialog } from "./cashflow-filters-dialog";
import { CashflowStructureStatusIcon } from "./cashflow-structure-status-icon";
import type { CashflowAssetClassTotal } from "../../_lib/map-cashflow-totals";
import { formatPlainAmount } from "@/lib/format/numbers";
import {
  type CashflowBankOption,
  type CashflowFilters,
  type CashflowViewMode,
  CASHFLOW_EVENT_TYPE_KEYS,
  CASHFLOW_EVENT_TYPE_LABELS,
  CASHFLOW_STRUCTURE_STATUS_DISPLAY,
  CASHFLOW_STRUCTURE_STATUSES,
  areAllCashflowEventTypesEnabled,
  areAllStructureStatusesSelected,
  hasActiveCashflowFilters,
  isCashflowFilterFullySelected,
} from "./schema";

const toggleItemClass =
  "rounded-md px-3 text-xs data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm";

type CashflowReportHeaderProps = {
  filteredEventCount: number;
  totalsByAssetClass?: CashflowAssetClassTotal[];
  isLoading: boolean;
  errorMessage: string | null;
  filters: CashflowFilters;
  onFiltersChange: React.Dispatch<React.SetStateAction<CashflowFilters>>;
  bankOptions: CashflowBankOption[];
  assetClassOptions: Record<string, string>;
  bankOptionIds: string[];
  assetClassCodes: string[];
  onResetFilters: () => void;
  onOpenFields: () => void;
  onRefresh: () => void;
  view: CashflowViewMode;
  onViewChange: (view: CashflowViewMode) => void;
  headerTitle: string;
  onNavigatePrev: () => void;
  onNavigateNext: () => void;
  onGoToday: () => void;
  navActions?: React.ReactNode;
};

export function CashflowReportHeader({
  filteredEventCount,
  totalsByAssetClass = [],
  isLoading,
  errorMessage,
  filters,
  onFiltersChange,
  bankOptions,
  assetClassOptions,
  bankOptionIds,
  assetClassCodes,
  onResetFilters,
  onOpenFields,
  onRefresh,
  view,
  onViewChange,
  headerTitle,
  onNavigatePrev,
  onNavigateNext,
  onGoToday,
  navActions,
}: CashflowReportHeaderProps) {
  const hasActiveFilters = hasActiveCashflowFilters(filters, {
    bankIds: bankOptionIds,
    assetClasses: assetClassCodes,
  });

  return (
    <>
      <div className="flex flex-col gap-3 border-b pb-4">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-2.5">
              <div className="flex size-8 items-center justify-center rounded-lg border bg-sky-500/10 text-sky-700 dark:text-sky-400">
                <CalendarDays className="size-4" />
              </div>
              <h1 className="font-semibold text-2xl tracking-tight">Cashflow</h1>
              <Badge variant="secondary" className="font-normal tabular-nums">
                {formatPlainAmount(filteredEventCount)} events
              </Badge>
              <CashflowCurrenciesDropdown totals={totalsByAssetClass} />
              {isLoading ? (
                <Badge variant="outline" className="font-normal">
                  Loading…
                </Badge>
              ) : null}
            </div>
            {errorMessage ? <p className="mt-1.5 text-destructive text-sm">{errorMessage}</p> : null}
          </div>

          <div className="flex flex-wrap items-center gap-2">
            <div className="relative w-full sm:w-[220px]">
              <Search className="absolute top-1/2 left-3 size-3.5 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Search title, ISIN…"
                value={filters.search}
                onChange={(e) => onFiltersChange((p) => ({ ...p, search: e.target.value }))}
                className="h-9 w-full pl-9"
              />
            </div>

            <CashflowFiltersDialog
              filters={filters}
              onApply={onFiltersChange}
              bankOptions={bankOptions}
              assetClassOptions={assetClassOptions}
              isLoadingOptions={isLoading}
            />

            <CustomerFieldsButton label="Fields" onClick={onOpenFields} />

            <Button
              type="button"
              variant="outline"
              size="icon"
              className="size-9 shrink-0"
              disabled={isLoading}
              onClick={() => {
                onRefresh();
                toast.message("Calendar refreshed");
              }}
            >
              <RefreshCw className={cn("size-4", isLoading && "animate-spin")} />
              <span className="sr-only">Refresh report</span>
            </Button>
          </div>
        </div>
      </div>

      {hasActiveFilters ? (
        <div className="flex flex-wrap items-center gap-2">
          {filters.search ? (
            <Badge variant="secondary" className="gap-1 pr-1 font-normal">
              Search: {filters.search}
              <button
                type="button"
                className="rounded-full p-0.5 hover:bg-muted"
                onClick={() => onFiltersChange((p) => ({ ...p, search: "" }))}
              >
                <X className="size-3" />
              </button>
            </Badge>
          ) : null}
          {assetClassCodes.length > 0 &&
          !isCashflowFilterFullySelected(filters.assetClasses, assetClassCodes) ? (
            <Badge variant="secondary" className="font-normal">
              {filters.assetClasses.length} asset classes
            </Badge>
          ) : null}
          {bankOptionIds.length > 0 && !isCashflowFilterFullySelected(filters.bankIds, bankOptionIds) ? (
            <Badge variant="secondary" className="font-normal">
              {filters.bankIds.length} banks
            </Badge>
          ) : null}
          {!areAllCashflowEventTypesEnabled(filters.eventTypes) ? (
            <Badge variant="secondary" className="font-normal">
              {CASHFLOW_EVENT_TYPE_KEYS.filter((key) => filters.eventTypes[key])
                .map((key) => CASHFLOW_EVENT_TYPE_LABELS[key])
                .join(" · ") || "No event types"}
            </Badge>
          ) : null}
          {!areAllStructureStatusesSelected(filters.structureStatusIds) ? (
            <Badge variant="secondary" className="inline-flex flex-wrap items-center gap-1.5 font-normal">
              {filters.structureStatusIds.length === 0 ? (
                "No Early Redm / Delivery"
              ) : (
                CASHFLOW_STRUCTURE_STATUS_DISPLAY.filter((entry) =>
                  filters.structureStatusIds.includes(entry.statusId),
                ).map((entry) => {
                  const status = CASHFLOW_STRUCTURE_STATUSES.find((item) => item.id === entry.statusId);
                  if (!status) return null;
                  return (
                    <span key={status.id} className="inline-flex items-center gap-1">
                      <CashflowStructureStatusIcon
                        earlyRedemption={status.earlyRedemption}
                        delivery={status.delivery}
                        status={status}
                        size="sm"
                      />
                      <span className="font-mono tabular-nums">{status.shortKey}</span>
                    </span>
                  );
                })
              )}
            </Badge>
          ) : null}
          <Button variant="ghost" size="sm" className="h-7 px-2.5 text-xs" onClick={onResetFilters}>
            Clear all
          </Button>
        </div>
      ) : null}

      <div className="flex flex-wrap items-center gap-2">
        <div className="inline-flex items-center gap-0.5 rounded-lg border border-border/60 bg-muted/40 p-1">
          <Button variant="ghost" size="icon" className="size-8" onClick={onNavigatePrev}>
            <ChevronLeft className="size-4" />
          </Button>
          <Button variant="ghost" size="sm" className="h-8 px-3 font-medium" onClick={onGoToday}>
            Today
          </Button>
          <Button variant="ghost" size="icon" className="size-8" onClick={onNavigateNext}>
            <ChevronRight className="size-4" />
          </Button>
        </div>

        <div className="min-w-0 flex-1 px-1">
          <p className="font-semibold text-base tracking-tight sm:text-lg">{headerTitle}</p>
        </div>

        {navActions}

        <ToggleGroup
          type="single"
          value={view}
          onValueChange={(v) => v && onViewChange(v as CashflowViewMode)}
          variant="outline"
          size="sm"
          className="rounded-lg border border-border/60 bg-muted/40 p-1"
        >
          <ToggleGroupItem value="month" className={toggleItemClass}>
            Month
          </ToggleGroupItem>
          <ToggleGroupItem value="week" className={toggleItemClass}>
            Week
          </ToggleGroupItem>
          <ToggleGroupItem value="day" className={toggleItemClass}>
            Day
          </ToggleGroupItem>
          <ToggleGroupItem value="list" className={cn(toggleItemClass, "gap-1")}>
            <List className="size-3.5" />
            List
          </ToggleGroupItem>
        </ToggleGroup>
      </div>
    </>
  );
}