"use client";

import { useState, useMemo, useCallback } from "react";
import { PageHeader } from "@/components/ui/PageHeader";
import { ReportFilters } from "@/components/ui/ReportFilters";
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";
import { CashflowReportActions } from "@/components/reports/cashflow/CashflowReportActions";
import { useCashflowFilters } from "@/components/reports/cashflow/useCashflowFilters";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import { REPORT_PAGE_CONTAINER } from "@/app/reports/constants";

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);

  const { filterConfig } = useCashflowFilters({
    banks,
    assetClasses,
    selectedBanks,
    selectedAssetClass,
    setSelectedBanks,
    setSelectedAssetClass,
  });

  const filteredEvents = useMemo(() => {
    if (!selectedAssetClass) return events;
    const selectedLabel = assetClasses.find(
      (ac) => ac.key === selectedAssetClass
    )?.label;
    return events.filter((event) => {
      const eventAssetClass = event.details?.asset_class;
      return (
        eventAssetClass === selectedAssetClass ||
        eventAssetClass === selectedLabel
      );
    });
  }, [events, selectedAssetClass, assetClasses]);

  const handleEventClick = useCallback((event: CashflowEvent) => {
    setSelectedEvent(event);
    setShowModal(true);
  }, []);

  const closeModal = useCallback(() => {
    setShowModal(false);
    setSelectedEvent(null);
  }, []);

  const handleToggleFilters = useCallback(
    () => setShowFilters((p) => !p),
    []
  );
  const handleRefresh = useCallback(() => fetchData(), [fetchData]);

  const handleApplyFilters = useCallback(async () => {
    try {
      await fetchData();
      setShowFilters(false);
    } catch (err) {
      console.error("Failed to load cashflow data:", err);
    }
  }, [fetchData]);

  const handleResetFilters = useCallback(() => {
    resetFilters();
    setShowFilters(false);
  }, [resetFilters]);

  return (
    <div className={REPORT_PAGE_CONTAINER}>
      <PageHeader
        title="Cashflow Calendar"
        description="View and manage your financial events across different banks and asset classes"
        breadcrumbs={[...BREADCRUMBS.cashflowPerformance]}
        actions={
          <CashflowReportActions
            isLoading={loading}
            onRefresh={handleRefresh}
            onToggleFilters={handleToggleFilters}
            showFilters={showFilters}
            activeFilterCount={getActiveFilterCount()}
          />
        }
      />

      {showFilters && (
        <div className="mt-6">
          <ReportFilters
            filters={filterConfig}
            onApply={handleApplyFilters}
            onReset={handleResetFilters}
            variant="panel"
            showFilters={true}
            activeFilterCount={getActiveFilterCount()}
          />
        </div>
      )}

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

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

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