import React, { useState } from "react";
import { useAuth } from "@/hooks/use-auth";
import ReportConfig from "@/components/reports/report-config";
import PatientsWithBalanceReport from "@/components/reports/patients-with-balance-report";
import SummaryCards from "@/components/reports/summary-cards";
import CommissionSection from "@/components/reports/commission-section";
export default function ReportPage() {
    const { user } = useAuth();
    const [startDate, setStartDate] = useState(() => {
        const d = new Date();
        d.setMonth(d.getMonth() - 1);
        return d.toISOString().split("T")[0] ?? "";
    });
    const [endDate, setEndDate] = useState(() => new Date().toISOString().split("T")[0] ?? "");
    const [selectedReportType, setSelectedReportType] = useState("patients_with_balance");
    const [npiProviderId, setNpiProviderId] = useState(null);
    if (!user) {
        return (<div className="text-center py-8">Please sign in to view reports.</div>);
    }
    return (<div className="container mx-auto space-y-6">
      {/* Header Section */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">
            Financial Reports
          </h1>
          <p className="text-muted-foreground">
            Generate comprehensive financial reports for your practice
          </p>
        </div>
      </div>

      <div className="mb-4">
        <ReportConfig startDate={startDate} endDate={endDate} setStartDate={setStartDate} setEndDate={setEndDate} selectedReportType={selectedReportType} setSelectedReportType={setSelectedReportType} npiProviderId={npiProviderId} setNpiProviderId={setNpiProviderId}/>
      </div>

      {/* SINGLE authoritative SummaryCards instance for the page */}
      <div className="mb-4">
        <SummaryCards startDate={startDate} endDate={endDate} npiProviderId={npiProviderId}/>
      </div>

      <div>
        {selectedReportType === "patients_with_balance" && (<PatientsWithBalanceReport startDate={startDate} endDate={endDate} npiProviderId={npiProviderId}/>)}

        {/* Add other report components here as needed */}
      </div>

      {/* Commission section */}
      <div className="mt-8">
        <CommissionSection />
      </div>
    </div>);
}
