"use client";

import { Badge, Card, CardContent, CardTitle, DataRow, DataRowList, StatusBanner, Avatar } 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 EkycCardProps {
  fullName: string;
  ekyc: NonNullable<IdentityViewModel["ekyc"]>;
  kycStatus: string;
  className?: string;
}

function formatDob(dob?: string): string {
  if (!dob) return "—";
  const date = new Date(dob);
  if (Number.isNaN(date.getTime())) return dob;
  return date.toLocaleDateString("en-GB", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  });
}

export default function EkycCard({ fullName, ekyc, kycStatus, className }: EkycCardProps) {
  const { locale } = useLocale();
  const isVerified = kycStatus === "verified";

  return (
    <Card className={cn("flex h-full flex-col", className)} data-testid="identity-ekyc-card">
      <div className="mb-4 flex items-center justify-between gap-3">
        <CardTitle className="text-base">{ti("ekycTitle", locale)}</CardTitle>
        {isVerified ? (
          <Badge variant="success" data-testid="identity-ekyc-verified-badge">
            {ti("verified", locale)}
          </Badge>
        ) : null}
      </div>

      <CardContent className="mt-4 flex flex-1 flex-col gap-4">
        <div className="flex items-start gap-4">
          <Avatar
            src={ekyc.photoUrl}
            alt={fullName}
            size="lg"
            className="size-16 shrink-0"
          />
          <DataRowList className="min-w-0 flex-1 divide-y-0">
            <DataRow label={ti("name", locale)} value={fullName} className="min-h-10 py-2" />
            <DataRow
              label={ti("aadhaar", locale)}
              value={ekyc.aadhaarMasked ?? "—"}
              className="min-h-10 py-2"
            />
            <DataRow
              label={ti("dob", locale)}
              value={formatDob(ekyc.dob)}
              className="min-h-10 py-2"
            />
            <DataRow
              label={ti("mobile", locale)}
              value={ekyc.mobileMasked ?? "—"}
              className="min-h-10 py-2"
            />
          </DataRowList>
        </div>

        {isVerified ? (
          <StatusBanner
            variant="success"
            title={ti("ekycVerifiedTitle", locale)}
            description={ti("ekycVerifiedDesc", locale)}
            className="mt-auto"
            data-testid="identity-ekyc-banner"
          />
        ) : null}
      </CardContent>
    </Card>
  );
}