openmonetis/components/relatorios/cartoes/cards-overview.tsx

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import type { CartoesReportData } from "@/lib/relatorios/cartoes-report";
import {
  RiBankCard2Line,
  RiArrowUpLine,
  RiArrowDownLine,
} from "@remixicon/react";
import { cn } from "@/lib/utils";
import Link from "next/link";
import Image from "next/image";
import { useSearchParams } from "next/navigation";

type CardsOverviewProps = {
  data: CartoesReportData;
};

const BRAND_ASSETS: Record<string, string> = {
  visa: "/bandeiras/visa.svg",
  mastercard: "/bandeiras/mastercard.svg",
  amex: "/bandeiras/amex.svg",
  american: "/bandeiras/amex.svg",
  elo: "/bandeiras/elo.svg",
  hipercard: "/bandeiras/hipercard.svg",
  hiper: "/bandeiras/hipercard.svg",
};

const resolveBrandAsset = (brand: string | null) => {
  if (!brand) return null;
  const normalized = brand.trim().toLowerCase();
  const match = (
    Object.keys(BRAND_ASSETS) as Array<keyof typeof BRAND_ASSETS>
  ).find((entry) => normalized.includes(entry));
  return match ? BRAND_ASSETS[match] : null;
};

const resolveLogoPath = (logo: string | null) => {
  if (!logo) return null;
  if (
    logo.startsWith("http://") ||
    logo.startsWith("https://") ||
    logo.startsWith("data:")
  ) {
    return logo;
  }
  return logo.startsWith("/") ? logo : `/logos/${logo}`;
};

export function CardsOverview({ data }: CardsOverviewProps) {
  const searchParams = useSearchParams();
  const periodoParam = searchParams.get("periodo");

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(value);
  };

  const getUsageColor = (percent: number) => {
    if (percent < 50) return "bg-green-500";
    if (percent < 80) return "bg-yellow-500";
    return "bg-red-500";
  };

  const buildUrl = (cardId: string) => {
    const params = new URLSearchParams();
    if (periodoParam) params.set("periodo", periodoParam);
    params.set("cartao", cardId);
    return `/relatorios/cartoes?${params.toString()}`;
  };

  if (data.cards.length === 0) {
    return (
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-base font-medium">
            Resumo dos Cartões
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
            <RiBankCard2Line className="size-8 mb-2" />
            <p className="text-sm">Nenhum cartão ativo encontrado</p>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-medium">
          Resumo dos Cartões
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid gap-3 sm:grid-cols-3">
          <div className="p-3 rounded-lg border bg-muted/30">
            <p className="text-xs text-muted-foreground">Limite Total</p>
            <p className="text-lg font-semibold">
              {formatCurrency(data.totalLimit)}
            </p>
          </div>
          <div className="p-3 rounded-lg border bg-muted/30">
            <p className="text-xs text-muted-foreground">Uso Total</p>
            <p className="text-lg font-semibold">
              {formatCurrency(data.totalUsage)}
            </p>
          </div>
          <div className="p-3 rounded-lg border bg-muted/30">
            <p className="text-xs text-muted-foreground">Utilização</p>
            <p className="text-lg font-semibold">
              {data.totalUsagePercent.toFixed(0)}%
            </p>
          </div>
        </div>

        <div className="flex flex-col">
          {data.cards.map((card) => {
            const logoPath = resolveLogoPath(card.logo);
            const brandAsset = resolveBrandAsset(card.brand);

            return (
              <Link
                key={card.id}
                href={buildUrl(card.id)}
                className={cn(
                  "flex flex-col py-2 border-b border-dashed last:border-0 transition-colors hover:bg-muted/50",
                  data.selectedCard?.card.id === card.id && "bg-muted/30",
                )}
              >
                <div className="flex items-center justify-between gap-3">
                  <div className="flex min-w-0 flex-1 items-center gap-2">
                    {/* Logo container - size-10 like expenses-by-category */}
                    <div className="flex size-10 shrink-0 items-center justify-center">
                      {logoPath ? (
                        <Image
                          src={logoPath}
                          alt={`Logo ${card.name}`}
                          width={28}
                          height={28}
                          className="rounded object-contain"
                        />
                      ) : (
                        <RiBankCard2Line className="size-4 text-muted-foreground" />
                      )}
                    </div>

                    {/* Name and brand */}
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-2">
                        <span className="text-sm font-medium truncate">
                          {card.name}
                        </span>
                        {brandAsset && (
                          <Image
                            src={brandAsset}
                            alt={`Bandeira ${card.brand}`}
                            width={24}
                            height={16}
                            className="h-2.5 w-auto shrink-0"
                          />
                        )}
                      </div>
                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
                        <span>
                          {formatCurrency(card.currentUsage)} /{" "}
                          {formatCurrency(card.limit)}
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* Trend and percentage */}
                  <div className="flex shrink-0 flex-col items-end gap-0.5">
                    <span className="text-sm font-medium">
                      {card.usagePercent.toFixed(0)}%
                    </span>
                    <div className="flex items-center gap-1">
                      {card.trend === "up" && (
                        <RiArrowUpLine className="size-3 text-red-500" />
                      )}
                      {card.trend === "down" && (
                        <RiArrowDownLine className="size-3 text-green-500" />
                      )}
                      <span
                        className={cn(
                          "text-xs",
                          card.trend === "up" && "text-red-500",
                          card.trend === "down" && "text-green-500",
                          card.trend === "stable" && "text-muted-foreground",
                        )}
                      >
                        {card.changePercent > 0 ? "+" : ""}
                        {card.changePercent.toFixed(0)}%
                      </span>
                    </div>
                  </div>
                </div>

                {/* Progress bar - aligned with content */}
                <div className="ml-12 mt-1.5">
                  <Progress
                    value={Math.min(card.usagePercent, 100)}
                    className={cn(
                      "h-1.5",
                      `[&>div]:${getUsageColor(card.usagePercent)}`,
                    )}
                  />
                </div>
              </Link>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}