"use client";

import { LocateFixed, Minus, Plus } from "lucide-react";
import { Card, CardHeader, CardTitle } 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";
import { formatCoordinates, polygonToSvgPath, projectPolygonPoint } from "./polygon-svg";

interface GisMapCardProps {
  gis: NonNullable<IdentityViewModel["gis"]>;
  className?: string;
}

export default function GisMapCard({ gis, className }: GisMapCardProps) {
  const { locale } = useLocale();
  const projection = gis.polygonGeoJson
    ? polygonToSvgPath(gis.polygonGeoJson)
    : { path: "", viewBox: "0 0 400 280", bounds: null };

  return (
    <Card padding="none" className={cn("overflow-hidden", className)} data-testid="identity-gis-card">
      <CardHeader className="px-5 pt-5">
        <CardTitle className="text-base">{ti("gisTitle", locale)}</CardTitle>
      </CardHeader>

      <div className="relative min-h-[320px] bg-gradient-to-br from-emerald-900/80 via-green-900/70 to-teal-950/90">
        <div
          className="absolute inset-0 opacity-40"
          style={{
            backgroundImage:
              "radial-gradient(circle at 30% 40%, rgba(34,197,94,0.25) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(16,185,129,0.2) 0%, transparent 45%)",
          }}
          aria-hidden="true"
        />

        {projection.path && projection.bounds ? (
          <svg
            viewBox={projection.viewBox}
            className="absolute inset-0 h-full w-full motion-safe:transition-opacity motion-reduce:opacity-100"
            role="img"
            aria-label={ti("gisMapAria", locale)}
          >
            <path
              d={projection.path}
              fill="rgba(34, 197, 94, 0.35)"
              stroke="var(--success-green)"
              strokeWidth={2.5}
              strokeLinejoin="round"
            />
            {(gis.polygonGeoJson!.coordinates[0] as [number, number][]).map((coord, i) => {
              const [lng, lat] = coord;
              const { x, y } = projectPolygonPoint(lng, lat, projection.bounds!);
              return (
                <circle
                  key={`vertex-${i}`}
                  cx={x}
                  cy={y}
                  r={5}
                  fill="white"
                  stroke="var(--success-green)"
                  strokeWidth={2}
                />
              );
            })}
          </svg>
        ) : null}

        <div className="absolute left-3 top-3 flex flex-col gap-1.5" aria-hidden="true">
          {[Plus, Minus, LocateFixed].map((Icon, idx) => (
            <span
              key={idx}
              className="flex size-11 items-center justify-center rounded-lg bg-white/90 text-ink shadow-sm"
            >
              <Icon className="size-4" />
            </span>
          ))}
        </div>

        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-ink/80 px-3 py-1.5 font-inter text-sm font-semibold text-white">
          {gis.areaHa.toFixed(2)} ha
        </div>

        <div className="absolute bottom-4 left-4 flex items-center gap-2 rounded-pill bg-ink/80 px-3 py-2 font-inter text-xs font-medium text-white">
          <LocateFixed className="size-3.5 shrink-0" aria-hidden="true" />
          <span data-testid="identity-gis-coords">{formatCoordinates(gis.lat, gis.lng)}</span>
        </div>
      </div>
    </Card>
  );
}