"use client";

import { useState } from "react";
import { UserReport } from "@/components/reports/UserReport";
import { ReportFilters } from "@/components/reports/ReportFilters";
import { Card, CardContent } from "@/components/ui/card";

export default function ReportsPage() {
  const [selectedUserId, setSelectedUserId] = useState<string>("");
  const [dateRange, setDateRange] = useState<{
    startDate: string;
    endDate: string;
  }>({
    startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
      .toISOString()
      .split("T")[0],
    endDate: new Date().toISOString().split("T")[0],
  });

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8 space-y-6">
        <div className="flex justify-between items-center">
          <h1 className="text-3xl font-bold text-gray-900">User Reports</h1>
        </div>

        <ReportFilters
          selectedUserId={selectedUserId}
          onUserChange={setSelectedUserId}
          dateRange={dateRange}
          onDateRangeChange={setDateRange}
        />

        {selectedUserId ? (
          <UserReport
            userId={selectedUserId}
            startDate={dateRange.startDate}
            endDate={dateRange.endDate}
          />
        ) : (
          <Card>
            <CardContent className="flex items-center justify-center h-64">
              <p className="text-gray-500 text-lg">
                Select a user to view their report
              </p>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  );
}