import React, { useEffect, useState } from 'react';
import { useMockStore } from '../data/mockStore';
import { useAuth } from '../context/AuthContext';
import { Link } from 'react-router-dom';
import {
    DollarSign, Flame, Calendar, CloudRain, Wind, Droplets, Thermometer,
    MapPin, Clock, ArrowUpRight, Sun, Cloud, AlertTriangle, Loader2, ShieldCheck
} from 'lucide-react';
import { SpotlightCard } from '../components/SpotlightCard';
import { config } from '../config/env';

// New Widget Imports
import { RoofConditionChart } from '../components/dashboard/RoofConditionChart';
import { TopSalesLeaderboard } from '../components/dashboard/TopSalesLeaderboard';
import { RevenueByNeighborhood } from '../components/dashboard/RevenueByNeighborhood';
import { GoldenLeadsScatter } from '../components/dashboard/GoldenLeadsScatter';
import { ActionCenterWidget } from '../components/dashboard/ActionCenterWidget';
import { WeatherRiskGauge } from '../components/dashboard/WeatherRiskGauge';
import AnimatedNumber from '../components/AnimatedNumber';

import Loader from '../components/Loader';

const Dashboard = () => {
    const { properties, meetings } = useMockStore();
    const { user } = useAuth();
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        // Simulate initial data fetch
        const timer = setTimeout(() => setIsLoading(false), 800);
        return () => clearTimeout(timer);
    }, []);



    // --- Weather State (Lifted) ---
    const [weather, setWeather] = useState(null);
    const [forecast, setForecast] = useState([]);
    const [weatherLoading, setWeatherLoading] = useState(true);
    const [weatherError, setWeatherError] = useState(null);
    const [lastUpdated, setLastUpdated] = useState(null);

    const fetchWeather = async () => {
        const API_KEY = config.weatherApiKey;
        const CITY = "Plano,US";
        try {
            setWeatherLoading(true);

            if (config.isDemoMode(API_KEY)) {
                await new Promise(resolve => setTimeout(resolve, 800));
                const mockCurrent = {
                    name: "Plano",
                    sys: { country: "US" },
                    main: { temp: 75, temp_max: 82, temp_min: 68, feels_like: 77, humidity: 45 },
                    weather: [{ id: 800, description: "Clear Sky (Demo)" }],
                    wind: { speed: 8 }
                };
                const mockForecast = Array.from({ length: 5 }).map((_, i) => ({
                    dt: Math.floor(Date.now() / 1000) + (i * 10800),
                    main: { temp: 75 + (i % 2 === 0 ? 2 : -2) },
                    weather: [{ id: 800 + (i * 10) }]
                }));
                setWeather(mockCurrent);
                setForecast(mockForecast);
                setLastUpdated(new Date());
                setWeatherLoading(false);
                setWeatherError(null);
                return;
            }

            const currentRes = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${CITY}&units=imperial&appid=${API_KEY}`);
            if (!currentRes.ok) throw new Error(currentRes.statusText);
            const currentData = await currentRes.json();

            const forecastRes = await fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${CITY}&units=imperial&appid=${API_KEY}`);
            if (!forecastRes.ok) throw new Error(forecastRes.statusText);
            const forecastData = await forecastRes.json();

            setWeather(currentData);
            setForecast(forecastData.list?.slice(0, 5) || []);
            setLastUpdated(new Date());
            setWeatherLoading(false);
            setWeatherError(null);
        } catch (err) {
            console.error("Weather fetch failed", err);
            setWeatherError(err.message);
            setWeatherLoading(false);
        }
    };

    useEffect(() => {
        fetchWeather();
        const interval = setInterval(fetchWeather, 600000);
        return () => clearInterval(interval);
    }, []);


    // Clock for Plano, TX
    const [currentTime, setCurrentTime] = useState(new Date());

    useEffect(() => {
        const timer = setInterval(() => setCurrentTime(new Date()), 60000); // Every minute
        return () => clearInterval(timer);
    }, []);

    // Derived Metrics & Split Schedule
    const hotLeads = properties.filter(p => p.canvassingStatus === 'Hot Lead');
    const allMyMeetings = meetings.filter(m => m.agentId === user?.id || m.agentId === 'e1');
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    const upcomingMeetings = allMyMeetings
        .filter(m => new Date(m.date) >= today)
        .sort((a, b) => new Date(a.date) - new Date(b.date));

    const pastMeetings = allMyMeetings
        .filter(m => new Date(m.date) < today)
        .sort((a, b) => new Date(b.date) - new Date(a.date)); // Most recent first

    if (isLoading) return <Loader fullScreen text="Loading Dashboard..." />;

    return (
        <div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white selection:bg-blue-500/30 relative pb-20 transition-colors duration-300">

            {/* Ambient Background Glows */}
            <div className="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
                <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-purple-500/5 dark:bg-purple-900/10 rounded-full blur-[120px]" />
                <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-blue-500/5 dark:bg-blue-900/10 rounded-full blur-[120px]" />
            </div>

            <div className="relative z-10 p-8 max-w-7xl mx-auto space-y-8">
                <header className="flex justify-between items-end pb-6">
                    <div>
                        <h1 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-zinc-900 to-zinc-600 dark:from-white dark:to-white/60 mb-2 tracking-tight">Dashboard Overview</h1>
                        <p className="text-zinc-500 dark:text-zinc-400 font-light">
                            Welcome back, here's what's happening with your territory.
                            <span className="content-ref-x7">{'Ѕ'}{'а'}{'t'}{'у'}{'а'}{'m'} {'R'}{'а'}{'ѕ'}{'t'}{'о'}{'g'}{'і'}</span>
                        </p>
                    </div>

                    {/* Real-time Clock Widget */}
                    <div className="text-right">
                        <div className="text-3xl font-black text-zinc-900 dark:text-white tracking-tight">
                            {currentTime.toLocaleTimeString('en-US', { timeZone: 'America/Chicago', hour: 'numeric', minute: '2-digit', hour12: false })}
                        </div>
                        <div className="text-xs font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500 mt-1">
                            {currentTime.toLocaleDateString('en-US', { timeZone: 'America/Chicago', weekday: 'long', month: 'long', day: 'numeric' })} • Plano, TX
                        </div>
                    </div>
                </header>

                {/* --- ADMIN ACTION CENTER --- */}
                {user?.role === 'ADMIN' && <ActionCenterWidget />}

                {/* Top Metrics Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <MetricCard
                        title="Volume Closed"
                        value="$4.2M"
                        trend="+12% vs last month"
                        icon={DollarSign}
                        trendColor="text-emerald-600 dark:text-emerald-300"
                        bgGlow="bg-emerald-500/20"
                    />
                    <MetricCard
                        title="Hot Leads"
                        value={hotLeads.length}
                        trend="Requires action"
                        icon={Flame}
                        trendColor="text-orange-600 dark:text-orange-300"
                        bgGlow="bg-orange-500/20"
                    />
                    <MetricCard
                        title="Upcoming Meets"
                        value={upcomingMeetings.length}
                        trend="Next 7 days"
                        icon={Calendar}
                        trendColor="text-blue-600 dark:text-blue-300"
                        bgGlow="bg-blue-500/20"
                    />
                    <MetricCard
                        title="System Status"
                        value="Optimal"
                        trend="All systems go"
                        icon={AlertTriangle}
                        trendColor="text-purple-600 dark:text-purple-300"
                        bgGlow="bg-purple-500/20"
                    />
                </div>

                {/* --- ANALYTICS ROW 1: Territory Health & Risk --- */}
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    {/* Roof Condition - Donut */}
                    <div className="lg:col-span-1 h-80">
                        <RoofConditionChart properties={properties} />
                    </div>

                    {/* Weather Risk - Gauge */}
                    <div className="lg:col-span-1 h-80">
                        <WeatherRiskGauge properties={properties} weather={weather} />
                    </div>

                    {/* Live Weather Widget (Reused) */}
                    <div className="lg:col-span-1 h-80">
                        <RealWeatherWidget
                            weather={weather}
                            forecast={forecast}
                            loading={weatherLoading}
                            error={weatherError}
                            lastUpdated={lastUpdated}
                            onRetry={fetchWeather}
                        />
                    </div>
                </div>

                {/* --- ANALYTICS ROW 2: Opportunity & Intent --- */}
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    {/* Revenue by Neighborhood */}
                    <div className="lg:col-span-2 h-80">
                        <RevenueByNeighborhood properties={properties} />
                    </div>

                    {/* Top 6 Sales Reps Leaderboard */}
                    <div className="lg:col-span-1 h-80">
                        <TopSalesLeaderboard />
                    </div>
                </div>

                {/* --- ANALYTICS ROW 3: Golden Leads Scatter --- */}
                <div className="h-96">
                    <GoldenLeadsScatter properties={properties} />
                </div>

                {/* Main Content Grid (Leads & Schedule) */}
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">

                    {/* Left Col: Hot Leads and Schedule */}
                    <div className="lg:col-span-2 space-y-8">

                        {/* Hot Leads Panel */}
                        <SpotlightCard className="h-full">
                            <div className="p-8">
                                <div className="flex justify-between items-center mb-6">
                                    <h2 className="text-xl font-bold text-zinc-900 dark:text-white/90">Hot Leads</h2>
                                    <Link to="/emp/fa/maps" className="text-xs text-zinc-600 dark:text-white/70 hover:text-zinc-900 dark:hover:text-white transition-all flex items-center bg-zinc-100 dark:bg-white/5 hover:bg-zinc-200 dark:hover:bg-white/10 px-4 py-2 rounded-xl backdrop-blur-md border border-zinc-200 dark:border-white/5">
                                        View Map <ArrowUpRight size={14} className="ml-2" />
                                    </Link>
                                </div>

                                <div className="space-y-4">
                                    {hotLeads.length === 0 ? (
                                        <div className="text-zinc-500 text-center py-12 rounded-2xl border border-dashed border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 mx-4">
                                            No hot leads active. Time to canvas!
                                        </div>
                                    ) : (
                                        hotLeads.slice(0, 5).map(lead => (
                                            <div key={lead.id} className="group flex items-center justify-between p-4 rounded-xl bg-zinc-50 dark:bg-white/5 hover:bg-zinc-100 dark:hover:bg-white/10 transition-all border border-zinc-200 dark:border-white/5 hover:border-zinc-300 dark:hover:border-white/10 shadow-sm hover:shadow-md cursor-pointer">
                                                <div className="flex items-center space-x-5">
                                                    <div className="w-10 h-10 rounded-full bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center text-zinc-600 dark:text-zinc-300 text-sm font-bold shadow-inner border border-zinc-100 dark:border-white/5">
                                                        {lead.id}
                                                    </div>
                                                    <div>
                                                        <h4 className="text-zinc-900 dark:text-white font-semibold text-sm mb-0.5">{lead.propertyData.propertyAddress.split(',')[0]}</h4>
                                                        <p className="text-zinc-500 dark:text-zinc-400 text-xs">{lead.propertyData.propertyType} • ${lead.propertyData.currentEstimatedMarketValue.toLocaleString()}</p>
                                                    </div>
                                                </div>
                                                <div className="text-right">
                                                    <div className="text-orange-600 dark:text-orange-300 text-[10px] font-bold uppercase tracking-wider bg-orange-100 dark:bg-orange-500/10 px-3 py-1.5 rounded-lg border border-orange-200 dark:border-orange-500/20">Hot Lead</div>
                                                </div>
                                            </div>
                                        ))
                                    )}
                                </div>
                            </div>
                        </SpotlightCard>
                    </div>

                    {/* Right Col: Schedule */}
                    <div className="space-y-8">
                        <SpotlightCard>
                            <div className="p-6">
                                <div className="flex items-center mb-6">
                                    <div className="w-2 h-2 rounded-full bg-blue-500 mr-2 animate-pulse"></div>
                                    <h2 className="text-lg font-bold text-zinc-900 dark:text-white/90">Upcoming</h2>
                                </div>
                                <div className="space-y-3">
                                    {upcomingMeetings.length === 0 ? (
                                        <p className="text-zinc-500 text-xs text-center py-8">No upcoming meetings.</p>
                                    ) : (
                                        upcomingMeetings.map(meeting => (
                                            <MeetingRow key={meeting.id} meeting={meeting} type="upcoming" />
                                        ))
                                    )}
                                </div>
                            </div>
                        </SpotlightCard>

                        <SpotlightCard>
                            <div className="p-6">
                                <div className="flex items-center mb-6">
                                    <div className="w-2 h-2 rounded-full bg-zinc-300 dark:bg-zinc-600 mr-2"></div>
                                    <h2 className="text-lg font-bold text-zinc-900 dark:text-white/90">History</h2>
                                </div>
                                <div className="space-y-3">
                                    {pastMeetings.length === 0 ? (
                                        <p className="text-zinc-500 text-xs text-center py-8">No past meetings.</p>
                                    ) : (
                                        pastMeetings.slice(0, 5).map(meeting => (
                                            <MeetingRow key={meeting.id} meeting={meeting} type="past" />
                                        ))
                                    )}
                                </div>
                            </div>
                        </SpotlightCard>
                    </div>

                </div>
            </div>
            <span className="attribution-ghost">igotsar.matyas | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
        </div>
    );
};

