"use client";

import {
  Badge,
  Button,
  Drawer,
  Flex,
  Group,
  Modal,
  Pagination,
  Select,
  Stack,
  Table,
  Text,
  TextInput,
  Title,
  SimpleGrid,
  Card,
  SegmentedControl,
  AspectRatio,
  Image,
  Tooltip,
  Box,
  Paper,
  Divider,
  ActionIcon,
  ThemeIcon,
} from "@mantine/core";
import { useDisclosure, useDebouncedValue } from "@mantine/hooks";
import { notifications } from "@mantine/notifications";
import {
  IconBuilding,
  IconHistory,
  IconPlus,
  IconRefresh,
  IconSearch,
  IconTrash,
  IconEdit,
  IconLayoutGrid,
  IconList,
  IconMapPin,
  IconMail,
  IconPhone,
  IconCheck,
} from "@tabler/icons-react";
import moment from "moment";
import React, { useMemo, useState, useEffect } from "react";
import { useNavigate, useSearchParams } from "react-router";
import {
  deleteResort,
  syncResorts,
  syncResortsJson,
} from "@/lib/features/resorts/action";
import { listResorts } from "@/lib/features/resorts/query";
import type {
  ResortListItem,
  ResortListResponse,
} from "@/lib/features/resorts/types";
import type { AccessScope } from "@/lib/features/types";
import { ResortsLogsPanel } from "./_components/ResortsLogsPanel";

interface Props {
  initialData: ResortListResponse;
  initialError?: string;
  accessScope: AccessScope;
  systemMetrics?: {
    active: number;
    inactive: number;
    grades: Record<string, number>;
  };
}

const GRADE_COLORS: Record<
  string,
  { bg: string; text: string; border: string }
> = {
  PLATINUM: {
    bg: "var(--mantine-color-gray-0)",
    text: "var(--mantine-color-gray-8)",
    border: "var(--mantine-color-gray-3)",
  },
  EMERALD: {
    bg: "var(--mantine-color-gray-0)",
    text: "var(--mantine-color-gray-8)",
    border: "var(--mantine-color-gray-3)",
  },
  TITANIUM: {
    bg: "var(--mantine-color-gray-1)",
    text: "var(--mantine-color-gray-8)",
    border: "var(--mantine-color-gray-3)",
  },
  SILVER: {
    bg: "var(--mantine-color-gray-0)",
    text: "var(--mantine-color-gray-8)",
    border: "var(--mantine-color-gray-3)",
  },
};

const PAGE_SIZE_OPTIONS = ["10", "20", "50"];

const formatResortLocation = (resort: ResortListItem) => {
  const address = resort.address?.trim();
  const stateRegion = resort.state_region?.trim();
  const country = resort.country?.trim();

  if (!address) {
    const parts = [stateRegion, country].filter(Boolean);
    return parts.length > 0 ? parts.join(", ") : "";
  }

  let result = address;

  // Clean trailing commas/dots if any
  result = result.replace(/,\s*$/, "");

  if (
    stateRegion &&
    !result.toLowerCase().includes(stateRegion.toLowerCase())
  ) {
    result = `${result}, ${stateRegion}`;
  }
  if (country && !result.toLowerCase().includes(country.toLowerCase())) {
    result = `${result}, ${country}`;
  }
  return result;
};

