import { type UseFormReturn } from "react-hook-form";
import { type BookingFormValues, type WagonCalcResult } from "./schema";
import { AlertBox, StepHeader, StepLabel } from "./shared";

type BookingForm = UseFormReturn<BookingFormValues>;

export function Step6WagonAllocation({
  form,
  wagons,
}: {
  form: BookingForm;
  wagons: WagonCalcResult | null;
}) {
  const containers = form.watch("containers") ?? [];
  const totalContainers = containers.reduce(
    (sum, c) => sum + Number(c.qty || 0),
    0,
  );
  const containerSummary = containers
    .filter((c) => +c.qty > 0)
    .map((c) => `${c.qty} × ${c.type}`)
    .join(", ");
  return (
    <div className="space-y-6">
      <StepHeader
        title="Wagon Allocation"
        description="System-calculated wagon requirements based on your container profile."
      />

      {!wagons ? (
        <AlertBox tone="info">
          Complete the container configuration in the previous step to see wagon
          allocation.
        </AlertBox>
      ) : (
        <>
          <div className="grid gap-3 sm:grid-cols-3">
            <div className="rounded-xl bg-primary/5 p-4 text-center">
              <p className="text-3xl font-bold text-primary">
                {wagons.totalWagons}
              </p>
              <p className="mt-1 text-xs text-muted-foreground">
                Wagons Required
              </p>
            </div>
            <div className="rounded-xl bg-muted p-4 text-center">
              <p className="text-3xl font-bold">{totalContainers}</p>
              <p className="mt-1 text-xs text-muted-foreground">
                {containerSummary || "Containers"}
              </p>
            </div>
            <div className="rounded-xl bg-muted p-4 text-center">
              <p className="text-3xl font-bold">{wagons.sharedWagons}</p>
              <p className="mt-1 text-xs text-muted-foreground">Shared Slots</p>
            </div>
          </div>

          <div>
            <StepLabel>Wagon Layout</StepLabel>
            <div className="mt-2 flex flex-wrap gap-2">
              {new Array(wagons.ft40Wagons).fill(0).map((_, index) => (
                <div
                  key={index}
                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold 
border-primary/30 bg-primary/5 text-primary `}
                >
                  1 × 40ft
                </div>
              ))}
              {new Array(wagons.sharedWagons).fill(0).map((_, index) => (
                <div
                  key={index}
                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold 
 border-amber-300 bg-amber-50 text-amber-700
`}
                >
                  2 × 20ft
                </div>
              ))}
              {wagons.hasOddUnit && (
                <div
                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold border-destructive! bg-destructive/10 text-destructive `}
                >
                  1 × 20ft
                </div>
              )}
            </div>
          </div>

          {wagons.hasOddUnit && (
            <>
              <AlertBox tone="warning">
                <div className="flex items-start gap-2">
                  <div>
                    <p className="font-semibold">Unpaired 20ft Container</p>
                    <p className="mt-1 text-xs">
                      One 20ft container occupies only half a wagon. The wagon
                      will depart once a co-loader is found to fill the
                      remaining slot, which <strong>may delay departure</strong>{" "}
                      beyond the standard lead time.
                    </p>
                  </div>
                </div>
              </AlertBox>
            </>
          )}
        </>
      )}
    </div>
  );
}
