import { Controller, type UseFormReturn } from "react-hook-form";
import { FileText, RefreshCw } from "lucide-react";
import { Field } from "@edr/ui-common";
import {
  BookingFormInputValues,
  MOCK_VALID_CONTRACTS,
  type BookingFormValues,
} from "./schema";
import {
  AlertBox,
  OptionCard,
  OptionFieldError,
  SelectField,
  SelectItem,
  StepHeader,
} from "./shared";

type BookingForm = UseFormReturn<
  BookingFormInputValues,
  any,
  BookingFormValues
>;

export function Step1ContractType({ form }: { form: BookingForm }) {
  const contractType = form.watch("contractType");
  const previousContractRef = form.watch("previousContractRef");

  return (
    <div className="space-y-6">
      <StepHeader
        title="Contract Type"
        description="New contract or renewal of an existing one."
      />

      <Controller
        name="contractType"
        control={form.control}
        render={({ field, fieldState }) => (
          <Field data-invalid={fieldState.invalid}>
            <div className="grid gap-3 md:grid-cols-2">
              <OptionCard
                selected={field.value === "new"}
                onClick={() => {
                  field.onChange("new");
                  form.clearErrors(["contractType", "previousContractRef"]);
                  form.setValue("previousContractRef", "");
                }}
              >
                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
                  <FileText className="h-4 w-4 text-primary" />
                </div>
                <p className="font-semibold">New Contract</p>
                <p className="mt-0.5 text-xs text-muted-foreground">
                  Create a new contract.
                </p>
              </OptionCard>

              <OptionCard
                selected={field.value === "renewal"}
                onClick={() => {
                  field.onChange("renewal");
                  form.clearErrors("contractType");
                }}
              >
                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100">
                  <RefreshCw className="h-4 w-4 text-sky-600" />
                </div>
                <p className="font-semibold">Contract Renewal</p>
                <p className="mt-0.5 text-xs text-muted-foreground">
                  Select a previous reference to auto-populate historical
                  parameters.
                </p>
              </OptionCard>
            </div>
            <OptionFieldError error={fieldState.error} />
          </Field>
        )}
      />

      {contractType === "renewal" && (
        <div className="space-y-3 pt-1">
          <Controller
            name="previousContractRef"
            control={form.control}
            render={({ field, fieldState }) => (
              <SelectField
                field={field}
                error={fieldState.error}
                label="Previous Contract Reference Number"
                placeholder="Select a contract..."
              >
                {MOCK_VALID_CONTRACTS.map((ref) => (
                  <SelectItem key={ref} value={ref}>
                    {ref}
                  </SelectItem>
                ))}
              </SelectField>
            )}
          />
          {previousContractRef && (
            <AlertBox tone="success">
              <strong>Contract found.</strong> Company details, route, and wagon
              preferences will be pre-filled.
            </AlertBox>
          )}
        </div>
      )}
    </div>
  );
}
