"use client"

import { Sidebar } from "@/components/dashboard/sidebar"
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, RefreshCw } from "lucide-react"

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

  if (isLoading || !data) {
    return (
      <div className="flex h-screen">
        <Sidebar />
        <main className="flex-1 flex items-center justify-center">
          <RefreshCw className="w-8 h-8 animate-spin text-muted-foreground" />
        </main>
      </div>
    )
  }

  return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <main className="flex-1 overflow-auto">
        <div className="p-6 space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-foreground">Tableau de bord</h1>
              <p className="text-muted-foreground">Vue d'ensemble de vos finances</p>
            </div>
            <OFXImportDialog onImportComplete={refresh}>
              <Button>
                <Upload className="w-4 h-4 mr-2" />
                Importer OFX
              </Button>
            </OFXImportDialog>
          </div>

          <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>
        </div>
      </main>
    </div>
  )
}