import { differenceInCalendarDays, format } from 'date-fns';
import { useNavigate } from 'react-router-dom';
import { Star } from 'lucide-react';

interface CountdownWidgetProps {
  events: Array<{
    id: number;
    title: string;
    start_datetime: string;
  }>;
}

export default function CountdownWidget({ events }: CountdownWidgetProps) {
  const navigate = useNavigate();
  const visible = events.filter((e) => differenceInCalendarDays(new Date(e.start_datetime), new Date()) >= 0);
  if (visible.length === 0) return null;

  return (
    <div className="rounded-lg bg-amber-500/[0.07] border border-amber-500/10 px-3.5 py-2 space-y-1">
      {visible.map((event) => {
        const days = differenceInCalendarDays(new Date(event.start_datetime), new Date());
        const label = days === 0 ? 'Today' : days === 1 ? '1 day' : `${days} days`;
        const dateStr = format(new Date(event.start_datetime), 'yyyy-MM-dd');
        return (
          <div
            key={event.id}
            onClick={() => navigate('/calendar', { state: { date: dateStr, view: 'timeGridDay', eventId: event.id } })}
            className="flex items-center gap-2 cursor-pointer hover:bg-amber-500/10 rounded px-1 -mx-1 transition-colors duration-150"
          >
            <Star className="h-3 w-3 text-amber-400 fill-amber-400 shrink-0" />
            <span className="text-sm text-amber-200/90 truncate">
              <span className="font-semibold tabular-nums">{label}</span>
              {days > 0 ? ' until ' : ' — '}
              <span className="font-medium text-foreground">{event.title}</span>
            </span>
          </div>
        );
      })}
    </div>
  );
}