"use client";

import { useState, useMemo } from "react";
import { ReportFilters } from "@/components/ui/ReportFilters";
import { RefreshCw, Filter } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { ErrorMessage } from "@/components/ui/ErrorMessage";
import { useCashflowReport } from "@/hooks/useCashflowReport";
import { EventDetailsModal } from "@/components/reports/cashflow/EventDetailsModal";
import { CashflowCalendar } from "@/components/reports/cashflow/CashflowCalendar";
import { CashflowEvent } from "@/types/cashflow";

export default function CashflowPage() {
  const {
    events,
    banks,
    assetClasses,
    selectedBanks,
    setSelectedBanks,
    selectedAssetClass,
    setSelectedAssetClass,
    loading,
    error,
    fetchData,
    resetFilters,
    getActiveFilterCount,
  } = useCashflowReport();

  const [showModal, setShowModal] = useState(false);
  const [selectedEvent, setSelectedEvent] = useState<CashflowEvent | null>(null);
  const [showFilters, setShowFilters] = useState(false);

  // Filter events based on asset class selection
  const filteredEvents = useMemo(() => {
    return events.filter((event) => {
      const assetClassMatch =
        !selectedAssetClass ||
        event.details?.asset_class === selectedAssetClass;
      return assetClassMatch;
    });
  }, [events, selectedAssetClass]);

  const handleEventClick = (event: CashflowEvent) => {
    setSelectedEvent(event);
    setShowModal(true);
  };

  const closeModal = () => {
    setShowModal(false);
    setSelectedEvent(null);
  };

  const handleApplyFilters = async () => {
    try {
      await fetchData();
      setShowFilters(false);
    } catch (err) {
      // Error is already handled by the hook's error state
      console.error("Failed to load cashflow data:", err);
    }
  };

  const handleResetFilters = () => {
    resetFilters();
    setShowFilters(false);
  };

  return (
    <div className="container mx-auto px-4 py-10">
      <PageHeader
        title="Cashflow Calendar"
        description="View and manage your financial events across different banks and asset classes"
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Reports" },
          { label: "Performance" },
          { label: "Cashflow" },
        ]}
        actions={
          <div className="flex items-center gap-2">
            <button
              onClick={() => setShowFilters(!showFilters)}
              className={`inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-semibold shadow-sm transition-all duration-200 ${
                showFilters
                  ? "border-[#428B4D] bg-[#428B4D] text-white"
                  : "border-[#428B4D]/40 bg-white text-slate-700 hover:bg-[#428B4D] hover:text-white"
              }`}
            >
              <Filter className="h-4 w-4" />
              Filters {getActiveFilterCount() > 0 && `(${getActiveFilterCount()})`}
            </button>
            <button
              onClick={fetchData}
              disabled={loading}
              className="inline-flex items-center gap-2 rounded-lg bg-[#428B4D] px-3 py-1.5 text-xs font-semibold text-white hover:bg-[#357a3d] transition-colors disabled:opacity-50"
            >
              <RefreshCw
                className={loading ? "h-4 w-4 animate-spin" : "h-4 w-4"}
              />
              {loading ? "Refreshing…" : "Refresh"}
            </button>
          </div>
        }
      />

      {/* Filters Panel */}
      {showFilters && (
        <div className="mt-6">
          <ReportFilters
            filters={[
              {
                type: "search-multi-select",
                label: "Banks",
                options: banks.map((bank) => ({
                  id: bank.bank_id,
                  label: bank.bank_name,
                  value: bank.bank_id,
                })),
                value: selectedBanks,
                onChange: (value) => setSelectedBanks(value),
              },
              {
                type: "select",
                label: "Asset Class",
                placeholder: "All Asset Classes",
                options: assetClasses.map((ac) => ({
                  id: ac,
                  label: ac,
                  value: ac,
                })),
                value: selectedAssetClass,
                onChange: (value) => setSelectedAssetClass(value),
              },
            ]}
            onApply={handleApplyFilters}
            onReset={handleResetFilters}
            variant="panel"
            showFilters={true}
          />
        </div>
      )}

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

      {/* Calendar */}
      <div className="mt-6 bg-white rounded-lg shadow-sm border border-slate-200 p-6">
        <CashflowCalendar
          events={filteredEvents}
          loading={loading}
          onEventClick={handleEventClick}
        />
      </div>

      {/* Event Details Modal */}
      {showModal && selectedEvent && (
        <EventDetailsModal event={selectedEvent} onClose={closeModal} />
      )}
    </div>
  );
}