import React, { useState, useEffect } from 'react';
import StatCard from './Components/StatCard';
import ProfitTable from './Components/ProfitTable';
import { DollarSign, TrendingDown, TrendingUp, Calendar, ChevronDown } from 'lucide-react';

export default function Dashboard() {
    const [stats, setStats] = useState({
        total_income: 0,
        total_expense: 0,
        net_profit: 0
    });
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/reports/profit')
            .then(res => res.json())
            .then(data => {
                setStats({
                    total_income: data.total_income,
                    total_expense: data.total_expense,
                    net_profit: data.net_profit
                });
                setLoading(false);
            })
            .catch(err => {
                console.error("Error fetching dashboard stats:", err);
                setLoading(false);
            });
    }, []);

    const formatCurrency = (val) => {
        if (val === undefined || val === null || isNaN(val)) return 'AED 0.00';
        return new Intl.NumberFormat('en-AE', { style: 'currency', currency: 'AED' }).format(val);
    };

    return (
        <>
            <main className="p-8 max-w-[1600px] mx-auto space-y-8">
                {/* Dashboard Title & Filters */}
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <h2 className="text-4xl font-extrabold text-gray-900 tracking-tight">Owner Dashboard</h2>
                    
                    <div className="flex items-center gap-3">
                        {/* Branch Selector */}
                        <div className="relative group">
                            <select className="appearance-none pl-4 pr-10 py-2.5 bg-white border border-gray-200 rounded-xl text-sm font-bold text-gray-600 focus:border-red-500/30 focus:ring-4 focus:ring-red-500/5 transition-all outline-none">
                                <option>All Branches</option>
                                <option>Downtown Gym</option>
                                <option>Uptown Fitness</option>
                            </select>
                            <ChevronDown size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-red-500 transition-all" />
                        </div>

                        {/* Date Range */}
                        <div className="flex items-center bg-white border border-gray-200 rounded-xl p-1 gap-1">
                            <div className="flex items-center gap-2 px-3 py-1.5 text-xs font-bold text-gray-500 border-r border-gray-100">
                                <span className="text-gray-400 font-medium">From</span>
                                <span>31 - 01 - 2026</span>
                                <Calendar size={14} className="text-gray-400" />
                            </div>
                            <div className="flex items-center gap-2 px-3 py-1.5 text-xs font-bold text-gray-500">
                                <span className="text-gray-400 font-medium">To</span>
                                <span>02 - 03 - 2026</span>
                                <Calendar size={14} className="text-gray-400" />
                            </div>
                        </div>
                    </div>
                </div>

                {/* Stat Cards Grid */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <StatCard 
                        title={loading ? "Loading..." : formatCurrency(stats.total_income)} 
                        subtitle="Total Income" 
                        value={loading ? "..." : formatCurrency(stats.total_income)} 
                        color="green" 
                        icon={DollarSign} 
                    />
                    <StatCard 
                        title={loading ? "Loading..." : formatCurrency(stats.total_expense)} 
                        subtitle="Total Expenses" 
                        value={loading ? "..." : formatCurrency(stats.total_expense)} 
                        color="red" 
                        icon={TrendingDown} 
                    />
                    <StatCard 
                        title={loading ? "Loading..." : formatCurrency(stats.net_profit)} 
                        subtitle="Net Profit" 
                        value={loading ? "..." : formatCurrency(stats.net_profit)} 
                        color="blue" 
                        icon={TrendingUp} 
                    />
                </div>

                {/* Main Content Area */}
                <div className="grid grid-cols-1 gap-8">
                    <ProfitTable />
                </div>
            </main>
        </>
    );
}