import React from "react";
import {
  Paper,
  Stack,
  TextInput,
  Select,
  ActionIcon,
  Button,
  Group,
  Text,
} from "@mantine/core";
import { DateInput } from "@mantine/dates";
import { IconPlus, IconTrash } from "@tabler/icons-react";
import type { DateRangeEntry, OpenClosePeriod } from "@/lib/features/resorts/types";

interface ResortPeriodsPanelProps {
  peakPeriods: DateRangeEntry[];
  setPeakPeriods: React.Dispatch<React.SetStateAction<DateRangeEntry[]>>;
  blackoutPeriods: DateRangeEntry[];
  setBlackoutPeriods: React.Dispatch<React.SetStateAction<DateRangeEntry[]>>;
  openClosePeriods: OpenClosePeriod[];
  setOpenClosePeriods: React.Dispatch<React.SetStateAction<OpenClosePeriod[]>>;
  canEdit: boolean;
  sectionTitle: (title: string) => React.ReactNode;
}

export const ResortPeriodsPanel: React.FC<ResortPeriodsPanelProps> = ({
  peakPeriods,
  setPeakPeriods,
  blackoutPeriods,
  setBlackoutPeriods,
  openClosePeriods,
  setOpenClosePeriods,
  canEdit,
  sectionTitle,
}) => {
  const newDateRange = (): DateRangeEntry => {
    return { id: crypto.randomUUID(), label: "", start_date: "", end_date: "" };
  };

  const newOpenClosePeriod = (): OpenClosePeriod => {
    return { id: crypto.randomUUID(), label: "", period_type: "ONE_OFF", start_date: "", end_date: "" };
  };

  const updateDateRange = (
    setter: React.Dispatch<React.SetStateAction<DateRangeEntry[]>>,
    id: string,
    field: keyof DateRangeEntry,
    val: any
  ) => setter((prev) => prev.map((d) => (d.id === id ? { ...d, [field]: val } : d)));

  const removeDateRange = (
    setter: React.Dispatch<React.SetStateAction<DateRangeEntry[]>>,
    id: string
  ) => setter((prev) => prev.filter((d) => d.id !== id));

  const updateOpenClose = (id: string, field: keyof OpenClosePeriod, val: any) =>
    setOpenClosePeriods((prev) => prev.map((p) => (p.id === id ? { ...p, [field]: val } : p)));

  return (
    <Stack gap="xl">
      {/* SECTION 5 — Peak Periods */}
      <Paper withBorder radius="md" p="lg">
        {sectionTitle("Section 5 — Peak Periods")}
        <Stack gap="sm">
          {peakPeriods.map((d) => (
            <Group key={d.id} gap="sm" align="flex-end">
              <TextInput
                label="Label"
                placeholder="e.g. Summer Peak"
                value={d.label ?? ""}
                onChange={(e) => updateDateRange(setPeakPeriods, d.id, "label", e.currentTarget.value)}
                readOnly={!canEdit}
                style={{ width: 200 }}
                size="sm"
              />
              <DateInput
                label="Start Date"
                placeholder="DD/MM/YYYY"
                value={d.start_date ? new Date(d.start_date) : null}
                onChange={(v) => updateDateRange(setPeakPeriods, d.id, "start_date", v ?? "")}
                readOnly={!canEdit}
                size="sm"
                valueFormat="DD/MM/YYYY"
              />
              <DateInput
                label="End Date"
                placeholder="DD/MM/YYYY"
                value={d.end_date ? new Date(d.end_date) : null}
                onChange={(v) => updateDateRange(setPeakPeriods, d.id, "end_date", v ?? "")}
                readOnly={!canEdit}
                size="sm"
                valueFormat="DD/MM/YYYY"
              />
              {canEdit && (
                <ActionIcon
                  color="red"
                  variant="subtle"
                  size="sm"
                  mb={4}
                  onClick={() => removeDateRange(setPeakPeriods, d.id)}
                >
                  <IconTrash size={14} />
                </ActionIcon>
              )}
            </Group>
          ))}
          {canEdit && (
            <Button
              variant="subtle"
              leftSection={<IconPlus size={14} />}
              size="sm"
              onClick={() => setPeakPeriods((p) => [...p, newDateRange()])}
            >
              Add Peak Period
            </Button>
          )}
          {peakPeriods.length === 0 && <Text size="sm" c="dimmed">No peak periods defined.</Text>}
        </Stack>
      </Paper>

      {/* SECTION 6 — Blackout Periods */}
      <Paper withBorder radius="md" p="lg">
        {sectionTitle("Section 6 — Blackout Periods")}
        <Stack gap="sm">
          {blackoutPeriods.map((d) => (
            <Group key={d.id} gap="sm" align="flex-end">
              <TextInput
                label="Label"
                placeholder="e.g. Maintenance closure"
                value={d.label ?? ""}
                onChange={(e) => updateDateRange(setBlackoutPeriods, d.id, "label", e.currentTarget.value)}
                readOnly={!canEdit}
                style={{ width: 200 }}
                size="sm"
              />
              <DateInput
                label="Start Date"
                placeholder="DD/MM/YYYY"
                value={d.start_date ? new Date(d.start_date) : null}
                onChange={(v) => updateDateRange(setBlackoutPeriods, d.id, "start_date", v ?? "")}
                readOnly={!canEdit}
                size="sm"
                valueFormat="DD/MM/YYYY"
              />
              <DateInput
                label="End Date"
                placeholder="DD/MM/YYYY"
                value={d.end_date ? new Date(d.end_date) : null}
                onChange={(v) => updateDateRange(setBlackoutPeriods, d.id, "end_date", v ?? "")}
                readOnly={!canEdit}
                size="sm"
                valueFormat="DD/MM/YYYY"
              />
              {canEdit && (
                <ActionIcon
                  color="red"
                  variant="subtle"
                  size="sm"
                  mb={4}
                  onClick={() => removeDateRange(setBlackoutPeriods, d.id)}
                >
                  <IconTrash size={14} />
                </ActionIcon>
              )}
            </Group>
          ))}
          {canEdit && (
            <Button
              variant="subtle"
              leftSection={<IconPlus size={14} />}
              size="sm"
              onClick={() => setBlackoutPeriods((p) => [...p, newDateRange()])}
            >
              Add Blackout Period
            </Button>
          )}
          {blackoutPeriods.length === 0 && <Text size="sm" c="dimmed">No blackout periods defined.</Text>}
        </Stack>
      </Paper>

      {/* SECTION 7 — Open & Close Periods */}
      <Paper withBorder radius="md" p="lg">
        {sectionTitle("Section 7 — Open & Close Periods")}
        <Stack gap="md">
          {openClosePeriods.map((p) => (
            <Paper key={p.id} withBorder radius="sm" p="sm">
              <Group gap="sm" align="flex-end" wrap="wrap">
                <TextInput
                  label="Label"
                  placeholder="e.g. Winter Closure"
                  value={p.label ?? ""}
                  onChange={(e) => updateOpenClose(p.id, "label", e.currentTarget.value)}
                  readOnly={!canEdit}
                  style={{ width: 200 }}
                  size="sm"
                />
                <Select
                  label="Period Type"
                  data={[
                    { value: "ONE_OFF", label: "One-Off" },
                    { value: "RECURRING_ANNUAL", label: "Recurring Annual" },
                  ]}
                  value={p.period_type}
                  onChange={(v) => updateOpenClose(p.id, "period_type", v ?? "ONE_OFF")}
                  disabled={!canEdit}
                  size="sm"
                  style={{ width: 180 }}
                />
                {p.period_type === "ONE_OFF" ? (
                  <>
                    <DateInput
                      label="Start Date"
                      placeholder="DD/MM/YYYY"
                      value={p.start_date ? new Date(p.start_date) : null}
                      onChange={(v) => updateOpenClose(p.id, "start_date", v ?? "")}
                      readOnly={!canEdit}
                      size="sm"
                      valueFormat="DD/MM/YYYY"
                    />
                    <DateInput
                      label="End Date"
                      placeholder="DD/MM/YYYY"
                      value={p.end_date ? new Date(p.end_date) : null}
                      onChange={(v) => updateOpenClose(p.id, "end_date", v ?? "")}
                      readOnly={!canEdit}
                      size="sm"
                      valueFormat="DD/MM/YYYY"
                    />
                  </>
                ) : (
                  <>
                    <TextInput
                      label="Start (MM-DD)"
                      placeholder="01-15"
                      value={p.start_month_day ?? ""}
                      onChange={(e) => updateOpenClose(p.id, "start_month_day", e.currentTarget.value)}
                      readOnly={!canEdit}
                      size="sm"
                      style={{ width: 120 }}
                    />
                    <TextInput
                      label="End (MM-DD)"
                      placeholder="03-31"
                      value={p.end_month_day ?? ""}
                      onChange={(e) => updateOpenClose(p.id, "end_month_day", e.currentTarget.value)}
                      readOnly={!canEdit}
                      size="sm"
                      style={{ width: 120 }}
                    />
                  </>
                )}
                {canEdit && (
                  <ActionIcon
                    color="red"
                    variant="subtle"
                    size="sm"
                    mb={4}
                    onClick={() => setOpenClosePeriods((prev) => prev.filter((x) => x.id !== p.id))}
                  >
                    <IconTrash size={14} />
                  </ActionIcon>
                )}
              </Group>
            </Paper>
          ))}
          {canEdit && (
            <Button
              variant="subtle"
              leftSection={<IconPlus size={14} />}
              size="sm"
              onClick={() => setOpenClosePeriods((prev) => [...prev, newOpenClosePeriod()])}
            >
              Add Period
            </Button>
          )}
          {openClosePeriods.length === 0 && <Text size="sm" c="dimmed">No open/close periods defined.</Text>}
        </Stack>
      </Paper>
    </Stack>
  );
};