"use client";

import { MapPin, User, Ruler, Landmark, ShieldCheck } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle, DataRow, DataRowList } 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 FarmProfileCardProps {
  data: IdentityViewModel;
  className?: string;
}

function formatOwnership(value: string, locale: Parameters<typeof ti>[1]): string {
  if (value === "owner") return ti("ownershipOwner", locale);
  if (value === "tenant") return ti("ownershipTenant", locale);
  if (value === "cooperative_member") return ti("ownershipCooperative", locale);
  return value || "—";
}

function formatKycStatus(value: string, locale: Parameters<typeof ti>[1]): string {
  if (value === "verified") return ti("verified", locale);
  if (value === "pending") return ti("pending", locale);
  return value || "—";
}

export default function FarmProfileCard({ data, className }: FarmProfileCardProps) {
  const { locale } = useLocale();
  const area = data.farmSizeHa ? `${data.farmSizeHa} ha` : data.gis?.areaHa ? `${data.gis.areaHa} ha` : "—";

  return (
    <Card className={cn("h-full", className)} data-testid="identity-farm-profile-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">
          <User className="size-4" aria-hidden="true" />
        </span>
        <CardTitle className="text-base">{ti("farmProfileTitle", locale)}</CardTitle>
      </CardHeader>

      <CardContent>
        <DataRowList>
          <DataRow
            label={ti("farmerId", locale)}
            value={data.farmerId ?? "—"}
            icon={<ShieldCheck className="size-4" />}
          />
          <DataRow
            label={ti("farmName", locale)}
            value={data.farmName ?? data.fullName ?? "—"}
            icon={<User className="size-4" />}
          />
          <DataRow
            label={ti("location", locale)}
            value={data.district || "—"}
            icon={<MapPin className="size-4" />}
          />
          <DataRow
            label={ti("totalArea", locale)}
            value={area}
            icon={<Ruler className="size-4" />}
          />
          <DataRow
            label={ti("landType", locale)}
            value={formatOwnership(data.landOwnership, locale)}
            icon={<Landmark className="size-4" />}
          />
          <DataRow
            label={ti("kycStatus", locale)}
            value={formatKycStatus(data.kycStatus, locale)}
            icon={<ShieldCheck className="size-4" />}
          />
        </DataRowList>
      </CardContent>
    </Card>
  );
}