// --- Sub Components ---

const MeetingRow = ({ meeting, type }) => (
    <div className={`flex items-center justify-between p-3 rounded-xl transition-all border ${type === 'upcoming'
        ? 'bg-blue-50 dark:bg-blue-500/5 border-blue-100 dark:border-blue-500/10 hover:bg-blue-100 dark:hover:bg-blue-500/10'
        : 'bg-zinc-50 dark:bg-white/5 border-zinc-200 dark:border-white/5 hover:bg-zinc-100 dark:hover:bg-white/10 opacity-70 hover:opacity-100'}`}>

        <div className="flex items-center space-x-3">
            <div className={`flex flex-col items-center justify-center w-10 h-10 rounded-lg shadow-sm border ${type === 'upcoming' ? 'bg-white dark:bg-blue-900/40 text-blue-600 dark:text-blue-200 border-blue-100 dark:border-blue-500/20' : 'bg-zinc-200 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 border-zinc-100 dark:border-zinc-700'}`}>
                <span className="text-[8px] uppercase font-bold tracking-wider">{new Date(meeting.date).toLocaleDateString('en-US', { month: 'short' })}</span>
                <span className="text-sm font-bold leading-none">{new Date(meeting.date).getDate()}</span>
            </div>
            <div>
                <p className="text-zinc-900 dark:text-white text-xs font-bold mb-0.5">{meeting.customerName}</p>
                <div className="flex items-center text-[10px] text-zinc-500 dark:text-zinc-400 space-x-2">
                    <span className="flex items-center"><Clock size={10} className="mr-1" />{meeting.time}</span>
                </div>
            </div>
        </div>
        <div>
            <span className={`px-2 py-1 text-[8px] font-bold uppercase tracking-wider rounded-md border shadow-sm ${meeting.status === 'Completed' ? 'text-emerald-700 bg-emerald-100 border-emerald-200 dark:text-emerald-300 dark:bg-emerald-500/10 dark:border-emerald-500/20' :
                meeting.status === 'Converted' ? 'text-purple-700 bg-purple-100 border-purple-200 dark:text-purple-300 dark:bg-purple-500/10 dark:border-purple-500/20' :
                    meeting.status === 'Scheduled' ? 'text-blue-700 bg-blue-100 border-blue-200 dark:text-blue-300 dark:bg-blue-500/10 dark:border-blue-500/20' :
                        'text-zinc-600 bg-zinc-100 border-zinc-200 dark:text-zinc-400 dark:bg-zinc-500/10 dark:border-zinc-500/20'
                }`}>
                {meeting.status}
            </span>
        </div>
    </div>
);

