import {
  Button,
  Card,
  Grid,
  Select,
  Stack,
  Text,
  ActionIcon,
  Group,
  NumberInput,
} from "@mantine/core";
import {
  Controller,
  type Control,
  type FieldErrors,
  type FieldError,
  useFieldArray,
} from "react-hook-form";
import {
  CHARGE_NAME_OPTIONS,
  CHARGE_TYPE_SELECT_OPTIONS,
  createDefaultCharge,
  type CreateBookingFormData,
} from "@/lib/features/bookings/createBooking.types";
import { IconTrash, IconPlus } from "@tabler/icons-react";

const getMsg = (e: unknown) => (e as FieldError | undefined)?.message;

interface ChargesFormProps {
  unitIndex: number;
  control: Control<CreateBookingFormData>;
  errors: FieldErrors<CreateBookingFormData>;
}

const ChargesForm: React.FC<ChargesFormProps> = ({
  unitIndex,
  control,
  errors,
}) => {
  const {
    fields: chargeFields,
    append: appendCharge,
    remove: removeCharge,
  } = useFieldArray({
    control,
    name: `units.${unitIndex}.charges`,
  });

  const CURRENCIES = [
    { value: "INR", label: "INR" },
    { value: "USD", label: "USD" },
    { value: "EUR", label: "EUR" },
    { value: "", label: "Default" },
  ];

  const handleAddCharge = () => {
    appendCharge(createDefaultCharge("ADDITIONAL_CHARGE"));
  };

  return (
    <div>
      <Group justify="space-between" mb="sm">
        <div>
          <Text fw={500}>Charges</Text>
          <Text size="sm" c="dimmed">
            Add applicable charges
          </Text>
        </div>
        <Button
          size="sm"
          variant="light"
          leftSection={<IconPlus size={16} />}
          onClick={handleAddCharge}
        >
          Add Charge
        </Button>
      </Group>

      <Stack gap="sm">
        {chargeFields.map((charge, chargeIndex) => (
          <Card key={charge.id} p="md" radius="md" withBorder>
            <Stack gap="md">
              <Group justify="space-between">
                <Text fw={500} size="sm">
                  Charge {chargeIndex + 1}
                </Text>
                <ActionIcon
                  color="red"
                  variant="subtle"
                  size="sm"
                  onClick={() => removeCharge(chargeIndex)}
                >
                  <IconTrash size={16} />
                </ActionIcon>
              </Group>

              <Grid>
                <Grid.Col span={{ base: 12, sm: 6 }}>
                  <Controller
                    name={`units.${unitIndex}.charges.${chargeIndex}.type`}
                    control={control}
                    rules={{ required: "Charge type is required" }}
                    render={({ field }) => (
                      <Select
                        {...field}
                        label="Charge Type"
                        placeholder="Select charge type"
                        data={CHARGE_TYPE_SELECT_OPTIONS}
                        error={getMsg(
                          errors.units?.[unitIndex]?.charges?.[chargeIndex]
                            ?.type,
                        )}
                        required
                      />
                    )}
                  />
                </Grid.Col>

                <Grid.Col span={{ base: 12, sm: 6 }}>
                  <Controller
                    name={`units.${unitIndex}.charges.${chargeIndex}.name`}
                    control={control}
                    rules={{ required: "Charge name is required" }}
                    render={({ field }) => (
                      <Select
                        {...field}
                        label="Charge Name"
                        placeholder="Select charge name"
                        data={CHARGE_NAME_OPTIONS}
                        error={
                          errors.units?.[unitIndex]?.charges?.[chargeIndex]
                            ?.name?.message
                        }
                        required
                      />
                    )}
                  />
                </Grid.Col>
              </Grid>

              <Grid>
                <Grid.Col span={{ base: 12, sm: 6 }}>
                  <Controller
                    name={`units.${unitIndex}.charges.${chargeIndex}.value`}
                    control={control}
                    rules={{
                      required: "Charge value is required",
                      min: { value: 0, message: "Value must be 0 or more" },
                    }}
                    render={({ field }) => (
                      <NumberInput
                        {...field}
                        label="Value"
                        placeholder="0"
                        min={0}
                        decimalScale={2}
                        fixedDecimalScale
                        error={
                          errors.units?.[unitIndex]?.charges?.[chargeIndex]
                            ?.value?.message
                        }
                        required
                      />
                    )}
                  />
                </Grid.Col>

                <Grid.Col span={{ base: 12, sm: 6 }}>
                  <Controller
                    name={`units.${unitIndex}.charges.${chargeIndex}.currency`}
                    control={control}
                    render={({ field }) => (
                      <Select
                        {...field}
                        label="Currency"
                        placeholder="INR"
                        data={CURRENCIES}
                      />
                    )}
                  />
                </Grid.Col>
              </Grid>
            </Stack>
          </Card>
        ))}

        {chargeFields.length === 0 && (
          <Text size="sm" c="dimmed" ta="center" py="md">
            No charges added. Click "Add Charge" to add charges.
          </Text>
        )}
      </Stack>
    </div>
  );
};

export default ChargesForm;