"use client";

import { useState } from "react";
import { RefreshCw } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { ErrorMessage } from "@/components/ui/ErrorMessage";
import { useCashDetailsReport } from "@/hooks/useCashDetailsReport";
import { StatCards } from "@/components/reports/common/StatCards";
import { DownloadButton } from "@/components/reports/common/DownloadButton";
import { CashDetailsTable } from "@/components/reports/cashdetails/CashDetailsTable";

const btnClass = (disabled = false) =>
  disabled
    ? "inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-500 cursor-not-allowed shadow-sm"
    : "inline-flex items-center gap-2 rounded-lg border border-[#428B4D]/40 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-sm hover:-translate-y-0.5 hover:border-[#428B4D] hover:bg-[#428B4D] hover:text-white active:scale-95 transition-all duration-200";

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

  const currencies = data?.data?.length
    ? Array.from(new Set(data.data.map(i => i.code))).sort()
    : [];

  if (loading) {
    return (
      <div className="container mx-auto px-4 py-10">
        <PageHeader title="Cash Details Report" description="Loading…" />
        <div className="flex h-64 items-center justify-center">
          <RefreshCw className="h-8 w-8 animate-spin text-[#428B4D]" />
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-10">
      <PageHeader
        title="Cash Details Report"
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Reports" },
          { label: "Liquidity" },
          { label: "Cash Details" },
        ]}
        actions={
          <button onClick={fetchReport} disabled={loading} className={btnClass(loading)}>
            <RefreshCw className={loading ? "h-4 w-4 animate-spin" : "h-4 w-4"} />
            {loading ? "Refreshing…" : "Refresh"}
          </button>
        }
      />

      {/* Error Message */}
      {error && (
        <ErrorMessage
          error={error}
          onDismiss={clearError}
          className="mt-6"
        />
      )}

      <StatCards
        totals={data?.totals?.amount_array_total}
        currencies={currencies}
        highlighted={highlighted}
        onHighlight={setHighlighted}
      />

      <DownloadButton endpoint="/api/reports/liquidity/cashdetails" filenamePrefix="Cash_Details_Report" />

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