"use client";

import { useState } from "react";

import { Grid, List, Plus, RefreshCw } from "lucide-react";

import {
    AccountsTable,
    TransactionsTable,
    BalanceChart,
    TransactionTrends,
    AccountForm,
    TransactionForm,
} from "@/components/banking";
import { Button } from "@/components/ui/button";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useAccountsQuery, useCreateAccountMutation } from "@/hooks/banking/use-accounts-queries";
import { useTransactionsQuery, useCreateTransactionMutation } from "@/hooks/banking/use-transactions-queries";
import type { AccountCreateData, TransactionCreateData, BankingAccount, BankingTransaction } from "@/types/banking";

export function BankingOverview() {
    const [isAccountFormOpen, setIsAccountFormOpen] = useState(false);
    const [isTransactionFormOpen, setIsTransactionFormOpen] = useState(false);
    const [selectedAccount, setSelectedAccount] = useState<string | undefined>();

    // Hooks pour les données
    const {
        data: accountsResponse,
        isLoading: accountsLoading,
        refetch: refetchAccounts,
    } = useAccountsQuery({
        page: 1,
        page_size: 50,
    });

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

    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,
        client_name: account.client.full_name,
        client_email: account.client.email,
    }));

    // 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(),
    }));

    // Services pour les actions CRUD
    const createAccount = useCreateAccountMutation();
    const createTransaction = useCreateTransactionMutation();

    const handleCreateAccount = async (data: AccountCreateData) => {
        try {
            await createAccount.mutateAsync(data);
            refetchAccounts();
            setIsAccountFormOpen(false);
        } catch (error) {
            console.error("Erreur lors de la création du compte:", error);
        }
    };

    const handleCreateTransaction = async (data: TransactionCreateData) => {
        try {
            await createTransaction.mutateAsync(data);
            refetchTransactions();
            setIsTransactionFormOpen(false);
        } catch (error) {
            console.error("Erreur lors de la création de la transaction:", error);
        }
    };

    const handleRefresh = () => {
        refetchAccounts();
        refetchTransactions();
    };

    return (
        <div className="space-y-6">
            {/* Actions rapides */}
            <Card>
                <CardHeader>
                    <div className="flex items-center justify-between">
                        <div>
                            <CardTitle>Gestion Banking</CardTitle>
                            <CardDescription>Comptes bancaires et transactions</CardDescription>
                        </div>
                        <div className="flex items-center space-x-2">
                            <Button onClick={handleRefresh} variant="outline" size="sm">
                                <RefreshCw className="mr-2 h-4 w-4" />
                                Actualiser
                            </Button>
                            <Button onClick={() => setIsTransactionFormOpen(true)} variant="outline" size="sm">
                                <Plus className="mr-2 h-4 w-4" />
                                Transaction
                            </Button>
                            <Button onClick={() => setIsAccountFormOpen(true)} size="sm">
                                <Plus className="mr-2 h-4 w-4" />
                                Compte
                            </Button>
                        </div>
                    </div>
                </CardHeader>
            </Card>

            {/* Contenu principal avec onglets */}
            <Tabs defaultValue="accounts" className="space-y-4">
                <TabsList>
                    <TabsTrigger value="accounts" className="flex items-center gap-2">
                        <Grid className="h-4 w-4" />
                        Comptes
                    </TabsTrigger>
                    <TabsTrigger value="transactions" className="flex items-center gap-2">
                        <List className="h-4 w-4" />
                        Transactions
                    </TabsTrigger>
                    <TabsTrigger value="analytics" className="flex items-center gap-2">
                        Analyses
                    </TabsTrigger>
                </TabsList>

                <TabsContent value="accounts" className="space-y-4">
                    <AccountsTable
                        accounts={uiAccounts}
                        loading={accountsLoading}
                        onCreateAccount={() => setIsAccountFormOpen(true)}
                        onViewAccount={(id) => console.log("View account:", id)}
                        onEditAccount={(id) => console.log("Edit account:", id)}
                        onRefresh={refetchAccounts}
                        onExport={() => console.log("Export accounts")}
                    />
                </TabsContent>

                <TabsContent value="transactions" className="space-y-4">
                    <TransactionsTable
                        transactions={uiTransactions}
                        loading={transactionsLoading}
                        onCreateTransaction={() => setIsTransactionFormOpen(true)}
                        onViewTransaction={(id) => console.log("View transaction:", id)}
                        onEditTransaction={(id) => console.log("Edit transaction:", id)}
                        onRefresh={refetchTransactions}
                        onExport={() => console.log("Export transactions")}
                    />
                </TabsContent>

                <TabsContent value="analytics" className="space-y-4">
                    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
                        <BalanceChart
                            accounts={uiAccounts}
                            selectedAccountId={selectedAccount}
                            onAccountChange={setSelectedAccount}
                        />
                        <TransactionTrends transactions={uiTransactions} />
                    </div>
                </TabsContent>
            </Tabs>

            {/* Formulaires modaux */}
            <AccountForm
                open={isAccountFormOpen}
                onOpenChange={setIsAccountFormOpen}
                mode="create"
                onSubmit={handleCreateAccount}
                loading={createAccount.isPending}
                clients={[]} // TODO: Intégrer avec les clients
            />

            <TransactionForm
                open={isTransactionFormOpen}
                onOpenChange={setIsTransactionFormOpen}
                mode="create"
                onSubmit={handleCreateTransaction}
                loading={createTransaction.isPending}
                accounts={uiAccounts}
            />
        </div>
    );
}