import { Box, Group, Text } from "@mantine/core";
import { Banknote, Check, DollarSign } from "lucide-react";
import { Controller, type Control } from "react-hook-form";
import {
  PAYMENT_CURRENCY_OPTIONS,
  type BookingFormInputValues,
  type BookingFormValues,
  type PaymentCurrency,
} from "./schema";
import { OptionFieldError, StepLabel } from "./shared";

const CURRENCY_ICONS: Record<
  PaymentCurrency,
  { icon: typeof DollarSign; color: string }
> = {
  USD: { icon: DollarSign, color: "#4F46E5" },
  ETB: { icon: Banknote, color: "#0A6F4D" },
};

export function PaymentCurrencyField({
  control,
}: {
  control: Control<BookingFormInputValues, any, BookingFormValues>;
}) {
  return (
    <Box mt={24}>
      <StepLabel>Payment currency</StepLabel>
      <Text fz={12} c="#6B7C8E" mt={4} mb={12}>
        Choose the currency for your freight quote and invoices.
      </Text>
      <Controller
        name="paymentCurrency"
        control={control}
        render={({ field, fieldState }) => (
          <div>
            {/* Compact segmented pill selector — lighter than full option cards. */}
            <Group
              gap={6}
              wrap="nowrap"
              p={4}
              style={{
                borderRadius: 12,
                background: "#F1F4F7",
                border: "1px solid #E6ECF2",
              }}
            >
              {PAYMENT_CURRENCY_OPTIONS.map((option) => {
                const Icon = CURRENCY_ICONS[option.value].icon;
                const selected = field.value === option.value;
                return (
                  <button
                    key={option.value}
                    type="button"
                    onClick={() => field.onChange(option.value)}
                    style={{
                      flex: 1,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      gap: 8,
                      padding: "10px 14px",
                      borderRadius: 9,
                      cursor: "pointer",
                      border: "none",
                      background: selected ? "#fff" : "transparent",
                      boxShadow: selected
                        ? "0 1px 3px rgba(16,32,47,0.10)"
                        : "none",
                      transition: "all 150ms ease",
                    }}
                  >
                    <Box
                      style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        color: selected
                          ? CURRENCY_ICONS[option.value].color
                          : "#94A3B8",
                      }}
                    >
                      <Icon className="h-4 w-4" />
                    </Box>
                    <Text
                      fz={14}
                      fw={selected ? 700 : 600}
                      c={selected ? "#10202F" : "#64748B"}
                    >
                      {option.label}
                    </Text>
                    {selected && (
                      <Check size={15} color={CURRENCY_ICONS[option.value].color} />
                    )}
                  </button>
                );
              })}
            </Group>
            {/* Description for the active currency, kept subtle. */}
            <Text fz={11.5} c="#6B7C8E" mt={8}>
              {
                PAYMENT_CURRENCY_OPTIONS.find((o) => o.value === field.value)
                  ?.description
              }
            </Text>
            <OptionFieldError error={fieldState.error} />
          </div>
        )}
      />
    </Box>
  );
}
