"use client";

import { useState } from "react";

import { BankingStatsCards } from "@/components/banking";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useAccountsQuery } from "@/hooks/banking/use-accounts-queries";
import { useTransactionsQuery } from "@/hooks/banking/use-transactions-queries";
import type { BankingAccount, BankingTransaction } from "@/types/banking";

export function BankingStats() {
  const [timeRange, setTimeRange] = useState<"today" | "week" | "month" | "year">("month");

  const { data: accountsResponse, isLoading: accountsLoading } = useAccountsQuery({
    page: 1,
    page_size: 100,
  });

  const { data: transactionsResponse, isLoading: transactionsLoading } = useTransactionsQuery({
    page: 1,
    page_size: 1000,
  });

  const accounts = accountsResponse?.results ?? [];
  const transactions = transactionsResponse?.results ?? [];

  // Transform accounts for UI components
  const uiAccounts: BankingAccount[] = accounts.map((account) => ({
    id: account.id.toString(),
    account_name: account.client.full_name || `Compte ${account.account_number}`,
    account_number: account.account_number,
    balance: parseFloat(account.balance),
    account_type: account.account_type,
    status: account.status,
    credit_limit: account.overdraft_limit ? parseFloat(account.overdraft_limit) : undefined,
    interest_rate: account.interest_rate ? parseFloat(account.interest_rate) : undefined,
    last_transaction_date: account.last_activity_date,
  }));

  // Transform transactions for UI components
  const uiTransactions: BankingTransaction[] = transactions.map((transaction) => ({
    id: transaction.id.toString(),
    transaction_id: transaction.transaction_id,
    transaction_date: transaction.processed_date ?? transaction.created_at,
    transaction_type: transaction.type,
    amount: parseFloat(transaction.amount),
    currency: transaction.currency,
    description: transaction.description,
    reference: transaction.reference,
    status: transaction.status,
    account_id: transaction.account.id.toString(),
    beneficiary_account_id: transaction.beneficiary_account?.id.toString(),
  }));

  if (accountsLoading || transactionsLoading) {
    return (
      <Card>
        <CardContent className="flex h-64 items-center justify-center">
          <div className="text-center">
            <p className="text-muted-foreground">Chargement des statistiques...</p>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Statistiques Banking</CardTitle>
        <CardDescription>Vue d&apos;ensemble des performances bancaires</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs value={timeRange} onValueChange={(value) => setTimeRange(value as typeof timeRange)}>
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="today">Aujourd&apos;hui</TabsTrigger>
            <TabsTrigger value="week">Cette semaine</TabsTrigger>
            <TabsTrigger value="month">Ce mois</TabsTrigger>
            <TabsTrigger value="year">Cette année</TabsTrigger>
          </TabsList>
          <TabsContent value={timeRange} className="space-y-4">
            <BankingStatsCards accounts={uiAccounts} transactions={uiTransactions} timeRange={timeRange} />
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  );
}