"use client";

import { Building2 } from "lucide-react";
import type { FinanceViewModel } from "@/lib/farmer-dashboard";
import { Badge } from "@/components/ui/badge";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import { tf } from "@/lib/i18n/dashboard-labels";
import type { AppLocale } from "@/lib/i18n/config";
import { cn } from "@/lib/utils";

export interface BankRoutingListProps {
  matches: NonNullable<FinanceViewModel["bankMatches"]>;
  locale: AppLocale;
  className?: string;
}

export function BankRoutingList({ matches, locale, className }: BankRoutingListProps) {
  return (
    <Card padding="md" className={className}>
      <CardHeader className="mb-3">
        <CardTitle className="flex items-center gap-2 text-base">
          <Building2 className="size-4 text-brand-green" aria-hidden="true" />
          {tf("bankRouting", locale)}
        </CardTitle>
      </CardHeader>
      <ul className="space-y-2" role="list">
        {matches.map((match) => {
          const isRouted = match.status === "routed";

          return (
            <li
              key={match.name}
              className={cn(
                "flex items-center justify-between gap-3 rounded-lg border px-3 py-2.5",
                isRouted
                  ? "border-success-green/30 bg-success-bg"
                  : "border-border bg-surface",
              )}
            >
              <div className="min-w-0 flex-1">
                <p className="font-inter text-sm font-medium text-ink truncate">
                  {match.name}
                </p>
                <p className="font-inter text-xs text-muted">
                  {match.score}% {tf("matchScore", locale)}
                </p>
              </div>
              {isRouted ? (
                <Badge variant="success" icon={false}>
                  {tf("routedStatus", locale)}
                </Badge>
              ) : (
                <button
                  type="button"
                  className="shrink-0 rounded-md px-2 py-1 font-inter text-xs font-medium text-brand-green transition-colors duration-200 hover:bg-brand-green/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-deep focus-visible:ring-offset-2 cursor-pointer"
                  aria-label={`${tf("view", locale)} ${match.name}`}
                >
                  {tf("view", locale)}
                </button>
              )}
            </li>
          );
        })}
      </ul>
    </Card>
  );
}