import type { BridgeGroupApiResponse } from "@/types/asset-settings";
import { formatCurrency } from "@/utils/asset-settings-utils";
import { PRIMARY_COLOR } from "@/lib/common";

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

const CARD_CLASS =
  "rounded-lg border border-slate-200 bg-white shadow-sm p-6 hover:shadow-md transition-shadow";

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
  );

  const sortedEntries = Object.entries(data.data).sort(
    ([, a], [, b]) => (b as number) - (a as number)
  );

  return (
    <div className="space-y-4">
      <div className={CARD_CLASS}>
        <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" style={{ color: PRIMARY_COLOR }}>
              {formatCurrency(bridgeGroupTotal, reportingCurrency || "")}
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {sortedEntries.map(([groupName, value]) => {
          const num = value as number;
          const percentage =
            bridgeGroupTotal > 0
              ? ((num / bridgeGroupTotal) * 100).toFixed(2)
              : "0.00";
          return (
            <div key={groupName} className={CARD_CLASS}>
              <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(num, reportingCurrency || "")}
                </div>
                <div className="text-sm text-slate-500">{percentage}% of total</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}