import { Ticket } from "lucide-react";
import type { AppLocale } from "@/lib/i18n/config";
import { td } from "@/lib/i18n/dashboard-labels";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { InputsViewModel } from "@/lib/farmer-dashboard";
import { PaymentRouteStepper } from "./PaymentRouteStepper";
import { formatCurrency } from "./utils";

type VoucherDetail = NonNullable<InputsViewModel["voucher"]>;

interface VoucherCardProps {
  voucher: VoucherDetail;
  locale: AppLocale;
}

const statusVariant = {
  active: "success",
  redeemed: "neutral",
  expired: "warning",
} as const;

export function VoucherCard({ voucher, locale }: VoucherCardProps) {
  const statusLabel =
    voucher.status === "active"
      ? td("inputsVoucherApproved", locale)
      : voucher.status === "redeemed"
        ? td("inputsVoucherRedeemed", locale)
        : td("inputsVoucherExpired", locale);

  return (
    <Card
      data-testid="inputs-voucher-card"
      variant="dark"
      padding="md"
      className="h-full"
    >
      <CardHeader className="mb-0 flex flex-row items-start justify-between gap-2">
        <CardTitle className="text-base text-white">
          {td("inputsVoucherTitle", locale)}
        </CardTitle>
        <Ticket className="size-5 shrink-0 text-white/70" aria-hidden="true" />
      </CardHeader>
      <CardContent className="mt-4 space-y-4">
        <div className="flex flex-wrap items-center gap-2">
          <p className="font-onest text-lg font-semibold text-white">{voucher.code}</p>
          <Badge variant={statusVariant[voucher.status]} className="border-white/20 bg-white/10 text-white">
            {statusLabel}
          </Badge>
        </div>

        <dl className="grid grid-cols-2 gap-3">
          <div>
            <dt className="font-inter text-xs text-white/60">{td("inputsVoucherAmount", locale)}</dt>
            <dd className="font-inter text-sm font-semibold text-white">
              {formatCurrency(voucher.amount, voucher.currency)}
            </dd>
          </div>
          <div>
            <dt className="font-inter text-xs text-white/60">{td("inputsVoucherStatus", locale)}</dt>
            <dd className="font-inter text-sm font-semibold capitalize text-white">
              {voucher.status.replace("_", " ")}
            </dd>
          </div>
        </dl>

        {voucher.paymentRoute.length > 0 ? (
          <PaymentRouteStepper
            steps={voucher.paymentRoute}
            ariaLabel={td("inputsPaymentRoute", locale)}
          />
        ) : null}
      </CardContent>
    </Card>
  );
}