"use client";

import { useState, useMemo } from "react";
import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
import { OverviewCards } from "@/components/dashboard/overview-cards";
import { RecentTransactions } from "@/components/dashboard/recent-transactions";
import { AccountsSummary } from "@/components/dashboard/accounts-summary";
import { CategoryBreakdown } from "@/components/dashboard/category-breakdown";
import { OFXImportDialog } from "@/components/import/ofx-import-dialog";
import { AccountFilterCombobox } from "@/components/ui/account-filter-combobox";
import { Card, CardContent } from "@/components/ui/card";
import { useBankingData } from "@/lib/hooks";
import { Button } from "@/components/ui/button";
import { Upload } from "lucide-react";
import type { BankingData } from "@/lib/types";

export default function DashboardPage() {
  const { data, isLoading, refresh } = useBankingData();
  const [selectedAccounts, setSelectedAccounts] = useState<string[]>(["all"]);

  // Filter data based on selected accounts
  const filteredData = useMemo<BankingData | null>(() => {
    if (!data) return null;

    if (selectedAccounts.includes("all") || selectedAccounts.length === 0) {
      return data;
    }

    const filteredAccounts = data.accounts.filter((a) =>
      selectedAccounts.includes(a.id),
    );
    const filteredAccountIds = new Set(filteredAccounts.map((a) => a.id));
    const filteredTransactions = data.transactions.filter((t) =>
      filteredAccountIds.has(t.accountId),
    );

    return {
      ...data,
      accounts: filteredAccounts,
      transactions: filteredTransactions,
    };
  }, [data, selectedAccounts]);

  if (isLoading || !data || !filteredData) {
    return <LoadingState />;
  }

  return (
    <PageLayout>
      <PageHeader
        title="Tableau de bord"
        description="Vue d'ensemble de vos finances"
        actions={
          <OFXImportDialog onImportComplete={refresh}>
            <Button>
              <Upload className="w-4 h-4 mr-2" />
              Importer OFX
            </Button>
          </OFXImportDialog>
        }
      />

      <Card className="mb-6">
        <CardContent className="pt-4">
          <div className="flex flex-wrap gap-4">
            <AccountFilterCombobox
              accounts={data.accounts}
              folders={data.folders}
              value={selectedAccounts}
              onChange={setSelectedAccounts}
              className="w-full md:w-[280px]"
              filteredTransactions={data.transactions}
            />
          </div>
        </CardContent>
      </Card>

      <OverviewCards data={filteredData} />

      <div className="grid gap-6 lg:grid-cols-2">
        <RecentTransactions data={filteredData} />
        <div className="space-y-6">
          <AccountsSummary data={filteredData} />
          <CategoryBreakdown data={filteredData} />
        </div>
      </div>
    </PageLayout>
  );
}