"use client";

import { CheckCircle2, ClipboardCheck } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle, StatusBanner } from "@/components/ui";
import { useLocale } from "@/lib/i18n";
import { ti } from "@/lib/i18n/dashboard-labels";
import type { IdentityViewModel } from "@/lib/farmer-dashboard";
import { cn } from "@/lib/utils";

interface ComplianceChecklistProps {
  items: NonNullable<IdentityViewModel["compliance"]>;
  className?: string;
}

export default function ComplianceChecklist({ items, className }: ComplianceChecklistProps) {
  const { locale } = useLocale();
  const allPassed = items.every((item) => item.passed);

  return (
    <Card className={cn("flex h-full flex-col", className)} data-testid="identity-compliance-card">
      <CardHeader className="flex-row items-center gap-2">
        <span className="flex size-9 items-center justify-center rounded-lg bg-brand-green/10 text-brand-green">
          <ClipboardCheck className="size-4" aria-hidden="true" />
        </span>
        <CardTitle className="text-base">{ti("complianceTitle", locale)}</CardTitle>
      </CardHeader>

      <CardContent className="flex flex-1 flex-col gap-4">
        <ul className="space-y-2.5">
          {items.map((item) => (
            <li
              key={item.key}
              className="flex min-h-11 items-center gap-3"
              data-testid={`identity-compliance-${item.key}`}
            >
              <span
                className={cn(
                  "flex size-6 shrink-0 items-center justify-center rounded-full",
                  item.passed ? "bg-success-green text-white" : "bg-surface-elevated text-muted",
                )}
                aria-hidden="true"
              >
                {item.passed ? <CheckCircle2 className="size-3.5" /> : null}
              </span>
              <span className="font-inter text-sm text-ink">{item.label}</span>
            </li>
          ))}
        </ul>

        {allPassed ? (
          <StatusBanner
            variant="success"
            title={ti("compliantTitle", locale)}
            description={ti("compliantDesc", locale)}
            className="mt-auto"
            data-testid="identity-compliance-banner"
          />
        ) : null}
      </CardContent>
    </Card>
  );
}