import {
  TextInput,
  Select,
  Stack,
  Grid,
  Text,
  NumberInput,
} from "@mantine/core";
import { Controller, type Control, type FieldErrors } from "react-hook-form";
import type { CreateBookingFormData } from "@/lib/features/bookings/createBooking.types";

interface PaymentSectionProps {
  control: Control<CreateBookingFormData>;
  errors: FieldErrors<CreateBookingFormData>;
  watch: any;
}

const PaymentSection: React.FC<PaymentSectionProps> = ({
  control,
  errors,
  watch,
}) => {
  const PAYMENT_METHODS = [
    { value: "CREDIT_CARD", label: "Credit Card" },
    { value: "DEBIT_CARD", label: "Debit Card" },
    { value: "NET_BANKING", label: "Net Banking" },
    { value: "UPI", label: "UPI" },
    { value: "WALLET", label: "Wallet" },
  ];

  const GATEWAYS = [
    { value: "EasyPay", label: "EasyPay" },
    { value: "Razorpay", label: "Razorpay" },
    { value: "PayU", label: "PayU" },
    { value: "CCAvenue", label: "CCAvenue" },
  ];

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

  return (
    <Stack gap="md">
      <div>
        <Text fw={600} mb="sm">
          Payment Details
        </Text>

        <Grid>
          <Grid.Col span={{ base: 12, sm: 6 }}>
            <Controller
              name="paymentDetails.amount"
              control={control}
              rules={{
                required: "Payment amount is required",
                min: { value: 0, message: "Amount must be greater than 0" },
              }}
              render={({ field }) => (
                <NumberInput
                  {...field}
                  label="Amount"
                  placeholder="0"
                  min={0}
                  decimalScale={2}
                  fixedDecimalScale
                  error={errors.paymentDetails?.amount?.message}
                  required
                />
              )}
            />
          </Grid.Col>

          <Grid.Col span={{ base: 12, sm: 6 }}>
            <Controller
              name="paymentDetails.currency"
              control={control}
              rules={{
                required: "Currency is required",
              }}
              render={({ field }) => (
                <Select
                  {...field}
                  label="Currency"
                  placeholder="INR"
                  data={CURRENCIES}
                  error={errors.paymentDetails?.currency?.message}
                  required
                />
              )}
            />
          </Grid.Col>
        </Grid>

        <Grid mt="md">
          <Grid.Col span={{ base: 12, sm: 6 }}>
            <Controller
              name="paymentDetails.method_name"
              control={control}
              rules={{
                required: "Payment method is required",
              }}
              render={({ field }) => (
                <Select
                  {...field}
                  label="Payment Method"
                  placeholder="Select payment method"
                  data={PAYMENT_METHODS}
                  error={errors.paymentDetails?.method_name?.message}
                  required
                />
              )}
            />
          </Grid.Col>

          <Grid.Col span={{ base: 12, sm: 6 }}>
            <Controller
              name="paymentDetails.gateway_name"
              control={control}
              rules={{
                required: "Gateway name is required",
              }}
              render={({ field }) => (
                <Select
                  {...field}
                  label="Payment Gateway"
                  placeholder="Select gateway"
                  data={GATEWAYS}
                  error={errors.paymentDetails?.gateway_name?.message}
                  required
                />
              )}
            />
          </Grid.Col>
        </Grid>

        <Grid mt="md">
          <Grid.Col span={{ base: 12, sm: 6 }}>
            <Controller
              name="paymentDetails.ref_id"
              control={control}
              rules={{
                required: "Payment reference ID is required",
              }}
              render={({ field }) => (
                <TextInput
                  {...field}
                  label="Payment Reference ID"
                  placeholder="e.g., pay_S0TghLe9by"
                  error={errors.paymentDetails?.ref_id?.message}
                  required
                />
              )}
            />
          </Grid.Col>
        </Grid>
      </div>

      <div>
        <Text fw={600} mb="sm">
          Summary
        </Text>
        <Grid>
          <Grid.Col span={{ base: 12, sm: 6 }}>
            <Text size="sm" c="dimmed">
              Total Amount
            </Text>
            <Text fw={700} fz={18}>
              {watch("paymentDetails.currency")} {watch("paymentDetails.amount")}
            </Text>
          </Grid.Col>
        </Grid>
      </div>
    </Stack>
  );
};

export default PaymentSection;