"use client";

import { FinancialReportTable } from "@/components/reports/financial-report-table";
import { FleetReportTable } from "@/components/reports/fleet-report-table";
import { MaintenanceReportTable } from "@/components/reports/maintenance-report-table";
import { ReportFiltersBar } from "@/components/reports/report-filters-bar";
import { ReportSummaryCards } from "@/components/reports/report-summary-cards";
import { useReports } from "@/hooks/use-reports";

import { formatDate } from "@/lib/utils";

export default function RelatoriosPage() {
  const {
    filters,
    summary,
    financialData,
    fleetData,
    maintenanceData,
    isLoading,
    setTab,
    setPeriod,
    setDateRange,
    setSearch,
    loadData,
    exportCSV,
  } = useReports();

  const reportTitle =
    filters.tab === "financial"
      ? "Relatório Gerencial de Faturamento e Fluxo Financeiro"
      : filters.tab === "fleet"
      ? "Relatório Gerencial de Desempenho e Ocupação da Frota"
      : "Relatório Gerencial de Manutenções e Custos Operacionais";

  const periodText =
    filters.startDate || filters.endDate
      ? `${filters.startDate ? formatDate(filters.startDate) : "Início"} até ${filters.endDate ? formatDate(filters.endDate) : "Hoje"}`
      : filters.period === "30days"
      ? "Últimos 30 Dias"
      : filters.period === "month"
      ? "Mês Atual"
      : filters.period === "year"
      ? "Ano Atual"
      : "Todo o Histórico";

  return (
    <div className="space-y-6">
      {/* Cabeçalho Executivo de Impressão / PDF (Exibido apenas ao imprimir) */}
      <div className="hidden print:block border-b-2 border-slate-900 pb-4 mb-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-slate-950 text-white text-xl font-black">
              BL
            </div>
            <div>
              <h2 className="text-2xl font-extrabold text-slate-950 tracking-tight">BlackLoc</h2>
              <p className="text-xs font-medium text-slate-600">Sistema de Gestão & Locações Industriais</p>
            </div>
          </div>

          <div className="text-right text-xs text-slate-600 space-y-1">
            <p className="font-bold text-sm text-slate-900">{reportTitle}</p>
            <p><strong className="text-slate-800">Data de Emissão:</strong> {new Date().toLocaleDateString("pt-BR")} às {new Date().toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" })}</p>
            <p><strong className="text-slate-800">Período Filtrado:</strong> {periodText}</p>
            {filters.search ? (
              <p><strong className="text-slate-800">Filtro de Busca:</strong> "{filters.search}"</p>
            ) : null}
          </div>
        </div>
      </div>

      {/* Header com Título da Tela */}
      <div className="flex flex-wrap items-center justify-between gap-4 print:hidden">
        <div>
          <p className="text-sm font-medium text-muted-foreground">Dashboard / Relatórios & Inteligência</p>
          <h1 className="mt-1 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
            Relatórios Gerenciais
          </h1>
        </div>
      </div>

      {/* KPIs Globais Executivos */}
      <ReportSummaryCards summary={summary} />

      {/* Barra de Filtros, Abas e Exportação */}
      <ReportFiltersBar
        filters={filters}
        onTabChange={setTab}
        onPeriodChange={setPeriod}
        onDateRangeChange={setDateRange}
        onSearchChange={setSearch}
        onRefresh={loadData}
        onExportCSV={exportCSV}
        isLoading={isLoading}
      />

      {/* Conteúdo Dinâmico por Aba */}
      {filters.tab === "financial" && (
        <FinancialReportTable data={financialData} isLoading={isLoading} />
      )}

      {filters.tab === "fleet" && (
        <FleetReportTable data={fleetData} isLoading={isLoading} />
      )}

      {filters.tab === "maintenance" && (
        <MaintenanceReportTable data={maintenanceData} isLoading={isLoading} />
      )}
    </div>
  );
}