shimmer-finance-ai-companion/src/components/features/BudgetManager.tsx

import React from 'react';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Plus, Settings } from 'lucide-react';

// Import New Modular Budget Components
import BudgetSummaryCards from '@/components/budget/BudgetSummaryCards';
import BudgetOverviewList from '@/components/budget/BudgetOverviewList';
import RecentTransactionsCard from '@/components/budget/RecentTransactionsCard';
import BudgetCategoryGrid from '@/components/budget/BudgetCategoryGrid';
import FullExpensesTable from '@/components/budget/FullExpensesTable';
import AddExpenseForm from '@/components/budget/AddExpenseForm';
import SetBudgetForm from '@/components/budget/SetBudgetForm';

import BudgetGoalPlanning from '@/components/budget/BudgetGoalPlanning'; // Import new component

export default function BudgetManager() {
  return (
    <div className="space-y-6 animate-fade-in text-slate-800 pb-10">

      {/* Header Section */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
        <div>
          <h1 className="text-3xl font-light tracking-tight text-slate-900">
            Budget <span className="font-semibold bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-teal-600">Manager</span>
          </h1>
          <p className="text-slate-500 mt-1">Track every dirham with precision.</p>
        </div>
        <div className="flex gap-3">
          <Button variant="outline" className="border-slate-200 text-slate-700 bg-white hover:bg-slate-50">
            <Plus className="w-4 h-4 mr-2" /> Add Expense
          </Button>
          <Button className="bg-black text-white hover:bg-slate-800 shadow-md">
            <Settings className="w-4 h-4 mr-2" /> Set Budget
          </Button>
        </div>
      </div>

      {/* Summary Cards */}
      <BudgetSummaryCards />

      {/* Main Content Tabs */}
      <Tabs defaultValue="overview" className="space-y-6 w-full">
        <TabsList className="bg-white/60 p-1.5 rounded-2xl backdrop-blur-md border border-white/40 inline-flex w-auto flex-wrap lg:flex-nowrap shadow-sm h-auto">
          <TabsTrigger value="overview" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Overview</TabsTrigger>
          <TabsTrigger value="budgets" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Budgets</TabsTrigger>
          <TabsTrigger value="expenses" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Expenses</TabsTrigger>
          <TabsTrigger value="goal-planning" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Goal Planning</TabsTrigger>
          <TabsTrigger value="add-expense" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Add Expense</TabsTrigger>
          <TabsTrigger value="set-budget" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Set Budget</TabsTrigger>
        </TabsList>

        {/* Tab 1: Overview */}
        <TabsContent value="overview" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-auto lg:h-[450px]">
            <BudgetOverviewList />
            <RecentTransactionsCard />
          </div>
        </TabsContent>

        {/* Tab 2: Budgets */}
        <TabsContent value="budgets" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
          <BudgetCategoryGrid />
        </TabsContent>

        {/* Tab 3: Expenses */}
        <TabsContent value="expenses" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
          <FullExpensesTable />
        </TabsContent>

        {/* Tab 4: Goal Planning */}
        <TabsContent value="goal-planning" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
          <BudgetGoalPlanning />
        </TabsContent>

        {/* Tab 5: Add Expense */}
        <TabsContent value="add-expense" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
          <AddExpenseForm />
        </TabsContent>

        {/* Tab 6: Set Budget */}
        <TabsContent value="set-budget" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
          <SetBudgetForm />
        </TabsContent>

      </Tabs>
    </div>
  );
}