import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { useQuery } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient";

type SummaryResp = {
  totalPatients?: number;
  patientsWithBalance?: number;
  totalOutstanding?: number;
  totalCollected?: number;
};

type ZeroBalResp = {
  totalCount?: number;
  totalCharges?: number;
  totalCollected?: number;
};

type ReportType = string;

function fmtCurrency(v: number) {
  return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(v);
}

export default function SummaryCards({
  startDate,
  endDate,
  npiProviderId,
  selectedReportType,
}: {
  startDate: string;
  endDate: string;
  npiProviderId?: number | null;
  selectedReportType?: ReportType;
}) {
  const { data, isLoading, isError } = useQuery<SummaryResp, Error>({
    queryKey: ["/api/payments-reports/summary", startDate, endDate, npiProviderId ?? "all"],
    queryFn: async () => {
      const params = new URLSearchParams();
      if (startDate) params.set("from", startDate);
      if (endDate) params.set("to", endDate);
      if (npiProviderId) params.set("npiProviderId", String(npiProviderId));
      const res = await apiRequest("GET", `/api/payments-reports/summary?${params.toString()}`);
      if (!res.ok) {
        const body = await res.json().catch(() => ({ message: "Failed to load dashboard summary" }));
        throw new Error(body?.message ?? "Failed to load dashboard summary");
      }
      return res.json();
    },
    enabled: Boolean(startDate && endDate),
  });

  // Fetch zero-balance aggregates only when that report is active
  const showZeroBalSummary = selectedReportType === "patients_no_balance";
  const { data: zeroBalData, isLoading: zeroBalLoading } = useQuery<ZeroBalResp, Error>({
    queryKey: ["/api/payments-reports/patients-with-zero-balances/summary", startDate, endDate, npiProviderId ?? "all"],
    queryFn: async () => {
      const params = new URLSearchParams();
      params.set("limit", "1");
      if (startDate) params.set("from", startDate);
      if (endDate) params.set("to", endDate);
      if (npiProviderId) params.set("npiProviderId", String(npiProviderId));
      const res = await apiRequest("GET", `/api/payments-reports/patients-with-zero-balances?${params.toString()}`);
      if (!res.ok) throw new Error("Failed to load zero balance summary");
      return res.json();
    },
    enabled: Boolean(startDate && endDate && showZeroBalSummary),
  });

  const totalPatients      = data?.totalPatients ?? 0;
  const patientsWithBalance = data?.patientsWithBalance ?? 0;
  const patientsNoBalance  = Math.max(0, totalPatients - patientsWithBalance);
  const totalOutstanding   = data?.totalOutstanding ?? 0;
  const totalCollected     = data?.totalCollected ?? 0;

  const zeroBalCount     = zeroBalData?.totalCount ?? 0;
  const zeroBalBilled    = zeroBalData?.totalCharges ?? 0;
  const zeroBalCollected = zeroBalData?.totalCollected ?? 0;

  const isWithBalance = selectedReportType === "patients_with_balance";

  return (
    <Card className="pt-4 pb-4">
      <CardContent>
        <div className="mb-3">
          <h2 className="text-base font-semibold text-gray-800">Report summary</h2>
          <p className="text-sm text-gray-500">Data covers the selected time frame</p>
        </div>

        {/* Global stats */}
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 pt-4">
          <div className="text-center">
            <div className="text-lg font-semibold text-blue-600">
              {isLoading ? "—" : totalPatients}
            </div>
            <p className="text-sm text-gray-600">Total Patients</p>
          </div>

          <div className={`text-center rounded-lg py-1 ${isWithBalance ? "bg-red-50 ring-1 ring-red-300" : ""}`}>
            <div className="text-lg font-semibold text-red-600">
              {isLoading ? "—" : patientsWithBalance}
            </div>
            <p className="text-sm text-gray-600">With Balance</p>
          </div>

          <div className={`text-center rounded-lg py-1 ${showZeroBalSummary ? "bg-green-50 ring-1 ring-green-300" : ""}`}>
            <div className="text-lg font-semibold text-green-600">
              {isLoading ? "—" : patientsNoBalance}
            </div>
            <p className="text-sm text-gray-600">Zero Balance</p>
          </div>

          <div className={`text-center rounded-lg py-1 ${isWithBalance ? "bg-orange-50 ring-1 ring-orange-300" : ""}`}>
            <div className="text-lg font-semibold text-orange-600">
              {isLoading ? "—" : fmtCurrency(totalOutstanding)}
            </div>
            <p className="text-sm text-gray-600">Outstanding</p>
          </div>

          <div className="text-center">
            <div className="text-lg font-semibold text-purple-600">
              {isLoading ? "—" : fmtCurrency(totalCollected)}
            </div>
            <p className="text-sm text-gray-600">Collected</p>
          </div>
        </div>

        {/* Zero-balance detail row */}
        {showZeroBalSummary && (
          <div className="mt-4 pt-4 border-t border-green-100">
            <p className="text-xs font-semibold text-green-700 uppercase tracking-wide mb-2">
              Zero Balance — Paid in Full Summary
            </p>
            <div className="grid grid-cols-3 gap-4">
              <div className="text-center bg-green-50 rounded-lg py-2">
                <div className="text-lg font-semibold text-green-700">
                  {zeroBalLoading ? "—" : zeroBalCount}
                </div>
                <p className="text-xs text-gray-600">Patients Paid in Full</p>
              </div>
              <div className="text-center bg-green-50 rounded-lg py-2">
                <div className="text-lg font-semibold text-gray-700">
                  {zeroBalLoading ? "—" : fmtCurrency(zeroBalBilled)}
                </div>
                <p className="text-xs text-gray-600">Total Billed</p>
              </div>
              <div className="text-center bg-green-50 rounded-lg py-2">
                <div className="text-lg font-semibold text-green-700">
                  {zeroBalLoading ? "—" : fmtCurrency(zeroBalCollected)}
                </div>
                <p className="text-xs text-gray-600">Total Collected</p>
              </div>
            </div>
          </div>
        )}

        {isError && (
          <div className="mt-3 text-sm text-red-600">
            Failed to load summary. Check server or network.
          </div>
        )}
      </CardContent>
    </Card>
  );
}
