import { Controller, type UseFormReturn } from "react-hook-form";
import {
  ArrowDownToLine,
  ArrowUpFromLine,
  PackageCheck,
  PackageOpen,
  Truck,
} from "lucide-react";
import { Text } from "@mantine/core";
import {
  BookingFormInputValues,
  type BookingFormValues,
  type OperationType,
} from "./schema";
import {
  AlertBox,
  OptionCard,
  OptionFieldError,
  StepCard,
  StepHeader,
} from "./shared";

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

const OPTIONS: Array<{
  value: OperationType;
  title: string;
  description: string;
  icon: React.ReactNode;
  iconBg: string;
  iconColor: string;
}> = [
  {
    value: "import",
    title: "Import",
    description: "Cargo arriving into Ethiopia via Djibouti.",
    icon: <ArrowDownToLine className="h-5 w-5" />,
    iconBg: "#ECF6F1",
    iconColor: "#0A6F4D",
  },
  {
    value: "export",
    title: "Export",
    description: "Cargo leaving Ethiopia bound for Djibouti.",
    icon: <ArrowUpFromLine className="h-5 w-5" />,
    iconBg: "#EAF1FB",
    iconColor: "#2E5B96",
  },
  {
    value: "intercity",
    title: "Intercity",
    description: "Domestic movement between Ethiopian yards.",
    icon: <Truck className="h-5 w-5" />,
    iconBg: "#F1ECFB",
    iconColor: "#6A40B8",
  },
  {
    value: "import_ff",
    title: "Import as FF",
    description: "Import handled on behalf of a client as a freight forwarder.",
    icon: <PackageOpen className="h-5 w-5" />,
    iconBg: "#ECF6F1",
    iconColor: "#0A6F4D",
  },
  {
    value: "export_ff",
    title: "Export as FF",
    description: "Export handled on behalf of a client as a freight forwarder.",
    icon: <PackageCheck className="h-5 w-5" />,
    iconBg: "#EAF1FB",
    iconColor: "#2E5B96",
  },
];

export function Step0OperationType({
  form,
  allowedOperations,
  onSelect,
}: {
  form: BookingForm;
  allowedOperations: OperationType[];
  onSelect?: (op: OperationType) => void;
}) {
  return (
    <StepCard>
      <StepHeader
        icon={<Truck size={22} />}
        title="Operation Type"
        description="Choose what this booking is for. The options available reflect the operations your company is registered for."
      />

      {allowedOperations.length === 0 && (
        <AlertBox tone="error">
          Your company has no operational profile yet. Complete onboarding to
          register as an importer, exporter, or freight forwarder.
        </AlertBox>
      )}

      <Controller
        name="operationType"
        control={form.control}
        render={({ field, fieldState }) => (
          <div>
            <div className="grid gap-4 md:grid-cols-3">
              {OPTIONS.filter((opt) =>
                allowedOperations.includes(opt.value),
              ).map((opt) => (
                <OptionCard
                  key={opt.value}
                  selected={field.value === opt.value}
                  icon={opt.icon}
                  iconBg={opt.iconBg}
                  iconColor={opt.iconColor}
                  title={opt.title}
                  description={opt.description}
                  onClick={() => {
                    field.onChange(opt.value);
                    onSelect?.(opt.value);
                  }}
                />
              ))}
            </div>
            <OptionFieldError error={fieldState.error} />
          </div>
        )}
      />

      <Text fz={12} c="edr-muted" mt={14}>
        Import and Export are stamped to your matching company profile; their
        documents are attached automatically at submission.
      </Text>
    </StepCard>
  );
}
