import type { ReactElement } from "react";
import { RecentTasksWidget } from "@/components/dashboard/RecentTasksWidget";
import { UpcomingEventsWidget } from "@/components/dashboard/UpcomingEventsWidget";
import { QuickCaptureWidget } from "@/components/dashboard/QuickCaptureWidget";
import { DomainOverviewWidget } from "@/components/dashboard/DomainOverviewWidget";
import { mockTasks } from "@/lib/api/tasks";
import { mockEvents } from "@/lib/api/events";

export default function DashboardPage(): ReactElement {
  // TODO: Replace with real API call when backend is ready
  // const { data: tasks, isLoading: tasksLoading } = useQuery({
  //   queryKey: ["tasks"],
  //   queryFn: fetchTasks,
  // });
  // const { data: events, isLoading: eventsLoading } = useQuery({
  //   queryKey: ["events"],
  //   queryFn: fetchEvents,
  // });

  const tasks = mockTasks;
  const events = mockEvents;
  const tasksLoading = false;
  const eventsLoading = false;

  return (
    <main className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
        <p className="text-gray-600 mt-2">Welcome back! Here's your overview</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Top row: Domain Overview and Quick Capture */}
        <div className="lg:col-span-2">
          <DomainOverviewWidget tasks={tasks} isLoading={tasksLoading} />
        </div>

        <RecentTasksWidget tasks={tasks} isLoading={tasksLoading} />
        <UpcomingEventsWidget events={events} isLoading={eventsLoading} />

        <div className="lg:col-span-2">
          <QuickCaptureWidget />
        </div>
      </div>
    </main>
  );
}