"use client"

import type { ReactNode } from "react"

import { Button } from "@/components/ui/button"
import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { cn } from "@/lib/utils"
import { DateRangeButton } from "@/components/date-range-button"

type BillingFilter = "all" | "avulso" | "contratado"
type TimeRange = "90d" | "30d" | "7d" | "365d" | "all"

type ReportsFilterToolbarProps = {
  companyId: string
  onCompanyChange: (value: string) => void
  companyOptions: SearchableComboboxOption[]
  timeRange: TimeRange
  onTimeRangeChange: (value: TimeRange) => void
  showBillingFilter?: boolean
  billingFilter?: BillingFilter
  onBillingFilterChange?: (value: BillingFilter) => void
  extraFilters?: ReactNode
  exportHref?: string
  exportLabel?: string
  onExportClick?: () => void
  isExporting?: boolean
  onOpenScheduler?: () => void
  allowExtendedRanges?: boolean
  dateFrom?: string | null
  dateTo?: string | null
  onDateRangeChange?: (next: { from: string | null; to: string | null }) => void
  className?: string
}

const BILLING_TOGGLE_ITEM =
  "rounded-lg px-4 py-2 text-xs font-semibold text-muted-foreground transition data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"

export function ReportsFilterToolbar({
  companyId,
  onCompanyChange,
  companyOptions,
  timeRange,
  onTimeRangeChange,
  showBillingFilter = false,
  billingFilter = "all",
  onBillingFilterChange,
  extraFilters,
  exportHref,
  exportLabel = "Exportar XLSX",
  onExportClick,
  isExporting = false,
  onOpenScheduler,
  allowExtendedRanges = false,
  dateFrom,
  dateTo,
  onDateRangeChange,
  className,
}: ReportsFilterToolbarProps) {
  return (
    <div className={cn("flex flex-col gap-3 rounded-3xl border border-border/60 bg-white/90 p-4 shadow-sm", className)}>
      <div className="flex flex-wrap items-center gap-3">
        <SearchableCombobox
          value={companyId}
          onValueChange={(next) => onCompanyChange(next ?? "all")}
          options={companyOptions}
          placeholder="Todas as empresas"
          triggerClassName="h-10 w-full min-w-56 rounded-2xl border border-border/60 bg-background/95 px-3 text-sm font-semibold text-neutral-800 md:w-64"
          align="center"
        />
        {onDateRangeChange ? (
          <DateRangeButton
            from={dateFrom ?? null}
            to={dateTo ?? null}
            onChange={onDateRangeChange}
            className="w-full min-w-[200px] md:w-auto"
            align="center"
          />
        ) : null}
        {showBillingFilter ? (
          <ToggleGroup
            type="single"
            value={billingFilter}
            onValueChange={(next) => next && onBillingFilterChange?.(next as BillingFilter)}
            className="flex flex-1 flex-wrap gap-2 rounded-xl border border-border/70 bg-background/60 p-1 sm:flex-none"
          >
            <ToggleGroupItem value="all" className={cn(BILLING_TOGGLE_ITEM, "flex-1 justify-center sm:flex-none")}>
              Todos
            </ToggleGroupItem>
            <ToggleGroupItem
              value="avulso"
              className={cn(BILLING_TOGGLE_ITEM, "flex-1 justify-center sm:flex-none")}
            >
              Somente avulsos
            </ToggleGroupItem>
            <ToggleGroupItem
              value="contratado"
              className={cn(BILLING_TOGGLE_ITEM, "flex-1 justify-center sm:flex-none")}
            >
              Somente contratados
            </ToggleGroupItem>
          </ToggleGroup>
        ) : null}
        <ToggleGroup
          type="single"
          value={timeRange}
          onValueChange={(value) => value && onTimeRangeChange(value as TimeRange)}
          variant="outline"
          size="lg"
          className="flex rounded-2xl border border-border/60"
        >
          <ToggleGroupItem value="90d" className="min-w-[80px] justify-center px-4">
            90 dias
          </ToggleGroupItem>
          <ToggleGroupItem value="30d" className="min-w-[80px] justify-center px-4">
            30 dias
          </ToggleGroupItem>
          <ToggleGroupItem value="7d" className="min-w-[80px] justify-center px-4">
            7 dias
          </ToggleGroupItem>
          {allowExtendedRanges ? (
            <>
              <ToggleGroupItem value="365d" className="hidden min-w-[96px] justify-center px-4 lg:inline-flex">
                12 meses
              </ToggleGroupItem>
              <ToggleGroupItem value="all" className="hidden min-w-[120px] justify-center px-5 lg:inline-flex">
                Todo histórico
              </ToggleGroupItem>
            </>
          ) : null}
        </ToggleGroup>
        <div className="ml-auto flex items-center gap-2">
          {onOpenScheduler ? (
            <Button variant="outline" size="sm" onClick={onOpenScheduler}>
              Agendar exportação
            </Button>
          ) : null}
          {exportHref ? (
            <Button asChild size="sm" variant="outline" disabled={isExporting}>
              <a href={exportHref}>{exportLabel}</a>
            </Button>
          ) : onExportClick ? (
            <Button size="sm" variant="outline" onClick={onExportClick} disabled={isExporting}>
              {isExporting ? "Exportando..." : exportLabel}
            </Button>
          ) : null}
        </div>
      </div>
      {extraFilters}
    </div>
  )
}
