import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
import { Calendar } from "lucide-react";
import { formatLocalDate, parseLocalDate } from "@/utils/dateUtils";
import { DateInput } from "@/components/ui/dateInput";
import { useQuery } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient";
export default function ReportConfig({ startDate, endDate, setStartDate, setEndDate, selectedReportType, setSelectedReportType, npiProviderId, setNpiProviderId, }) {
    let startDateObj = null;
    if (startDate) {
        try {
            startDateObj = parseLocalDate(startDate);
        }
        catch {
            startDateObj = null;
        }
    }
    let endDateObj = null;
    if (endDate) {
        try {
            endDateObj = parseLocalDate(endDate);
        }
        catch {
            endDateObj = null;
        }
    }
    const { data: npiProviders = [] } = useQuery({
        queryKey: ["/api/npiProviders/"],
        queryFn: async () => {
            const res = await apiRequest("GET", "/api/npiProviders/");
            return res.json();
        },
        staleTime: 60_000,
    });
    return (<Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Calendar className="h-5 w-5"/> Report Configuration
        </CardTitle>
      </CardHeader>

      <CardContent className="space-y-4">
        <div className="text-sm text-gray-500">
          Choose the report type, date range, and provider.
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div>
            <DateInput label="Start Date" value={startDateObj} onChange={(d) => setStartDate(d ? formatLocalDate(d) : "")} disableFuture/>
          </div>

          <div>
            <DateInput label="End Date" value={endDateObj} onChange={(d) => setEndDate(d ? formatLocalDate(d) : "")} disableFuture/>
          </div>

          <div className="space-y-2">
            <Label>Provider</Label>
            <Select value={npiProviderId?.toString() ?? "all"} onValueChange={(v) => setNpiProviderId(v === "all" ? null : Number(v))}>
              <SelectTrigger>
                <SelectValue placeholder="All Providers"/>
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Providers</SelectItem>
                {npiProviders.map((p) => (<SelectItem key={p.id} value={p.id.toString()}>
                    {p.providerName}
                  </SelectItem>))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label htmlFor="report-type">Report Type</Label>
            <Select value={selectedReportType} onValueChange={(v) => setSelectedReportType(v)}>
              <SelectTrigger>
                <SelectValue placeholder="Select report type"/>
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="patients_with_balance">
                  Patients with Outstanding Balance
                </SelectItem>
                <SelectItem value="patients_no_balance">
                  Patients with Zero Balance
                </SelectItem>
                <SelectItem value="monthly_collections">
                  Monthly Collections Summary
                </SelectItem>
                <SelectItem value="procedure_codes_by_doctor">
                  Procedure Codes by Doctor
                </SelectItem>
                <SelectItem value="payment_methods">
                  Payment Methods Breakdown
                </SelectItem>
                <SelectItem value="insurance_vs_patient_payments">
                  Insurance vs Patient Payments
                </SelectItem>
                <SelectItem value="aging_report">
                  Accounts Receivable Aging
                </SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </CardContent>
    </Card>);
}