import { useState } from "react";
import Header from "@/components/shared/Header";
import AppLayout from "@/components/layout/AppLayout";
import TransactionForm from "@/components/transactions/TransactionForm";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import AITransactionChat from "@/components/transactions/AITransactionChat";
import { ThemeToggle } from "@/components/theme/ThemeToggle";

const AddTransaction = () => {
  const [activeTab, setActiveTab] = useState<string>("ai");
  
  return (
    <AppLayout>
      <div className="max-w-md mx-auto px-4">
        <div className="flex justify-between items-center">
          <Header 
            title="Ajouter une Transaction"
            showBackButton
          />
          <ThemeToggle />
        </div>
        
        <Tabs defaultValue="ai" className="w-full mt-4" onValueChange={setActiveTab}>
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="ai">Assistant IA</TabsTrigger>
            <TabsTrigger value="form">Formulaire Standard</TabsTrigger>
          </TabsList>
          <TabsContent value="ai">
            <div className="mt-4">
              <AITransactionChat />
            </div>
          </TabsContent>
          <TabsContent value="form">
            <div className="mt-4">
              <TransactionForm />
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </AppLayout>
  );
};

export default AddTransaction;