import { MapPin, Truck } from "lucide-react";
import type { AppLocale } from "@/lib/i18n/config";
import { td } from "@/lib/i18n/dashboard-labels";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Stepper } from "@/components/ui/stepper";
import type { InputsViewModel } from "@/lib/farmer-dashboard";
import { deliveryStepsToStepperSteps, formatShortDate } from "./utils";

type DeliveryTracking = NonNullable<InputsViewModel["delivery"]>;

interface DeliveryTrackingStepperProps {
  delivery: DeliveryTracking;
  locale: AppLocale;
}

const statusVariant = {
  pending: "warning",
  in_transit: "brand",
  delivered: "success",
} as const;

export function DeliveryTrackingStepper({ delivery, locale }: DeliveryTrackingStepperProps) {
  const steps = deliveryStepsToStepperSteps(delivery.steps, locale);
  const statusLabel =
    delivery.status === "in_transit"
      ? td("inputsDeliveryInTransit", locale)
      : delivery.status === "delivered"
        ? td("inputsDeliveryDelivered", locale)
        : td("inputsDeliveryPending", locale);

  return (
    <Card data-testid="inputs-delivery-stepper" padding="md">
      <CardHeader className="mb-0 flex flex-row flex-wrap items-center justify-between gap-2">
        <CardTitle className="text-base">{td("inputsDeliveryTitle", locale)}</CardTitle>
        <div className="flex flex-wrap items-center gap-2">
          <Badge variant={statusVariant[delivery.status]} icon={false}>
            {statusLabel}
          </Badge>
          <span className="font-inter text-xs text-muted">
            {td("inputsTrackingId", locale)}: {delivery.trackingId}
          </span>
        </div>
      </CardHeader>
      <CardContent className="mt-6">
        <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_280px]">
          <Stepper steps={steps} ariaLabel={td("inputsDeliveryTitle", locale)} />

          <div
            data-testid="inputs-delivery-map-placeholder"
            className="flex min-h-[160px] flex-col justify-between rounded-xl border border-border bg-surface-elevated p-4"
          >
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-brand-green">
                <Truck className="size-4" aria-hidden="true" />
                <p className="font-inter text-sm font-medium text-ink">
                  {td("inputsDeliveryCurrentLocation", locale)}
                </p>
              </div>
              <p className="font-inter text-xs text-muted">
                {td("inputsDeliveryMapPlaceholder", locale)}
              </p>
              {delivery.eta ? (
                <div className="flex items-center gap-2 text-muted">
                  <MapPin className="size-4 shrink-0" aria-hidden="true" />
                  <p className="font-inter text-xs">
                    {td("inputsDeliveryEta", locale)}: {formatShortDate(delivery.eta)}
                  </p>
                </div>
              ) : null}
            </div>
            <div
              className="mt-4 flex h-20 items-center justify-center rounded-lg bg-brand-green/5"
              aria-hidden="true"
            >
              <MapPin className="size-8 text-brand-green/40" />
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}