src/pages/Transactions.tsx

import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import AppLayout from "@/components/layout/AppLayout";
import Header from "@/components/shared/Header";
import TransactionList from "@/components/transactions/TransactionList";
import { Transaction } from "@/components/dashboard/RecentTransactions";
import database from "@/services/database";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";

const Transactions = () => {
  const [transactions, setTransactions] = useState<Transaction[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const navigate = useNavigate();

  useEffect(() => {
    const loadTransactions = async () => {
      try {
        await database.initialize();
        
        // Fetch transactions from SQLite
        const results = database.exec('SELECT * FROM transactions ORDER BY date DESC');
        
        // Convert the results to our Transaction type
        const loadedTransactions: Transaction[] = results.map(row => ({
          id: row.id,
          title: row.title,
          amount: parseFloat(row.amount),
          type: row.type as 'income' | 'expense',
          category: row.category,
          date: new Date(row.date),
          note: row.note || undefined
        }));
        
        setTransactions(loadedTransactions);
      } catch (error) {
        console.error('Error loading transactions:', error);
        toast.error('Failed to load transactions');
      } finally {
        setIsLoading(false);
      }
    };
    
    loadTransactions();
  }, []);

  return (
    <AppLayout>
      <div className="max-w-md mx-auto">
        <Header 
          title="Transactions"
          subtitle="Manage your financial activities"
        />
        
        <div className="px-4 pb-6">
          {isLoading ? (
            <div className="flex justify-center py-8">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            </div>
          ) : transactions.length > 0 ? (
            <TransactionList transactions={transactions} />
          ) : (
            <div className="text-center py-8">
              <p className="text-muted-foreground">No transactions found</p>
              <Button 
                onClick={() => navigate('/add-transaction')}
                className="mt-4"
              >
                Add Transaction
              </Button>
            </div>
          )}
        </div>
      </div>
    </AppLayout>
  );
};

export default Transactions;