import { BridgeGroupApiResponse } from "@/types/asset-settings";
import { formatCurrency } from "@/utils/asset-settings-utils";

interface BridgeGroupViewProps {
  data: BridgeGroupApiResponse | null;
  reportingCurrency: string;
}

export function BridgeGroupView({
  data,
  reportingCurrency,
}: BridgeGroupViewProps) {
  if (!data?.data || Object.keys(data.data).length === 0) {
    return (
      <div className="rounded-lg border border-slate-200 bg-white p-8 text-center">
        <p className="text-slate-500">No bridge group data available.</p>
      </div>
    );
  }

  const bridgeGroupTotal = Object.values(data.data).reduce(
    (sum, val) => sum + (typeof val === "number" ? val : 0),
    0
  );

  return (
    <div className="space-y-4">
      {/* Total Summary Card */}
      <div className="rounded-lg border border-slate-200 bg-white shadow-sm p-6">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-lg font-semibold text-slate-900">Total</h3>
            <p className="text-sm text-slate-500 mt-1">Sum of all groups</p>
          </div>
          <div className="text-right">
            <div className="text-2xl font-bold text-[#428B4D]">
              {formatCurrency(bridgeGroupTotal, reportingCurrency || "")}
            </div>
          </div>
        </div>
      </div>

      {/* Group Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {Object.entries(data.data)
          .sort(([, a], [, b]) => (b as number) - (a as number))
          .map(([groupName, value]) => {
            const percentage =
              bridgeGroupTotal > 0
                ? ((value as number) / bridgeGroupTotal * 100).toFixed(2)
                : "0.00";

            return (
              <div
                key={groupName}
                className="rounded-lg border border-slate-200 bg-white shadow-sm p-6 hover:shadow-md transition-shadow"
              >
                <div className="flex flex-col">
                  <h3 className="text-base font-semibold text-slate-900 mb-2">
                    {groupName}
                  </h3>
                  <div className="text-2xl font-bold text-slate-800 mb-1">
                    {formatCurrency(value, reportingCurrency || "")}
                  </div>
                  <div className="text-sm text-slate-500">{percentage}% of total</div>
                </div>
              </div>
            );
          })}
      </div>
    </div>
  );
}