"use client";

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 { useBankingData } from "@/lib/hooks";
import { Button } from "@/components/ui/button";
import { Upload } from "lucide-react";

export default function DashboardPage() {
  const { data, isLoading, refresh } = useBankingData();

  if (isLoading || !data) {
    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>
        }
      />

      <OverviewCards data={data} />

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