UMBRA/frontend/src/components/dashboard/DashboardPage.tsx

import { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { format } from 'date-fns';
import { Bell, Plus, Calendar as CalIcon, ListTodo } from 'lucide-react';
import api from '@/lib/api';
import type { DashboardData, UpcomingResponse, WeatherData } from '@/types';
import { useSettings } from '@/hooks/useSettings';
import { useAlerts } from '@/hooks/useAlerts';
import StatsWidget from './StatsWidget';
import TodoWidget from './TodoWidget';
import CalendarWidget from './CalendarWidget';
import UpcomingWidget from './UpcomingWidget';
import WeekTimeline from './WeekTimeline';
import DayBriefing from './DayBriefing';
import CountdownWidget from './CountdownWidget';
import TrackedProjectsWidget from './TrackedProjectsWidget';
import AlertBanner from './AlertBanner';
import EventForm from '../calendar/EventForm';
import TodoForm from '../todos/TodoForm';
import ReminderForm from '../reminders/ReminderForm';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { DashboardSkeleton } from '@/components/ui/skeleton';

function getGreeting(name?: string): string {
  const hour = new Date().getHours();
  const suffix = name ? `, ${name}.` : '.';
  if (hour < 5) return `Good night${suffix}`;
  if (hour < 12) return `Good morning${suffix}`;
  if (hour < 17) return `Good afternoon${suffix}`;
  if (hour < 21) return `Good evening${suffix}`;
  return `Good night${suffix}`;
}

export default function DashboardPage() {
  const navigate = useNavigate();
  const { settings } = useSettings();
  const { alerts, dismiss: dismissAlert, snooze: snoozeAlert } = useAlerts();
  const [quickAddType, setQuickAddType] = useState<'event' | 'todo' | 'reminder' | null>(null);
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setDropdownOpen(false);
      }
    }
    if (dropdownOpen) document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [dropdownOpen]);

  const { data, isLoading } = useQuery({
    queryKey: ['dashboard'],
    queryFn: async () => {
      const now = new Date();
      const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
      const { data } = await api.get<DashboardData>(`/dashboard?client_date=${today}`);
      return data;
    },
  });

  const { data: upcomingData } = useQuery({
    queryKey: ['upcoming', settings?.upcoming_days],
    queryFn: async () => {
      const days = settings?.upcoming_days || 7;
      const now = new Date();
      const clientDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
      const { data } = await api.get<UpcomingResponse>(`/upcoming?days=${days}&client_date=${clientDate}`);
      return data;
    },
  });

  const { data: weatherData } = useQuery<WeatherData>({
    queryKey: ['weather'],
    queryFn: async () => {
      const { data } = await api.get<WeatherData>('/weather');
      return data;
    },
    staleTime: 30 * 60 * 1000,
    retry: false,
    enabled: !!(settings?.weather_city || (settings?.weather_lat != null && settings?.weather_lon != null)),
  });

  if (isLoading) {
    return (
      <div className="flex flex-col h-full">
        <div className="px-4 md:px-6 py-6">
          <div className="animate-pulse space-y-2">
            <div className="h-8 w-48 rounded bg-muted" />
            <div className="h-4 w-32 rounded bg-muted" />
          </div>
        </div>
        <div className="flex-1 overflow-y-auto px-4 md:px-6 pb-6">
          <DashboardSkeleton />
        </div>
      </div>
    );
  }

  if (!data) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-muted-foreground">Failed to load dashboard</div>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full">
      {/* Header — greeting + date + quick add */}
      <div className="px-4 md:px-6 pt-4 sm:pt-6 pb-1 sm:pb-2 flex items-center justify-between">
        <div>
          <h1 className="font-heading text-3xl font-bold tracking-tight animate-fade-in">
            {getGreeting(settings?.preferred_name || undefined)}
          </h1>
          <p className="text-muted-foreground text-sm mt-1">
            {format(new Date(), 'EEEE, MMMM d, yyyy')}
          </p>
        </div>
        <div className="relative" ref={dropdownRef}>
          <Button
            variant="outline"
            size="icon"
            onClick={() => setDropdownOpen(!dropdownOpen)}
            className="h-9 w-9"
          >
            <Plus className="h-4 w-4" />
          </Button>
          {dropdownOpen && (
            <div className="absolute right-0 top-full mt-1.5 w-44 rounded-lg border bg-popover shadow-xl z-50 py-1 animate-fade-in">
              <button
                className="flex items-center gap-2.5 w-full px-3 py-2 text-sm hover:bg-card-elevated transition-colors"
                onClick={() => { setQuickAddType('event'); setDropdownOpen(false); }}
              >
                <CalIcon className="h-4 w-4 text-purple-400" />
                Event
              </button>
              <button
                className="flex items-center gap-2.5 w-full px-3 py-2 text-sm hover:bg-card-elevated transition-colors"
                onClick={() => { setQuickAddType('todo'); setDropdownOpen(false); }}
              >
                <ListTodo className="h-4 w-4 text-blue-400" />
                Todo
              </button>
              <button
                className="flex items-center gap-2.5 w-full px-3 py-2 text-sm hover:bg-card-elevated transition-colors"
                onClick={() => { setQuickAddType('reminder'); setDropdownOpen(false); }}
              >
                <Bell className="h-4 w-4 text-orange-400" />
                Reminder
              </button>
            </div>
          )}
        </div>
      </div>

      <div className="flex-1 overflow-y-auto px-4 md:px-6 pb-6">
        <div className="space-y-3 sm:space-y-5">
          {/* Week Timeline */}
          {upcomingData && (
            <div className="animate-slide-up">
              <WeekTimeline items={upcomingData.items} />
            </div>
          )}

          {/* Smart Briefing */}
          {upcomingData && (
            <DayBriefing
              upcomingItems={upcomingData.items}
              dashboardData={data}
              weatherData={weatherData || null}
            />
          )}

          {/* Stats Row */}
          <div className="animate-slide-up" style={{ animationDelay: '50ms', animationFillMode: 'backwards' }}>
            <StatsWidget
              projectStats={data.project_stats}
              totalIncompleteTodos={data.total_incomplete_todos}
              weatherData={weatherData || null}
            />
          </div>

          {/* Alert Banner */}
          <AlertBanner alerts={alerts} onDismiss={dismissAlert} onSnooze={snoozeAlert} />

          {/* Main Content — 2 columns */}
          <div className="grid gap-3 sm:gap-5 lg:grid-cols-5 animate-slide-up" style={{ animationDelay: '100ms', animationFillMode: 'backwards' }}>
            {/* Left: Upcoming feed (wider) */}
            <div className="lg:col-span-3 flex flex-col">
              {upcomingData && upcomingData.items.length > 0 ? (
                <UpcomingWidget items={upcomingData.items} days={upcomingData.days} />
              ) : (
                <Card className="h-full">
                  <CardHeader>
                    <CardTitle>Upcoming</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground text-center py-8">
                      Nothing upcoming. Enjoy the quiet.
                    </p>
                  </CardContent>
                </Card>
              )}
            </div>

            {/* Right: Countdown + Today's events + todos stacked */}
            <div className="lg:col-span-2 flex flex-col gap-3 sm:gap-5">
              {data.starred_events.length > 0 && (
                <CountdownWidget events={data.starred_events} />
              )}
              <CalendarWidget events={data.todays_events} />
              <TodoWidget todos={data.upcoming_todos} />
            </div>
          </div>

          {/* Active Reminders — exclude those already shown in alert banner */}
          {(() => {
            const alertIds = new Set(alerts.map((a) => a.id));
            const futureReminders = data.active_reminders.filter((r) => !alertIds.has(r.id));
            if (futureReminders.length === 0) return null;
            return (
              <Card className="animate-slide-up" style={{ animationDelay: '150ms', animationFillMode: 'backwards' }}>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <div className="p-1.5 rounded-md bg-orange-500/10">
                      <Bell className="h-4 w-4 text-orange-400" />
                    </div>
                    Active Reminders
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-0.5">
                    {futureReminders.map((reminder) => (
                      <div
                        key={reminder.id}
                        onClick={() => navigate('/reminders', { state: { reminderId: reminder.id } })}
                        className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-white/5 transition-colors duration-150 cursor-pointer"
                      >
                        <div className="w-1.5 h-1.5 rounded-full bg-orange-400 shrink-0" />
                        <span className="font-medium text-sm truncate flex-1 min-w-0">{reminder.title}</span>
                        <span className="text-xs text-muted-foreground shrink-0 whitespace-nowrap">
                          {reminder.remind_at ? format(new Date(reminder.remind_at), 'MMM d, h:mm a') : ''}
                        </span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            );
          })()}

          {/* Tracked Projects */}
          <div className="animate-slide-up" style={{ animationDelay: '200ms', animationFillMode: 'backwards' }}>
            <TrackedProjectsWidget />
          </div>
        </div>
      </div>

      {/* Quick Add Forms */}
      {quickAddType === 'event' && <EventForm event={null} onClose={() => setQuickAddType(null)} />}
      {quickAddType === 'todo' && <TodoForm todo={null} onClose={() => setQuickAddType(null)} />}
      {quickAddType === 'reminder' && <ReminderForm reminder={null} onClose={() => setQuickAddType(null)} />}
    </div>
  );
}