'use client';

import React, { useMemo } from 'react';
import { TrendingUp, CreditCard, Star, Home, BarChart3 } from 'lucide-react';
import { useI18n } from '@/i18n/I18nContext';

interface Bottle {
    id: string;
    purchase_price?: number | null;
    distillery?: string;
    tastings?: { rating: number }[];
}

interface StatsDashboardProps {
    bottles: Bottle[];
}

export default function StatsDashboard({ bottles }: StatsDashboardProps) {
    const { t, locale } = useI18n();
    const stats = useMemo(() => {
        const totalValue = bottles.reduce((sum, b) => sum + (Number(b.purchase_price) || 0), 0);

        const ratings = bottles.flatMap(b => b.tastings?.map(t => t.rating) || []);
        const avgRating = ratings.length > 0
            ? Math.round(ratings.reduce((sum, r) => sum + r, 0) / ratings.length)
            : 0;

        const distilleries = bottles
            .filter(b => b.distillery)
            .reduce((acc, b) => {
                acc[b.distillery!] = (acc[b.distillery!] || 0) + 1;
                return acc;
            }, {} as Record<string, number>);

        const topDistillery = Object.entries(distilleries).sort((a, b) => b[1] - a[1])[0]?.[0] || 'N/A';

        return {
            totalValue,
            avgRating,
            topDistillery,
            totalCount: bottles.length
        };
    }, [bottles]);

    const statItems = [
        {
            label: t('home.stats.totalValue'),
            value: stats.totalValue.toLocaleString(locale === 'de' ? 'de-DE' : 'en-US', { style: 'currency', currency: 'EUR' }),
            icon: CreditCard,
            color: 'text-green-600',
            bg: 'bg-green-50 dark:bg-green-900/20'
        },
        {
            label: t('home.stats.activeBottles'),
            value: stats.totalCount,
            icon: Home,
            color: 'text-blue-600',
            bg: 'bg-blue-50 dark:bg-blue-900/20'
        },
        {
            label: t('home.stats.avgRating'),
            value: `${stats.avgRating}/100`,
            icon: Star,
            color: 'text-orange-600',
            bg: 'bg-orange-900/20'
        },
        {
            label: t('home.stats.topDistillery'),
            value: stats.topDistillery,
            icon: BarChart3,
            color: 'text-purple-600',
            bg: 'bg-purple-50 dark:bg-purple-900/20'
        },
    ];

    return (
        <div className="w-full grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4 h-fit animate-in fade-in slide-in-from-top-4 duration-500 mb-12">
            {statItems.map((item, idx) => {
                const value = idx === 1 ? stats.totalCount : item.value;
                return (
                    <div
                        key={idx}
                        className="flex flex-col gap-1 text-center md:text-left"
                    >
                        <div className="text-4xl md:text-5xl font-bold text-zinc-50 tracking-tighter">
                            {value}
                        </div>
                        <div className="text-[10px] font-bold uppercase text-zinc-500 tracking-[0.2em]">
                            {item.label}
                        </div>
                    </div>
                );
            })}
        </div>
    );
}
