"use client";

import {
  Calendar,
  Download,
  FileSpreadsheet,
  Printer,
  RefreshCw,
  Search,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ReportFilterParams, ReportTabType } from "@/types/reports";

interface ReportFiltersBarProps {
  filters: ReportFilterParams;
  onTabChange: (tab: ReportTabType) => void;
  onPeriodChange: (period: ReportFilterParams["period"]) => void;
  onDateRangeChange: (startDate?: string, endDate?: string) => void;
  onSearchChange: (search: string) => void;
  onRefresh: () => void;
  onExportCSV: () => void;
  isLoading?: boolean;
}

export function ReportFiltersBar({
  filters,
  onTabChange,
  onPeriodChange,
  onDateRangeChange,
  onSearchChange,
  onRefresh,
  onExportCSV,
  isLoading = false,
}: ReportFiltersBarProps) {
  const tabs: { id: ReportTabType; label: string }[] = [
    { id: "financial", label: "💰 Financial & Revenue" },
    { id: "fleet", label: "🚜 Fleet & Utilization" },
    { id: "maintenance", label: "🔧 Maintenance & Costs" },
  ];

  const periods: { id: ReportFilterParams["period"]; label: string }[] = [
    { id: "all", label: "Todo o Histórico" },
    { id: "30days", label: "Últimos 30 Dias" },
    { id: "month", label: "Mês Atual" },
    { id: "year", label: "Ano Atual" },
  ];

  return (
    <div className="space-y-4 print:hidden">
      {/* Seleção de Abas do Relatório */}
      <div className="flex flex-wrap items-center justify-between gap-3 border-b pb-3">
        <div className="flex flex-wrap items-center gap-1.5 rounded-lg border bg-muted/60 p-1">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => onTabChange(tab.id)}
              className={`rounded-md px-3.5 py-1.5 text-xs font-semibold transition-all ${
                filters.tab === tab.id
                  ? "bg-background text-foreground shadow-xs"
                  : "text-muted-foreground hover:text-foreground"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Botões de Ação Global (Exportar CSV, Imprimir, Refresh) */}
        <div className="flex items-center gap-2">
          <Button
            variant="secondary"
            size="sm"
            onClick={onRefresh}
            title="Atualizar dados"
          >
            <RefreshCw className={`h-4 w-4 mr-1.5 ${isLoading ? "animate-spin" : ""}`} />
            Atualizar
          </Button>

          <Button
            variant="secondary"
            size="sm"
            onClick={() => window.print()}
            title="Imprimir ou Salvar em PDF"
          >
            <Printer className="h-4 w-4 mr-1.5" /> Imprimir / PDF
          </Button>

          <Button size="sm" onClick={onExportCSV} className="shadow-xs">
            <FileSpreadsheet className="h-4 w-4 mr-1.5" /> Exportar CSV
          </Button>
        </div>
      </div>

      {/* Filtros de Período, Intervalo de Data e Busca */}
      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div className="flex flex-wrap items-center gap-3">
          <div className="flex flex-wrap items-center gap-1.5">
            <span className="text-xs font-semibold text-muted-foreground flex items-center gap-1">
              <Calendar className="h-3.5 w-3.5" /> Período:
            </span>
            {periods.map((p) => (
              <button
                key={p.id}
                onClick={() => onPeriodChange(p.id)}
                className={`rounded-full px-3 py-1 text-xs font-medium border transition-colors ${
                  filters.period === p.id && !filters.startDate && !filters.endDate
                    ? "bg-primary text-primary-foreground border-primary"
                    : "bg-background text-muted-foreground border-input hover:bg-muted hover:text-foreground"
                }`}
              >
                {p.label}
              </button>
            ))}
          </div>

          {/* Seletores de Data Inicial e Data Final */}
          <div className="flex flex-wrap items-center gap-1.5 border-l pl-3 border-border">
            <div className="flex items-center gap-1">
              <span className="text-xs text-muted-foreground font-medium">De:</span>
              <Input
                type="date"
                value={filters.startDate || ""}
                onChange={(e) => onDateRangeChange(e.target.value || undefined, filters.endDate)}
                className="h-8 w-36 text-xs bg-background"
              />
            </div>
            <div className="flex items-center gap-1">
              <span className="text-xs text-muted-foreground font-medium">Até:</span>
              <Input
                type="date"
                value={filters.endDate || ""}
                onChange={(e) => onDateRangeChange(filters.startDate, e.target.value || undefined)}
                className="h-8 w-36 text-xs bg-background"
              />
            </div>
            {(filters.startDate || filters.endDate) && (
              <Button
                variant="ghost"
                size="sm"
                onClick={() => onDateRangeChange(undefined, undefined)}
                className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground"
                title="Limpar filtro de data"
              >
                Limpar
              </Button>
            )}
          </div>
        </div>

        <div className="relative max-w-xs flex-1">
          <Search className="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            value={filters.search || ""}
            onChange={(e) => onSearchChange(e.target.value)}
            className="h-9 pl-9 text-xs"
            placeholder="Filtrar dados do relatório..."
          />
        </div>
      </div>
    </div>
  );
}