export default function ResortsListClientPage({
  initialData,
  initialError,
  accessScope,
  systemMetrics,
}: Props) {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();

  const [items, setItems] = useState<ResortListItem[]>(initialData.items ?? []);
  const [total, setTotal] = useState(initialData.total ?? 0);
  const [loading, setLoading] = useState(false);
  const [syncing, setSyncing] = useState(false);
  const [syncingJson, setSyncingJson] = useState(false);

  // Sync state from loaderData when search params trigger a reload
  useEffect(() => {
    setItems(initialData.items ?? []);
    setTotal(initialData.total ?? 0);
  }, [initialData]);

  // Derived state from URL searchParams
  const page = parseInt(searchParams.get("page") || "1", 10);
  const pageSize = searchParams.get("pageSize") || "20";
  const search = searchParams.get("search") || "";
  const gradeFilter = searchParams.get("grade") || null;
  const statusFilter = searchParams.get("is_active") || null;

  // Local state for search text to allow smooth typing before debouncing
  const [localSearch, setLocalSearch] = useState(search);
  const [debouncedSearch] = useDebouncedValue(localSearch, 300);

  // Sync localSearch state if URL search param changes from outside (e.g. going back)
  useEffect(() => {
    setLocalSearch(search);
  }, [search]);

  // Update query params in URL
  const updateParams = (updates: Record<string, any>) => {
    setLoading(true);
    const newParams = new URLSearchParams(searchParams);

    Object.entries(updates).forEach(([key, value]) => {
      if (value === undefined || value === null || value === "") {
        newParams.delete(key);
      } else {
        newParams.set(key, String(value));
      }
    });

    // Reset to page 1 if we're changing filters/search
    if (
      !updates.page &&
      (updates.search !== undefined ||
        updates.grade !== undefined ||
        updates.is_active !== undefined)
    ) {
      newParams.set("page", "1");
    }

    setSearchParams(newParams);
    setLoading(false);
  };

  // Trigger search parameter update when debounced search value changes
  useEffect(() => {
    if (debouncedSearch !== search) {
      updateParams({ search: debouncedSearch });
    }
  }, [debouncedSearch]);

  const [deleteTarget, setDeleteTarget] = useState<ResortListItem | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [deleteOpened, { open: openDelete, close: closeDelete }] =
    useDisclosure(false);
  const [historyOpened, { open: openHistory, close: closeHistory }] =
    useDisclosure(false);

  const [viewMode, setViewMode] = useState<string>("table");

  // Calculate live dynamic metrics from all items for the dashboard
  const metrics = useMemo(() => {
    if (systemMetrics) return systemMetrics;

    const active = items.filter((r) => r.is_active).length;
    const inactive = items.filter((r) => !r.is_active).length;

    // Count grades
    const grades: Record<string, number> = {
      PLATINUM: 0,
      EMERALD: 0,
      TITANIUM: 0,
      SILVER: 0,
    };
    items.forEach((r) => {
      if (r.grade && r.grade in grades) {
        grades[r.grade]++;
      }
    });

    return { active, inactive, grades };
  }, [items, systemMetrics]);

  const handleSyncResortsJson = async () => {
    setSyncingJson(true);
    try {
      const res = await syncResortsJson();
      if (res.success && res.data) {
        notifications.show({
          color: "green",
          message: `Successfully synced configurations from resort.json: ${res.data.updatedResorts} resorts and ${res.data.updatedUnits} units updated.`,
        });
        navigate(".", { replace: true });
      } else {
        notifications.show({
          color: "red",
          message:
            res.message || "Failed to sync configurations from resort.json",
        });
      }
    } catch {
      notifications.show({
        color: "red",
        message: "Failed to sync configurations from resort.json",
      });
    } finally {
      setSyncingJson(false);
    }
  };

  const handleSyncResorts = async () => {
    setSyncing(true);
    try {
      const res = await syncResorts();
      if (res.success && res.data) {
        notifications.show({
          color: "green",
          message: `Successfully synced ${res.data.synced} resorts from Strapi.`,
        });
        navigate(".", { replace: true });
      } else {
        notifications.show({
          color: "red",
          message: res.message || "Failed to sync resorts",
        });
      }
    } catch {
      notifications.show({
        color: "red",
        message: "An unexpected error occurred during sync",
      });
    } finally {
      setSyncing(false);
    }
  };

  const handleGradeFilter = (val: string | null) => {
    updateParams({ grade: val });
  };

  const handleStatusFilter = (val: string | null) => {
    updateParams({ is_active: val });
  };

  const handlePageChange = (p: number) => {
    updateParams({ page: p });
  };

  const handlePageSizeChange = (ps: string | null) => {
    updateParams({ pageSize: ps || "20", page: 1 });
  };

  const handleDeleteClick = (e: React.MouseEvent, resort: ResortListItem) => {
    e.stopPropagation();
    setDeleteTarget(resort);
    openDelete();
  };

  const handleDeleteConfirm = async () => {
    if (!deleteTarget) return;
    setDeleting(true);
    try {
      const res = await deleteResort(deleteTarget.id);
      if (res.success) {
        notifications.show({ color: "green", message: "Resort deleted" });
        setItems((prev) => prev.filter((r) => r.id !== deleteTarget.id));
        setTotal((t) => t - 1);
        closeDelete();
      } else {
        notifications.show({
          color: "red",
          message: res.message || "Delete failed",
        });
      }
    } catch {
      notifications.show({ color: "red", message: "Delete failed" });
    } finally {
      setDeleting(false);
    }
  };

  const totalPages = Math.ceil(total / parseInt(pageSize, 10));

  return (
    <Stack
      px={28}
      py={20}
      gap="xl"
      style={{
        minHeight: "100%",
        backgroundColor: "var(--mantine-color-gray-0)",
      }}
    >
      {/* Clean Header */}
      <Flex
        justify="space-between"
        align="center"
        direction={{ base: "column", sm: "row" }}
        gap="md"
        mb="xl"
      >
        <Group gap="sm">
          <ThemeIcon size={36} radius="xl" variant="light" color="gray">
            <IconBuilding size={20} style={{ color: "#495057" }} />
          </ThemeIcon>
          <Stack gap={2}>
            <Title
              order={3}
              style={{
                fontFamily: "Outfit, Inter, sans-serif",
                fontWeight: 700,
                color: "#212529",
              }}
            >
              Resort Catalog
            </Title>
            <Text size="xs" c="dimmed">
              Manage resort inventory, metadata, pricing tiers, and room
              classification configurations.
            </Text>
          </Stack>
        </Group>
        <Group gap="xs" wrap="wrap">
          <Button
            variant="light"
            color="gray"
            radius="md"
            size="sm"
            leftSection={<IconHistory size={16} />}
            onClick={openHistory}
          >
            Activity
          </Button>
          <Button
            variant="light"
            color="gray"
            radius="md"
            size="sm"
            leftSection={<IconRefresh size={16} />}
            onClick={() => navigate(".", { replace: true })}
            loading={loading}
          >
            Refresh
          </Button>
          {accessScope.update && (
            <>
              <Button
                variant="light"
                color="gray"
                radius="md"
                size="sm"
                leftSection={<IconRefresh size={16} />}
                onClick={handleSyncResorts}
                loading={syncing}
              >
                Sync Strapi
              </Button>
              {/* <Button variant="light" color="gray" radius="md" size="sm" leftSection={<IconRefresh size={16} />} onClick={handleSyncResortsJson} loading={syncingJson}>
                Sync resort.json
              </Button> */}
            </>
          )}
        </Group>
      </Flex>

      {/* Metrics Dashboard */}
      <SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="md">
        <Paper
          withBorder
          p="lg"
          radius="md"
          style={{
            background: "#ffffff",
            position: "relative",
            overflow: "hidden",
          }}
        >
          <Text size="xs" c="dimmed" tt="uppercase" fw={700} lts={1}>
            Total Resorts
          </Text>
          <Text size="xl" fw={800} mt="xs" c="gray.8">
            {total}
          </Text>
          <Box
            style={{
              position: "absolute",
              bottom: -10,
              right: -10,
              opacity: 0.08,
            }}
          >
            <IconBuilding size={80} />
          </Box>
        </Paper>

        <Paper
          withBorder
          p="lg"
          radius="md"
          style={{
            background: "#ffffff",
            position: "relative",
            overflow: "hidden",
          }}
        >
          <Text size="xs" c="dimmed" tt="uppercase" fw={700} lts={1}>
            Active in System
          </Text>
          <Text size="xl" fw={800} mt="xs" c="gray.8">
            {metrics.active}
          </Text>
          <Box
            style={{
              position: "absolute",
              bottom: -10,
              right: -10,
              opacity: 0.08,
            }}
          >
            <IconCheck size={80} />
          </Box>
        </Paper>

        <Paper
          withBorder
          p="lg"
          radius="md"
          style={{
            background: "#ffffff",
            position: "relative",
            overflow: "hidden",
          }}
        >
          <Text size="xs" c="dimmed" tt="uppercase" fw={700} lts={1}>
            Inactive
          </Text>
          <Text size="xl" fw={800} mt="xs" c="gray.8">
            {metrics.inactive}
          </Text>
          <Box
            style={{
              position: "absolute",
              bottom: -10,
              right: -10,
              opacity: 0.08,
            }}
          >
            <IconTrash size={80} />
          </Box>
        </Paper>

        <Paper
          withBorder
          p="lg"
          radius="md"
          style={{
            background: "#ffffff",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
          }}
        >
          <Text size="xs" c="dimmed" tt="uppercase" fw={700} lts={1} mb="xs">
            Grade Breakdown
          </Text>
          <Group gap="xs" wrap="wrap">
            {Object.keys(GRADE_COLORS).map((gr) => (
              <Tooltip label={`${gr} tier`} key={gr}>
                <Badge
                  style={{
                    backgroundColor: GRADE_COLORS[gr].bg,
                    color: GRADE_COLORS[gr].text,
                    border: `1px solid ${GRADE_COLORS[gr].border}`,
                  }}
                  variant="light"
                  size="sm"
                >
                  {gr.charAt(0) + gr.slice(1).toLowerCase()}:{" "}
                  {metrics.grades[gr] || 0}
                </Badge>
              </Tooltip>
            ))}
          </Group>
        </Paper>
      </SimpleGrid>

      {initialError && (
        <Paper
          withBorder
          p="md"
          radius="md"
          style={{
            backgroundColor: "var(--mantine-color-red-0)",
            borderColor: "var(--mantine-color-red-2)",
          }}
        >
          <Text size="sm" c="red">
            {initialError}
          </Text>
        </Paper>
      )}

      {/* Advanced Filter Panel */}
      <Paper
        withBorder
        radius="md"
        p="md"
        style={{ backgroundColor: "#ffffff" }}
      >
        <Flex justify="space-between" align="center" wrap="wrap" gap="md">
          <Group gap="sm" style={{ flex: 1, minWidth: 280 }}>
            <TextInput
              placeholder="Search by resort name..."
              leftSection={
                <IconSearch
                  size={18}
                  stroke={1.5}
                  color="var(--mantine-color-gray-5)"
                />
              }
              value={localSearch}
              onChange={(e) => setLocalSearch(e.currentTarget.value)}
              size="sm"
              radius="md"
              style={{ flex: 1, maxWidth: 350 }}
            />
            <Select
              placeholder="Filter by Grade"
              data={[
                { value: "PLATINUM", label: "Platinum" },
                { value: "EMERALD", label: "Emerald" },
                { value: "TITANIUM", label: "Titanium" },
                { value: "SILVER", label: "Silver" },
              ]}
              value={gradeFilter}
              onChange={handleGradeFilter}
              clearable
              size="sm"
              radius="md"
              style={{ width: 150 }}
            />
            <Select
              placeholder="Status"
              data={[
                { value: "true", label: "Active" },
                { value: "false", label: "Inactive" },
              ]}
              value={statusFilter}
              onChange={handleStatusFilter}
              clearable
              size="sm"
              radius="md"
              style={{ width: 120 }}
            />
            {(search || gradeFilter || statusFilter) && (
              <Button
                variant="subtle"
                color="red"
                size="sm"
                radius="md"
                onClick={() => {
                  setLocalSearch("");
                  updateParams({
                    search: "",
                    grade: "",
                    is_active: "",
                    page: 1,
                  });
                }}
              >
                Clear Filters
              </Button>
            )}
          </Group>
          <Group gap="xs">
            <Text size="sm" fw={600} c="dimmed">
              View Layout
            </Text>
            <SegmentedControl
              value={viewMode}
              onChange={setViewMode}
              radius="md"
              data={[
                {
                  value: "table",
                  label: (
                    <CenterLabel
                      icon={<IconIconList size={16} />}
                      label="Table"
                    />
                  ),
                },
                {
                  value: "grid",
                  label: (
                    <CenterLabel
                      icon={<IconLayoutGrid size={16} />}
                      label="Grid"
                    />
                  ),
                },
              ]}
            />
          </Group>
        </Flex>
      </Paper>

      {/* Main Content Area */}
      <Stack gap="md">
        {items.length === 0 ? (
          <Paper
            withBorder
            radius="md"
            p="xl"
            style={{ backgroundColor: "#ffffff", textAlign: "center" }}
          >
            <Stack align="center" py="xl" gap="xs">
              <IconBuilding
                size={50}
                opacity={0.2}
                color="var(--mantine-color-gray-6)"
              />
              <Text fw={600} size="md" c="gray.7">
                No resorts matched your criteria.
              </Text>
              <Text size="sm" c="dimmed">
                Try clearing your filters or refreshing to restore the standard
                view.
              </Text>
            </Stack>
          </Paper>
        ) : viewMode === "grid" ? (
          /* Premium Grid View */
          <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
            {items.map((resort) => (
              <Card
                key={resort.id}
                withBorder
                radius="lg"
                p="md"
                shadow="sm"
                style={{
                  backgroundColor: "#ffffff",
                  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
                  cursor: "pointer",
                }}
                className="resort-hover-card"
                onClick={() => navigate(`/admin/resorts/${resort.id}`)}
              >
                {/* Image Section */}
                <Card.Section style={{ position: "relative" }}>
                  {resort.cover_image ? (
                    <AspectRatio ratio={16 / 9}>
                      <Image
                        src={resort.cover_image}
                        fallbackSrc="https://placehold.co/600x400?text=No+Cover+Image"
                        alt={resort.name}
                        style={{
                          borderTopLeftRadius: "12px",
                          borderTopRightRadius: "12px",
                        }}
                      />
                    </AspectRatio>
                  ) : (
                    <AspectRatio ratio={16 / 9}>
                      <Box
                        style={{
                          background: "#f1f3f5",
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                          borderTopLeftRadius: "12px",
                          borderTopRightRadius: "12px",
                        }}
                      >
                        <IconBuilding
                          size={50}
                          color="var(--mantine-color-gray-5)"
                          style={{ opacity: 0.6 }}
                        />
                      </Box>
                    </AspectRatio>
                  )}
                  {/* Status Indicator Badges */}
                  <Box style={{ position: "absolute", top: 12, right: 12 }}>
                    <Badge
                      color={resort.is_active ? "green" : "gray"}
                      variant="filled"
                      size="sm"
                    >
                      {resort.is_active ? "Active" : "Inactive"}
                    </Badge>
                  </Box>
                  {resort.grade && (
                    <Box style={{ position: "absolute", bottom: 12, left: 12 }}>
                      <Badge
                        style={{
                          backgroundColor: "#ffffff",
                          color: GRADE_COLORS[resort.grade]?.text || "gray",
                          border: `1px solid ${GRADE_COLORS[resort.grade]?.border || "var(--mantine-color-gray-3)"}`,
                        }}
                        size="sm"
                        variant="white"
                      >
                        {resort.grade}
                      </Badge>
                    </Box>
                  )}
                </Card.Section>

                {/* Details Section */}
                <Stack gap="sm" mt="md" style={{ flexGrow: 1 }}>
                  <Stack gap={2}>
                    <Text
                      fw={700}
                      size="md"
                      c="gray.9"
                      style={{ fontFamily: "Outfit, Inter, sans-serif" }}
                    >
                      {resort.name}
                    </Text>
                    {resort.code && (
                      <Text size="sm" fw={600} c="dimmed">
                        CODE: {resort.code}
                      </Text>
                    )}
                  </Stack>

                  <Divider />

                  <Stack gap={4}>
                    <Group gap={6} wrap="nowrap">
                      <IconMapPin
                        size={14}
                        color="var(--mantine-color-gray-5)"
                      />
                      <Text
                        size="sm"
                        c="dimmed"
                        style={{
                          whiteSpace: "nowrap",
                          overflow: "hidden",
                          textOverflow: "ellipsis",
                        }}
                      >
                        {formatResortLocation(resort) || "No address defined"}
                      </Text>
                    </Group>
                    {resort.phone && (
                      <Group gap={6} wrap="nowrap">
                        <IconPhone
                          size={14}
                          color="var(--mantine-color-gray-5)"
                        />
                        <Text size="sm" c="dimmed">
                          {resort.phone}
                        </Text>
                      </Group>
                    )}
                    {resort.email && (
                      <Group gap={6} wrap="nowrap">
                        <IconMail
                          size={14}
                          color="var(--mantine-color-gray-5)"
                        />
                        <Text
                          size="sm"
                          c="dimmed"
                          style={{
                            whiteSpace: "nowrap",
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                          }}
                        >
                          {resort.email}
                        </Text>
                      </Group>
                    )}
                  </Stack>
                </Stack>

                {/* Card Actions */}
                <Card.Section
                  px="md"
                  py="xs"
                  style={{
                    borderTop: "1px solid var(--mantine-color-gray-2)",
                    marginTop: "auto",
                  }}
                >
                  <Group
                    justify="space-between"
                    align="center"
                    style={{ width: "100%" }}
                  >
                    <Text size="xs" c="dimmed">
                      Created:{" "}
                      {resort.created_at
                        ? moment(resort.created_at).format("MMM YYYY")
                        : "—"}
                    </Text>
                    <Group gap="xs" onClick={(e) => e.stopPropagation()}>
                      {accessScope.update && (
                        <ActionIcon
                          variant="subtle"
                          color="gray"
                          size="sm"
                          onClick={() =>
                            navigate(`/admin/resorts/${resort.id}`)
                          }
                        >
                          <IconEdit size={16} />
                        </ActionIcon>
                      )}
                      {accessScope.delete && (
                        <ActionIcon
                          variant="subtle"
                          color="red"
                          size="sm"
                          onClick={(e) => handleDeleteClick(e, resort)}
                        >
                          <IconTrash size={16} />
                        </ActionIcon>
                      )}
                    </Group>
                  </Group>
                </Card.Section>
              </Card>
            ))}
          </SimpleGrid>
        ) : (
          /* Premium Table View */
          <Paper
            withBorder
            radius="md"
            style={{ overflow: "hidden", backgroundColor: "#ffffff" }}
          >
            <Table
              striped
              highlightOnHover
              verticalSpacing="md"
              horizontalSpacing="md"
            >
              <Table.Thead
                style={{ backgroundColor: "var(--mantine-color-gray-1)" }}
              >
                <Table.Tr>
                  <Table.Th style={{ color: "var(--mantine-color-gray-7)" }}>
                    Resort Name
                  </Table.Th>
                  <Table.Th style={{ color: "var(--mantine-color-gray-7)" }}>
                    Code
                  </Table.Th>
                  <Table.Th style={{ color: "var(--mantine-color-gray-7)" }}>
                    Grade
                  </Table.Th>
                  <Table.Th style={{ color: "var(--mantine-color-gray-7)" }}>
                    Status
                  </Table.Th>
                  <Table.Th style={{ color: "var(--mantine-color-gray-7)" }}>
                    Location
                  </Table.Th>
                  <Table.Th style={{ color: "var(--mantine-color-gray-7)" }}>
                    Created
                  </Table.Th>
                  <Table.Th
                    style={{ color: "var(--mantine-color-gray-7)", width: 120 }}
                  >
                    Actions
                  </Table.Th>
                </Table.Tr>
              </Table.Thead>
              <Table.Tbody>
                {items.map((resort) => (
                  <Table.Tr
                    key={resort.id}
                    style={{
                      cursor: "pointer",
                      transition: "background-color 0.2s",
                    }}
                    onClick={() => navigate(`/admin/resorts/${resort.id}`)}
                  >
                    <Table.Td>
                      <Text fw={700} size="sm" c="gray.9">
                        {resort.name}
                      </Text>
                    </Table.Td>
                    <Table.Td>
                      <Text fw={600} size="sm" c="dimmed">
                        {resort.code || "—"}
                      </Text>
                    </Table.Td>
                    <Table.Td>
                      {resort.grade ? (
                        <Badge
                          style={{
                            backgroundColor: GRADE_COLORS[resort.grade]?.bg,
                            color: GRADE_COLORS[resort.grade]?.text,
                            border: `1px solid ${GRADE_COLORS[resort.grade]?.border}`,
                          }}
                          variant="light"
                          size="sm"
                        >
                          {resort.grade.charAt(0) +
                            resort.grade.slice(1).toLowerCase()}
                        </Badge>
                      ) : (
                        <Text size="sm" c="dimmed">
                          —
                        </Text>
                      )}
                    </Table.Td>
                    <Table.Td>
                      <Badge
                        color={resort.is_active ? "green" : "gray"}
                        variant="light"
                        size="sm"
                      >
                        {resort.is_active ? "Active" : "Inactive"}
                      </Badge>
                    </Table.Td>
                    <Table.Td>
                      <Text
                        size="sm"
                        c="dimmed"
                        style={{
                          maxWidth: 200,
                          whiteSpace: "nowrap",
                          overflow: "hidden",
                          textOverflow: "ellipsis",
                        }}
                      >
                        {formatResortLocation(resort) || "—"}
                      </Text>
                    </Table.Td>
                    <Table.Td>
                      <Text size="sm" c="dimmed">
                        {resort.created_at
                          ? moment(resort.created_at).format("DD MMM YYYY")
                          : "—"}
                      </Text>
                    </Table.Td>
                    <Table.Td onClick={(e) => e.stopPropagation()}>
                      <Group gap="xs" justify="flex-start">
                        {accessScope.update && (
                          <Tooltip
                            label="Edit Details"
                            position="top"
                            withArrow
                          >
                            <ActionIcon
                              variant="light"
                              color="gray"
                              size="md"
                              onClick={() =>
                                navigate(`/admin/resorts/${resort.id}`)
                              }
                            >
                              <IconEdit size={16} />
                            </ActionIcon>
                          </Tooltip>
                        )}
                        {accessScope.delete && (
                          <Tooltip
                            label="Delete Resort"
                            position="top"
                            withArrow
                          >
                            <ActionIcon
                              variant="light"
                              color="red"
                              size="md"
                              onClick={(e) => handleDeleteClick(e, resort)}
                            >
                              <IconTrash size={16} />
                            </ActionIcon>
                          </Tooltip>
                        )}
                      </Group>
                    </Table.Td>
                  </Table.Tr>
                ))}
              </Table.Tbody>
            </Table>
          </Paper>
        )}

        {/* Footer & Pagination Controls */}
        <Paper
          withBorder
          p="md"
          radius="md"
          style={{ backgroundColor: "#ffffff" }}
        >
          <Flex justify="space-between" align="center" wrap="wrap" gap="md">
            <Group gap="xs">
              <Select
                style={{ width: 80 }}
                data={PAGE_SIZE_OPTIONS}
                value={pageSize}
                onChange={handlePageSizeChange}
                size="sm"
                radius="md"
              />
              <Text size="xs" c="dimmed" fw={600}>
                Entries per page
              </Text>
            </Group>
            <Group gap="md">
              <Text size="xs" c="dimmed" fw={600}>
                {total} resort{total !== 1 ? "s" : ""} found
              </Text>
              <Pagination
                total={totalPages}
                value={page}
                onChange={handlePageChange}
                size="sm"
                radius="md"
              />
            </Group>
          </Flex>
        </Paper>
      </Stack>

      {/* Delete Confirmation Modal */}
      <Modal
        opened={deleteOpened}
        onClose={closeDelete}
        title="Delete Resort Configuration"
        centered
        size="md"
        radius="lg"
      >
        <Stack p="xs">
          <Text size="sm">
            Are you sure you want to delete{" "}
            <Text span fw={700} c="red.6">
              {deleteTarget?.name}
            </Text>
            ?
          </Text>
          <Text size="xs" c="dimmed">
            This is an irreversible operation. It will permanently remove the
            resort and all room units associated with it from the datastore.
          </Text>
          <Group justify="flex-end" mt="md">
            <Button
              variant="subtle"
              color="gray"
              radius="md"
              onClick={closeDelete}
            >
              Cancel
            </Button>
            <Button
              color="red"
              radius="md"
              onClick={handleDeleteConfirm}
              loading={deleting}
            >
              Confirm Delete
            </Button>
          </Group>
        </Stack>
      </Modal>

      {/* Activity Logs Drawer */}
      <Drawer
        opened={historyOpened}
        onClose={closeHistory}
        title="Resort Modification Logs"
        position="right"
        size="lg"
      >
        <ResortsLogsPanel resortId={null} />
      </Drawer>

      {/* Custom Styles Injection */}
      <style>{`
        .resort-hover-card:hover {
          transform: translateY(-5px);
          box-shadow: var(--mantine-shadow-md) !important;
          border-color: var(--mantine-color-gray-4) !important;
        }
        @keyframes pulse {
          0% { box-shadow: 0 0 0 0 rgba(47, 158, 68, 0.4); }
          70% { box-shadow: 0 0 0 8px rgba(47, 158, 68, 0); }
          100% { box-shadow: 0 0 0 0 rgba(47, 158, 68, 0); }
        }
      `}</style>
    </Stack>
  );
}

// Helpers for segmented view toggling inside React Server Components compatibility
function CenterLabel({
  icon,
  label,
}: {
  icon: React.ReactNode;
  label: string;
}) {
  return (
    <Group gap="xs" wrap="nowrap" justify="center">
      {icon}
      <Text size="xs" fw={600}>
        {label}
      </Text>
    </Group>
  );
}

function IconIconList({ size }: { size: number }) {
  return <IconList size={size} />;
}