import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend, BarChart, Bar, XAxis, YAxis, CartesianGrid } from 'recharts';
import { Loader2, Clock, CalendarDays } from 'lucide-react';

interface TimeDistribution {
    labelId: string | null;
    labelName: string | null;
    labelColor: string | null;
    timeSpent: number; // minutes
}

export default function TimeTrackingPage() {
    const { t } = useTranslation();
    const [period, setPeriod] = useState<'day' | 'week' | 'month' | 'year'>('day');

    const { data: distribution, isLoading } = useQuery<TimeDistribution[]>({
        queryKey: ['/api/analytics/time-distribution', period],
        queryFn: async () => {
            const res = await fetch(`/api/analytics/time-distribution?period=${period}`);
            if (!res.ok) throw new Error('Failed to fetch data');
            return res.json();
        }
    });

    // Calculate total time
    const totalMinutes = distribution?.reduce((acc, curr) => acc + curr.timeSpent, 0) || 0;
    const hours = Math.floor(totalMinutes / 60);
    const minutes = totalMinutes % 60;

    const formatTime = (totalMins: number) => {
        const h = Math.floor(totalMins / 60);
        const m = totalMins % 60;
        return `${h}h ${m}m`;
    };

    const hasData = totalMinutes > 0;

    return (
        <div className="container mx-auto p-4 md:p-8 space-y-8 max-w-7xl">
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
                        {t('analytics.timeTracking')}
                    </h1>
                    <p className="text-muted-foreground mt-1">
                        {t('analytics.timeDistribution')}
                    </p>
                </div>
                <Tabs value={period} onValueChange={(v) => setPeriod(v as any)} className="w-[400px]">
                    <TabsList className="grid w-full grid-cols-4">
                        <TabsTrigger value="day">{t('analytics.period.day')}</TabsTrigger>
                        <TabsTrigger value="week">{t('analytics.period.week')}</TabsTrigger>
                        <TabsTrigger value="month">{t('analytics.period.month')}</TabsTrigger>
                        <TabsTrigger value="year">{t('analytics.period.year')}</TabsTrigger>
                    </TabsList>
                </Tabs>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
                {/* Main Stats Card */}
                <Card className="col-span-2">
                    <CardHeader>
                        <CardTitle className="text-sm font-medium text-muted-foreground">
                            {t('analytics.totalTime')}
                        </CardTitle>
                        <CardDescription className="text-4xl font-bold flex items-center gap-2">
                            <Clock className="w-8 h-8 text-indigo-500" />
                            {hours}h <span className="text-xl text-muted-foreground">{minutes}m</span>
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="text-xs text-muted-foreground">
                            {period === 'day' && "Today's activity"}
                            {period === 'week' && "This week's activity"}
                            {period === 'month' && "This month's activity"}
                            {period === 'year' && "This year's activity"}
                        </div>
                    </CardContent>
                </Card>

                {/* Chart Card */}
                <Card className="col-span-2 lg:col-span-5">
                    <CardHeader>
                        <CardTitle>{t('analytics.timeDistribution')}</CardTitle>
                    </CardHeader>
                    <CardContent className="h-[350px]">
                        {isLoading ? (
                            <div className="h-full flex items-center justify-center">
                                <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
                            </div>
                        ) : !hasData ? (
                            <div className="h-full flex flex-col items-center justify-center text-muted-foreground">
                                <CalendarDays className="w-12 h-12 mb-2 opacity-20" />
                                <p>{t('analytics.noData')}</p>
                            </div>
                        ) : (
                            <ResponsiveContainer width="100%" height="100%">
                                <PieChart>
                                    <Pie
                                        data={distribution}
                                        dataKey="timeSpent"
                                        nameKey="labelName"
                                        cx="50%"
                                        cy="50%"
                                        innerRadius={60}
                                        outerRadius={100}
                                        paddingAngle={5}
                                    >
                                        {distribution?.map((entry, index) => (
                                            <Cell key={`cell-${index}`} fill={entry.labelColor || '#808080'} stroke="none" />
                                        ))}
                                    </Pie>
                                    <Tooltip
                                        formatter={(value: number) => formatTime(value)}
                                        contentStyle={{ backgroundColor: 'rgba(255, 255, 255, 0.95)', borderRadius: '8px', border: 'none', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
                                    />
                                    <Legend verticalAlign="middle" align="right" layout="vertical" iconType="circle" />
                                </PieChart>
                            </ResponsiveContainer>
                        )}
                    </CardContent>
                </Card>
            </div>

            {/* Detailed Table */}
            <Card>
                <CardHeader>
                    <CardTitle>{t('analytics.title')}</CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="space-y-4">
                        {distribution?.sort((a, b) => b.timeSpent - a.timeSpent).map((item) => (
                            <div key={item.labelId || 'unknown'} className="flex items-center justify-between p-3 rounded-lg hover:bg-muted/50 transition-colors">
                                <div className="flex items-center gap-3">
                                    <div
                                        className="w-4 h-4 rounded-full"
                                        style={{ backgroundColor: item.labelColor || '#808080' }}
                                    />
                                    <span className="font-medium">{item.labelName || 'No Label'}</span>
                                </div>
                                <div className="flex items-center gap-4">
                                    <div className="w-32 h-2 bg-muted rounded-full overflow-hidden">
                                        <div
                                            className="h-full rounded-full"
                                            style={{
                                                width: `${(item.timeSpent / totalMinutes) * 100}%`,
                                                backgroundColor: item.labelColor || '#808080'
                                            }}
                                        />
                                    </div>
                                    <span className="text-sm font-bold w-16 text-right">
                                        {formatTime(item.timeSpent)}
                                    </span>
                                </div>
                            </div>
                        ))}
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}
