'use client';

import { useRouter } from 'next/navigation';
import { ArrowLeft, BarChart3 } from 'lucide-react';
import StatsDashboard from '@/components/StatsDashboard';
import { useI18n } from '@/i18n/I18nContext';
import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';

export default function StatsPage() {
    const router = useRouter();
    const { t } = useI18n();
    const [bottles, setBottles] = useState<any[]>([]);
    const supabase = createClient();

    useEffect(() => {
        const fetchBottles = async () => {
            const { data } = await supabase
                .from('bottles')
                .select('*');
            setBottles(data || []);
        };
        fetchBottles();
    }, []);

    return (
        <main className="min-h-screen bg-zinc-950 p-4 pb-24">
            <div className="max-w-4xl mx-auto">
                {/* Header */}
                <div className="flex items-center gap-4 mb-8">
                    <button
                        onClick={() => router.back()}
                        className="p-2 rounded-xl bg-zinc-900 border border-zinc-800 text-zinc-400 hover:text-white hover:border-zinc-700 transition-colors"
                    >
                        <ArrowLeft size={20} />
                    </button>
                    <div>
                        <h1 className="text-2xl font-bold text-white">
                            {t('home.stats.title')}
                        </h1>
                        <p className="text-sm text-zinc-500">
                            Your collection analytics
                        </p>
                    </div>
                </div>

                {/* Stats Dashboard */}
                <StatsDashboard bottles={bottles} />
            </div>
        </main>
    );
}
