"use client";

import { useState, useCallback } from "react";
import { RefreshCw } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { useCashReport } from "@/hooks/useCashReport";
import { StatCards } from "@/components/reports/cash/StatCards";
import { DownloadButton } from "@/components/reports/cash/DownloadButton";
import { CashReportTable } from "@/components/reports/cash/CashReportTable";
import { CashReportActions } from "@/components/reports/cash/CashReportActions";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import {
  REPORT_PAGE_CONTAINER,
  REPORT_PAGE_CONTAINER_ALT,
  REPORT_PRIMARY,
} from "@/app/reports/constants";

export default function CashReport() {
  const { data, loading, fetchReport } = useCashReport();
  const [highlighted, setHighlighted] = useState<string | null>(null);

  const handleRefresh = useCallback(() => fetchReport(), [fetchReport]);

  if (loading) {
    return (
      <div className={REPORT_PAGE_CONTAINER_ALT}>
        <PageHeader
          title="Cash Report"
          description="Loading…"
          breadcrumbs={[...BREADCRUMBS.cashLiquidity]}
        />
        <div className="flex h-64 items-center justify-center">
          <RefreshCw
            className="h-8 w-8 animate-spin"  
            style={{ color: REPORT_PRIMARY }}
          />
        </div>
      </div>
    );
  }

  return (
    <div className={REPORT_PAGE_CONTAINER}>
      <PageHeader
        title="Cash Report"
        breadcrumbs={[...BREADCRUMBS.cashLiquidity]}
        actions={
          <CashReportActions
            isLoading={loading}
            onRefresh={handleRefresh}
          />
        }
      />

      <StatCards
        data={data}
        highlighted={highlighted}
        onHighlight={setHighlighted}
      />

      <DownloadButton />

      <CashReportTable
        data={data}
        highlighted={highlighted}
        onHighlight={setHighlighted}
      />
    </div>
  );
}