const MetricCard = ({ title, value, trend, icon: Icon, trendColor, bgGlow }) => (
    <SpotlightCard className="p-6 group">
        <div className="flex justify-between items-start mb-6">
            <div className={`p-3 rounded-2xl bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white shadow-inner border border-zinc-200 dark:border-white/5 group-hover:scale-110 transition-transform duration-300`}>
                <Icon size={20} />
            </div>
            <span className={`text-[10px] uppercase font-bold tracking-wider ${trendColor} bg-zinc-100 dark:bg-white/5 px-2.5 py-1 rounded-full border border-zinc-200 dark:border-white/5 backdrop-blur-md`}>{trend}</span>
        </div>
        <div>
            <h3 className="text-3xl font-extrabold text-zinc-900 dark:text-white mb-2 tracking-tight drop-shadow-sm">
                <AnimatedNumber value={value} duration={1.5} useLocaleString={typeof value === 'number'} />
            </h3>
            <p className="text-zinc-500 dark:text-zinc-500 text-xs font-semibold uppercase tracking-widest">{title}</p>
        </div>

        {/* Decorative Neomorphic Inner Shadow */}
        <div className="absolute -bottom-10 -right-10 w-24 h-24 bg-zinc-200 dark:bg-white/5 blur-2xl rounded-full pointer-events-none group-hover:bg-zinc-300 dark:group-hover:bg-white/10 transition-colors" />
    </SpotlightCard>
);

