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

interface MemberSectionProps {
  control: Control<CreateBookingFormData>;
  errors: FieldErrors<CreateBookingFormData>;
}

const MemberSection: React.FC<MemberSectionProps> = ({ control, errors }) => {
  const PARTNERS = [
    { value: "RCI", label: "RCI" },
    { value: "OTHER", label: "Other" },
  ];

  const INVENTORY_TYPES = [
    { value: "EXCHANGE", label: "Exchange" },
    { value: "RENTAL", label: "Rental" },
  ];

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

        <Grid>
          <Grid.Col span={{ base: 12, sm: 6 }}>
            <Controller
              name="memberRecordID"
              control={control}
              rules={{
                required: "Member Record ID is required",
              }}
              render={({ field }) => (
                <TextInput
                  {...field}
                  label="Member Record ID"
                  placeholder="Enter member record ID"
                  error={errors.memberRecordID?.message}
                  required
                />
              )}
            />
          </Grid.Col>
        </Grid>
      </div>

      <div>
        <Text fw={600} mb="sm">
          Resort Information
        </Text>

        <Grid>
          <Grid.Col span={{ base: 12, sm: 6 }}>
            <Controller
              name="resort.rciResortCode"
              control={control}
              rules={{
                required: "Resort Code is required",
              }}
              render={({ field }) => (
                <TextInput
                  {...field}
                  label="Resort Code"
                  placeholder="e.g., D552"
                  error={errors.resort?.rciResortCode?.message}
                  required
                />
              )}
            />
          </Grid.Col>

          <Grid.Col span={{ base: 12, sm: 6 }}>
            <Controller
              name="resort.additionalData.partner"
              control={control}
              rules={{
                required: "Partner is required",
              }}
              render={({ field }) => (
                <Select
                  {...field}
                  label="Partner"
                  placeholder="Select partner"
                  data={PARTNERS}
                  error={errors.resort?.additionalData?.partner?.message}
                  required
                />
              )}
            />
          </Grid.Col>
        </Grid>
      </div>

      <div>
        <Text fw={600} mb="sm">
          Booking Configuration
        </Text>

        <Grid>
          <Grid.Col span={{ base: 12, sm: 6 }}>
            <Controller
              name="inventoryType"
              control={control}
              render={({ field }) => (
                <Select
                  {...field}
                  label="Inventory Type"
                  placeholder="Select inventory type"
                  data={INVENTORY_TYPES}
                  required
                />
              )}
            />
          </Grid.Col>

          <Grid.Col span={{ base: 12, sm: 6 }}>
            <Controller
              name="bookingSource"
              control={control}
              render={({ field }) => (
                <TextInput
                  {...field}
                  label="Booking Source"
                  placeholder="Admin Panel"
                  disabled
                />
              )}
            />
          </Grid.Col>
        </Grid>

        <Grid mt="md">
          <Grid.Col span={12}>
            <Controller
              name="note"
              control={control}
              render={({ field }) => (
                <Textarea
                  {...field}
                  label="Additional Notes"
                  placeholder="Enter any additional notes"
                  rows={3}
                />
              )}
            />
          </Grid.Col>
        </Grid>
      </div>
    </Stack>
  );
};

export default MemberSection;