import { Controller, type UseFormReturn } from "react-hook-form";
import { Field, FieldError, Input, Switch } from "@edr/ui-common";
import { type BookingFormValues } from "./schema";
import { StepHeader } from "./shared";

type BookingForm = UseFormReturn<BookingFormValues>;

export function Step3FirstLastMile({ form }: { form: BookingForm }) {
  const firstMileEnabled = form.watch("firstMileEnabled");
  const lastMileEnabled = form.watch("lastMileEnabled");
  const equipmentReturn = form.watch("equipmentReturn");

  return (
    <div className="space-y-6">
      <StepHeader
        title="First & Last Mile"
        description="Configure trucking and container return options."
      />

      <div className="divide-y divide-border rounded-xl border border-border">
        <div className="p-4">
          <Controller
            name="firstMileEnabled"
            control={form.control}
            render={({ field }) => (
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-sm font-medium">First Mile - Pick-up</p>
                  <p className="mt-0.5 text-xs text-muted-foreground">
                    Truck pick-up from your premises (Door to Port) to the
                    origin rail yard.
                  </p>
                </div>
                <Switch
                  checked={field.value}
                  onCheckedChange={(value) => {
                    field.onChange(value);
                    if (!value) {
                      form.setValue("pickUpAddress", "", {
                        shouldDirty: true,
                        shouldValidate: true,
                      });
                    }
                  }}
                />
              </div>
            )}
          />
          {firstMileEnabled && (
            <Controller
              name="pickUpAddress"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field className="mt-3" data-invalid={fieldState.invalid}>
                  <Input
                    {...field}
                    aria-invalid={fieldState.invalid}
                    placeholder="Pick-up address *"
                  />
                  <FieldError errors={[fieldState.error]} />
                </Field>
              )}
            />
          )}
        </div>

        <div className="p-4">
          <Controller
            name="lastMileEnabled"
            control={form.control}
            render={({ field }) => (
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-sm font-medium">Last Mile - Delivery</p>
                  <p className="mt-0.5 text-xs text-muted-foreground">
                    Truck delivery from the destination rail yard to the final
                    address (Port to Door).
                  </p>
                </div>
                <Switch
                  checked={field.value}
                  onCheckedChange={(value) => {
                    field.onChange(value);
                    if (!value) {
                      form.setValue("deliveryAddress", "", {
                        shouldDirty: true,
                        shouldValidate: true,
                      });
                    }
                  }}
                />
              </div>
            )}
          />
          {lastMileEnabled && (
            <Controller
              name="deliveryAddress"
              control={form.control}
              render={({ field, fieldState }) => (
                <Field className="mt-3" data-invalid={fieldState.invalid}>
                  <Input
                    {...field}
                    aria-invalid={fieldState.invalid}
                    placeholder="Delivery address *"
                  />
                  <FieldError errors={[fieldState.error]} />
                </Field>
              )}
            />
          )}

          {lastMileEnabled && (
            <div className="mt-4 border-t border-border pt-4">
              <Controller
                name="equipmentReturn"
                control={form.control}
                render={({ field }) => (
                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <p className="text-sm font-medium">Equipment Return</p>
                      <p className="mt-0.5 text-xs text-muted-foreground">
                        {field.value === "with_return"
                          ? "Container returned to EDR after unloading."
                          : "Container retained by the customer after delivery."}
                      </p>
                    </div>
                    <Switch
                      checked={field.value === "with_return"}
                      onCheckedChange={(value) => {
                        field.onChange(
                          value ? "with_return" : "without_return",
                        );
                      }}
                    />
                  </div>
                )}
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
