"use client";

import { useState, useEffect } from "react";
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";
import type { Task, Event } from "@mosaic/shared";

export default function DashboardPage(): ReactElement {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [events, setEvents] = useState<Event[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    void loadDashboardData();
  }, []);

  async function loadDashboardData(): Promise<void> {
    setIsLoading(true);
    setError(null);

    try {
      // TODO: Replace with real API calls when backend is ready
      // const [tasksData, eventsData] = await Promise.all([fetchTasks(), fetchEvents()]);
      await new Promise((resolve) => setTimeout(resolve, 300));
      setTasks(mockTasks);
      setEvents(mockEvents);
    } catch (err) {
      setError(
        err instanceof Error
          ? err.message
          : "We had trouble loading your dashboard. Please try again when you're ready."
      );
    } finally {
      setIsLoading(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&apos;s your overview</p>
      </div>

      {error !== null ? (
        <div className="rounded-lg border border-amber-200 bg-amber-50 p-6 text-center">
          <p className="text-amber-800">{error}</p>
          <button
            onClick={() => void loadDashboardData()}
            className="mt-4 rounded-md bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-700 transition-colors"
          >
            Try again
          </button>
        </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={isLoading} />
          </div>

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

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