"use client";

import { MapPinned } from "lucide-react";
import { polygonToSvgPath } from "@/components/agnet/identity/polygon-svg";
import { Badge } from "@/components/ui/badge";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import { DataRow } from "@/components/ui/data-row";
import { tf } from "@/lib/i18n/dashboard-labels";
import type { AppLocale } from "@/lib/i18n/config";
import type { FinanceViewModel, IdentityViewModel } from "@/lib/farmer-dashboard";
import { cn } from "@/lib/utils";

export interface FarmerFarmCardProps {
  identity: IdentityViewModel;
  finance: FinanceViewModel;
  primaryCrop?: string;
  season?: string;
  gisVerified?: boolean;
  locale: AppLocale;
  className?: string;
}

export function FarmerFarmCard({
  identity,
  finance,
  primaryCrop,
  season,
  gisVerified = false,
  locale,
  className,
}: FarmerFarmCardProps) {
  const satelliteUrl = finance.satelliteImages?.[0];
  const projection = identity.gis?.polygonGeoJson
    ? polygonToSvgPath(identity.gis.polygonGeoJson)
    : null;

  return (
    <Card padding="md" className={cn("h-full", className)} data-testid="finance-farmer-farm-card">
      <CardHeader className="mb-3">
        <CardTitle className="flex items-center gap-2 text-base">
          <MapPinned className="size-4 text-brand-green" aria-hidden="true" />
          {tf("farmerFarm", locale)}
        </CardTitle>
      </CardHeader>

      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <div className="divide-y divide-border">
          {identity.fullName ? (
            <DataRow label={tf("farmerName", locale)} value={identity.fullName} />
          ) : null}
          {identity.region ? (
            <DataRow label={tf("region", locale)} value={identity.region} />
          ) : null}
          {identity.district ? (
            <DataRow label={tf("district", locale)} value={identity.district} />
          ) : null}
          {identity.farmSizeHa ? (
            <DataRow label={tf("farmSize", locale)} value={`${identity.farmSizeHa} ha`} />
          ) : null}
          {primaryCrop ? (
            <DataRow label={tf("primaryCrop", locale)} value={primaryCrop} />
          ) : null}
          {season ? <DataRow label={tf("season", locale)} value={season} /> : null}
        </div>

        <div className="relative min-h-[200px] overflow-hidden rounded-lg border border-border lg:min-h-[220px]">
          {satelliteUrl ? (
            /* eslint-disable-next-line @next/next/no-img-element */
            <img
              src={satelliteUrl}
              alt={tf("fieldMapAlt", locale)}
              className="absolute inset-0 h-full w-full object-cover"
            />
          ) : (
            <div
              className="absolute inset-0 bg-gradient-to-br from-emerald-900/90 via-green-900/80 to-teal-950/90"
              aria-hidden="true"
            >
              <div
                className="absolute inset-0 opacity-50"
                style={{
                  backgroundImage:
                    "radial-gradient(circle at 25% 35%, rgba(34,197,94,0.35) 0%, transparent 55%), radial-gradient(circle at 75% 65%, rgba(16,185,129,0.25) 0%, transparent 50%)",
                }}
              />
              {projection?.path ? (
                <svg
                  viewBox={projection.viewBox}
                  className="absolute inset-0 h-full w-full"
                  role="img"
                  aria-label={tf("fieldMapAlt", locale)}
                >
                  <path
                    d={projection.path}
                    fill="rgba(255, 255, 255, 0.25)"
                    stroke="rgba(255, 255, 255, 0.85)"
                    strokeWidth={2.5}
                    strokeLinejoin="round"
                  />
                </svg>
              ) : null}
            </div>
          )}

          {gisVerified ? (
            <div className="absolute bottom-2 left-2">
              <Badge variant="success">{tf("gisVerified", locale)}</Badge>
            </div>
          ) : null}
        </div>
      </div>
    </Card>
  );
}