import React from "react";
import {
  Paper,
  Stack,
  TextInput,
  Textarea,
  Select,
  Switch,
  Group,
  Text,
  NumberInput,
} from "@mantine/core";
import type { ResortGrade } from "@/lib/features/resorts/types";

interface ResortGeneralPanelProps {
  name: string;
  setName: (val: string) => void;
  code: string;
  setCode: (val: string) => void;
  description: string;
  setDescription: (val: string) => void;
  grade: ResortGrade | null;
  setGrade: (val: ResortGrade | null) => void;
  isActive: boolean;
  setIsActive: (val: boolean) => void;
  adultAgeFrom: number | "";
  setAdultAgeFrom: (val: number | "") => void;
  adultAgeTo: number | "";
  setAdultAgeTo: (val: number | "") => void;
  childrenAgeFrom: number | "";
  setChildrenAgeFrom: (val: number | "") => void;
  childrenAgeTo: number | "";
  setChildrenAgeTo: (val: number | "") => void;
  infantAgeFrom: number | "";
  setInfantAgeFrom: (val: number | "") => void;
  infantAgeTo: number | "";
  setInfantAgeTo: (val: number | "") => void;
  canEdit: boolean;
  sectionTitle: (title: string) => React.ReactNode;
}

export const ResortGeneralPanel: React.FC<ResortGeneralPanelProps> = ({
  name,
  setName,
  code,
  setCode,
  description,
  setDescription,
  grade,
  setGrade,
  isActive,
  setIsActive,
  adultAgeFrom,
  setAdultAgeFrom,
  adultAgeTo,
  setAdultAgeTo,
  childrenAgeFrom,
  setChildrenAgeFrom,
  childrenAgeTo,
  setChildrenAgeTo,
  infantAgeFrom,
  setInfantAgeFrom,
  infantAgeTo,
  setInfantAgeTo,
  canEdit,
  sectionTitle,
}) => {
  return (
    <Stack gap="xl">
      {/* SECTION 1 — Meta Information */}
      <Paper withBorder radius="md" p="lg">
        {sectionTitle("Section 1 — Resort Meta Information")}
        <Stack gap="md">
          <TextInput
            label="Resort Name"
            placeholder="e.g. Karma Kandara"
            value={name}
            onChange={(e) => setName(e.currentTarget.value)}
            required
            disabled
            style={{ maxWidth: 480 }}
          />
          <TextInput
            label="Resort Code"
            placeholder="Internal reference code"
            value={code}
            onChange={(e) => setCode(e.currentTarget.value)}
            disabled
            style={{ maxWidth: 320 }}
          />
          <div>
            <Text size="sm" fw={500} mb={4}>
              Description
            </Text>
            <div>
              <Textarea
                placeholder="Enter resort description"
                value={description}
                onChange={(e) => setDescription(e.currentTarget.value)}
                minRows={4}
                disabled
                style={{ fontFamily: "Outfit, Inter, sans-serif" }}
                autosize
              />
            </div>
          </div>
        </Stack>
      </Paper>

      {/* SECTION 2 — Grade & Classification */}
      <Paper withBorder radius="md" p="lg">
        {sectionTitle("Section 2 — Grade & Classification")}
        <Group gap="xl">
          <Select
            label="Grade"
            placeholder="Select grade"
            data={[
              { value: "PLATINUM", label: "Platinum" },
              { value: "EMERALD", label: "Emerald" },
              { value: "TITANIUM", label: "Titanium" },
              { value: "SILVER", label: "Silver" },
            ]}
            value={grade}
            onChange={(val) => setGrade(val as ResortGrade | null)}
            clearable
            disabled={!canEdit}
            style={{ width: 200 }}
          />
          <Switch
            label="Is Active"
            description="When active, resort is visible to the booking engine"
            checked={isActive}
            onChange={(e) => setIsActive(e.currentTarget.checked)}
            disabled={!canEdit}
          />
        </Group>
      </Paper>

      {/* SECTION 3 — Age Range Configuration */}
      <Paper withBorder radius="md" p="lg">
        {sectionTitle("Section 3 — Age Range Configuration")}
        <Stack gap="sm">
          <Group gap="md">
            <Text size="sm" fw={500} w={120}>
              Adult
            </Text>
            <NumberInput
              label="Age From"
              placeholder="18"
              value={adultAgeFrom}
              onChange={(v) => setAdultAgeFrom(v as any)}
              readOnly={!canEdit}
              min={0}
              style={{ width: 120 }}
            />
            <NumberInput
              label="Age To"
              placeholder="99"
              value={adultAgeTo}
              onChange={(v) => setAdultAgeTo(v as any)}
              readOnly={!canEdit}
              min={0}
              style={{ width: 120 }}
            />
          </Group>
          <Group gap="md">
            <Text size="sm" fw={500} w={120}>
              Children
            </Text>
            <NumberInput
              label="Age From"
              placeholder="3"
              value={childrenAgeFrom}
              onChange={(v) => setChildrenAgeFrom(v as any)}
              readOnly={!canEdit}
              min={0}
              style={{ width: 120 }}
            />
            <NumberInput
              label="Age To"
              placeholder="17"
              value={childrenAgeTo}
              onChange={(v) => setChildrenAgeTo(v as any)}
              readOnly={!canEdit}
              min={0}
              style={{ width: 120 }}
            />
          </Group>
          <Group gap="md">
            <Text size="sm" fw={500} w={120}>
              Infant
            </Text>
            <NumberInput
              label="Age From"
              placeholder="0"
              value={infantAgeFrom}
              onChange={(v) => setInfantAgeFrom(v as any)}
              readOnly={!canEdit}
              min={0}
              style={{ width: 120 }}
            />
            <NumberInput
              label="Age To"
              placeholder="2"
              value={infantAgeTo}
              onChange={(v) => setInfantAgeTo(v as any)}
              readOnly={!canEdit}
              min={0}
              style={{ width: 120 }}
            />
          </Group>
        </Stack>
      </Paper>
    </Stack>
  );
};