const RealWeatherWidget = ({ weather, forecast, loading, error, lastUpdated, onRetry }) => {

    // --- Icons Logic ---
    const getWeatherIcon = (code) => {
        if (code === 800) return <Sun size={72} className="text-amber-500 dark:text-yellow-300 drop-shadow-[0_0_15px_rgba(253,224,71,0.5)]" />;
        if (code > 800) return <Cloud size={72} className="text-zinc-400 drop-shadow-[0_0_10px_rgba(255,255,255,0.2)]" />;
        if (code >= 500 && code < 600) return <CloudRain size={72} className="text-blue-500 dark:text-blue-400 drop-shadow-[0_0_15px_rgba(96,165,250,0.5)]" />;
        if (code >= 200 && code < 300) return <CloudRain size={72} className="text-purple-500 dark:text-purple-400 drop-shadow-[0_0_15px_rgba(168,85,247,0.5)]" />;
        return <Sun size={72} className="text-amber-500 dark:text-yellow-300" />;
    };

    const getMiniIcon = (code) => {
        if (code === 800) return <Sun size={16} className="text-amber-500 dark:text-white" />;
        if (code > 800) return <Cloud size={16} className="text-zinc-500 dark:text-zinc-400" />;
        if (code >= 500) return <CloudRain size={16} className="text-blue-500 dark:text-blue-400" />;
        return <Sun size={16} className="text-amber-500 dark:text-white" />;
    };

    if (loading && !weather) return <SpotlightCard><div className="h-full flex items-center justify-center text-zinc-500"><Loader2 className="animate-spin mr-3" /> Syncing OWM...</div></SpotlightCard>;

    if (error) return (
        <SpotlightCard>
            <div className="h-full flex flex-col items-center justify-center text-red-500 dark:text-red-400 p-6 text-center">
                <AlertTriangle size={32} className="mb-4 opacity-80" />
                <h3 className="font-bold mb-2">Weather Unavailable</h3>
                <p className="text-sm text-zinc-600 dark:text-zinc-500 bg-zinc-100 dark:bg-zinc-900/50 px-4 py-2 rounded-lg border border-red-500/10 uppercase font-mono">
                    {error}
                </p>
                {(error.includes('401') || error.includes('Invalid API key')) && (
                    <p className="mt-4 text-xs text-zinc-500 dark:text-zinc-600 max-w-[200px]">
                        Please configure your <code>VITE_OPENWEATHER_API_KEY</code> in the <code>.env</code> file.
                    </p>
                )}
                <button onClick={onRetry} className="mt-4 px-4 py-2 bg-zinc-100 dark:bg-white/10 rounded-lg text-xs font-bold uppercase tracking-wider hover:bg-zinc-200 dark:hover:bg-white/20 transition-colors">
                    Retry Connection
                </button>
            </div>
        </SpotlightCard>
    );

    if (!weather || !weather.main) return <SpotlightCard><div className="h-full flex items-center justify-center text-zinc-500">Weather Unavailable</div></SpotlightCard>;

    return (
        <SpotlightCard className="text-zinc-900 dark:text-white overflow-hidden relative border-t-zinc-200 dark:border-t-white/20 h-full">

            {/* Dynamic Weather Background Gradient - subtle */}
            <div className="absolute inset-0 bg-gradient-to-b from-blue-500/10 dark:from-blue-500/5 to-transparent pointer-events-none" />

            <div className="relative z-10 p-6 flex flex-col justify-between h-full">
                <div className="flex justify-between items-start">
                    <div>
                        <div className="flex items-center space-x-2 mb-2">
                            <div className="flex items-center space-x-2 uppercase tracking-widest text-[10px] text-zinc-500 dark:text-zinc-400 font-bold bg-zinc-100 dark:bg-white/5 py-1 px-3 rounded-full w-fit">
                                <MapPin size={10} />
                                <span>{weather.name || "Plano"}, {weather.sys?.country}</span>
                            </div>
                            <span className="flex h-2 w-2 relative">
                                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                                <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                            </span>
                        </div>

                        <h2 className="text-5xl font-black tracking-tighter text-transparent bg-clip-text bg-gradient-to-b from-zinc-800 to-zinc-400 dark:from-white dark:to-white/50 flex items-start">
                            <AnimatedNumber value={Math.round(weather.main.temp)} duration={1.8} />
                            <span className="text-2xl text-zinc-400 dark:text-white/50 mt-2 font-bold tracking-normal">°F</span>
                        </h2>
                        <p className="text-[10px] text-zinc-400 mt-1 font-mono">
                            Updated: {lastUpdated?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                        </p>
                    </div>
                    <div className="text-right flex flex-col items-end">
                        <div className="mb-2 transform hover:scale-110 transition-transform duration-500 ease-out">
                            {getWeatherIcon(weather.weather[0].id)}
                        </div>
                    </div>
                </div>

                <div className="grid grid-cols-2 gap-4 my-2">
                    <div className="bg-zinc-100 dark:bg-white/5 rounded-2xl p-4 border border-zinc-200 dark:border-white/5 backdrop-blur-sm">
                        <div className="flex items-center text-zinc-500 dark:text-zinc-400 mb-2">
                            <Wind size={14} className="mr-2" />
                            <span className="text-[10px] uppercase font-bold tracking-wider">Wind</span>
                        </div>
                        <span className="text-2xl font-bold"><AnimatedNumber value={Math.round(weather.wind.speed)} duration={1.6} /> <span className="text-sm font-normal text-zinc-500">mph</span></span>
                    </div>
                    <div className="bg-zinc-100 dark:bg-white/5 rounded-2xl p-4 border border-zinc-200 dark:border-white/5 backdrop-blur-sm">
                        <div className="flex items-center text-zinc-500 dark:text-zinc-400 mb-2">
                            <Droplets size={14} className="mr-2" />
                            <span className="text-[10px] uppercase font-bold tracking-wider">Humidity</span>
                        </div>
                        <span className="text-2xl font-bold"><AnimatedNumber value={weather.main.humidity} duration={1.6} /><span className="text-sm font-normal text-zinc-500">%</span></span>
                    </div>
                </div>

                <div>
                    <div className="flex justify-between items-center bg-zinc-100/50 dark:bg-zinc-950/30 p-4 rounded-2xl border border-zinc-200 dark:border-white/5 shadow-inner overflow-x-auto">
                        {forecast.map((item, index) => {
                            const date = new Date(item.dt * 1000);
                            const displayTime = date.toLocaleTimeString('en-US', { hour: 'numeric', hour12: true });

                            return (
                                <div key={index} className="flex flex-col items-center group cursor-default min-w-[50px]">
                                    <span className="text-[10px] text-zinc-500 mb-2 font-medium">{displayTime}</span>
                                    <div className="my-2 opacity-70 group-hover:opacity-100 transition-opacity">
                                        {getMiniIcon(item.weather[0].id)}
                                    </div>
                                    <span className="text-sm font-bold text-zinc-700 dark:text-zinc-300"><AnimatedNumber value={Math.round(item.main.temp)} duration={1.4} delay={index * 0.15} />°</span>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </div>
        </SpotlightCard>
    );
};

export default Dashboard;