import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { 
  type TimeEntry, 
  type TimeSpentSummary 
} from '@emberclone/shared';

interface TimeSpentSummaryProps {
  dailyTargetHours?: number;
}

const TimeSpentSummary: React.FC<TimeSpentSummaryProps> = ({ dailyTargetHours = 8 }) => {
  const { data, isLoading, error } = useQuery<TimeSpentSummary>({
    queryKey: ['time-spent-summary'],
    queryFn: async () => {
      const res = await fetch('/api/time/summary');
      if (!res.ok) throw new Error('Failed to fetch summary');
      return res.json();
    },
  });

  if (isLoading) return <div className="w-64 p-4 text-sm text-gray-500 animate-pulse">Loading summary...</div>;
  if (error) return <div className="w-64 p-4 text-sm text-red-500">Error loading summary</div>;

  const periods = [
    { label: 'Today', value: data?.today || 0, key: 'today' },
    { label: 'This Week', value: data?.week || 0, key: 'week' },
    { label: 'This Month', value: data?.month || 0, key: 'month' },
  ];

  const formatHours = (decimalHours: number) => {
    const h = Math.floor(decimalHours);
    const m = Math.round((decimalHours - h) * 60);
    return `${h}h ${m}m`;
  };

  return (
    <div className="w-64 p-4 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-sm">
      <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-4">Time Spent</h3>
      <div className="space-y-4">
        {periods.map((period) => {
          // For "Today", we compare against dailyTarget. For others, we just show the value.
          const isToday = period.key === 'today';
          const percentage = isToday 
            ? Math.min((period.value / dailyTargetHours) * 100, 100) 
            : 0;

          return (
            <div key={period.key} className="space-y-1.5">
              <div className="flex justify-between text-xs">
                <span className="text-slate-500 dark:text-slate-400">{period.label}</span>
                <span className="font-medium text-slate-700 dark:text-slate-300">{formatHours(period.value)}</span>
              </div>
              {isToday && (
                <div className="h-1.5 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
                  <div 
                    className="h-full bg-indigo-500 transition-all duration-500 ease-out" 
                    style={{ width: `${percentage}%` }}
                  />
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default TimeSpentSummary;