"use client";

import {
  Badge,
  Button,
  Drawer,
  Flex,
  Group,
  Modal,
  Pagination,
  Select,
  Stack,
  Table,
  Text,
  TextInput,
  Title,
  SimpleGrid,
  Paper,
  ThemeIcon,
  Box,
  Tooltip,
  ActionIcon,
} from "@mantine/core";
import { useDisclosure, useDebouncedValue } from "@mantine/hooks";
import { notifications } from "@mantine/notifications";
import {
  IconCopy,
  IconEdit,
  IconHistory,
  IconPlus,
  IconRefresh,
  IconSearch,
  IconTag,
  IconTrash,
  IconEye,
  IconArchive,
  IconClock,
  IconCheck,
} from "@tabler/icons-react";
import moment from "moment";
import React, { useState, useEffect, useMemo } from "react";
import { useNavigate, useSearchParams } from "react-router";
import {
  deleteMemberOffer,
  duplicateMemberOffer,
  archiveMemberOffer,
} from "@/lib/features/member-offers/action";
import { listMemberOffers } from "@/lib/features/member-offers/query";
import type {
  MemberOfferListItem,
  MemberOfferListResponse,
  PublishMode,
} from "@/lib/features/member-offers/types";
import type { AccessScope } from "@/lib/features/types";
import { MemberOffersLogsPanel } from "./_components/MemberOffersLogsPanel";

interface Props {
  initialData: MemberOfferListResponse;
  initialError?: string;
  accessScope: AccessScope;
  resorts: { id: string; name: string }[];
  systemMetrics?: { published: number; draft: number; scheduled: number; archived: number };
}

const PUBLISH_MODE_COLORS: Record<PublishMode, string> = {
  DRAFT: "gray",
  SCHEDULED: "orange",
  PUBLISHED: "green",
  ARCHIVED: "red",
};

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

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

  const [items, setItems] = useState<MemberOfferListItem[]>(initialData.items ?? []);
  const [total, setTotal] = useState(initialData.total ?? 0);
  const [loading, setLoading] = 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 typeFilter = searchParams.get("offer_type") || null;
  const resortFilter = searchParams.get("resort_id") || null;
  const statusFilter = searchParams.get("publish_mode") || 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.offer_type !== undefined ||
        updates.resort_id !== undefined ||
        updates.publish_mode !== 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<MemberOfferListItem | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
  const [historyOpened, { open: openHistory, close: closeHistory }] = useDisclosure(false);

  // Calculate live dynamic metrics from all items for the dashboard
  const metrics = useMemo(() => {
    if (systemMetrics) {
      return {
        published: systemMetrics.published,
        draftAndScheduled: systemMetrics.published + systemMetrics.draft + systemMetrics.scheduled + systemMetrics.archived === 0
          ? 0
          : systemMetrics.draft + systemMetrics.scheduled,
        draft: systemMetrics.draft,
        scheduled: systemMetrics.scheduled,
        archived: systemMetrics.archived,
      };
    }

    const published = items.filter(o => o.publish_mode === "PUBLISHED").length;
    const draft = items.filter(o => o.publish_mode === "DRAFT").length;
    const scheduled = items.filter(o => o.publish_mode === "SCHEDULED").length;
    const archived = items.filter(o => o.publish_mode === "ARCHIVED").length;

    return {
      published,
      draftAndScheduled: draft + scheduled,
      draft,
      scheduled,
      archived,
    };
  }, [items, systemMetrics]);

  const handleDeleteConfirm = async () => {
    if (!deleteTarget) return;
    setDeleting(true);
    try {
      const res = await deleteMemberOffer(deleteTarget.id);
      if (res.success) {
        notifications.show({ color: "green", message: "Offer deleted" });
        setItems((prev) => prev.filter((o) => o.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 handleDuplicate = async (e: React.MouseEvent, offer: MemberOfferListItem) => {
    e.stopPropagation();
    try {
      const res = await duplicateMemberOffer(offer.id);
      if (res.success && res.data) {
        notifications.show({ color: "green", message: "Offer duplicated" });
        navigate(`/admin/member-offers/${res.data.id}`);
      } else {
        notifications.show({ color: "red", message: res.message || "Duplicate failed" });
      }
    } catch {
      notifications.show({ color: "red", message: "Duplicate failed" });
    }
  };

  const handleArchive = async (e: React.MouseEvent, offer: MemberOfferListItem) => {
    e.stopPropagation();
    try {
      const res = await archiveMemberOffer(offer.id);
      if (res.success) {
        notifications.show({ color: "green", message: "Offer archived" });
        setItems((prev) => prev.map((o) => (o.id === offer.id ? { ...o, publish_mode: "ARCHIVED" } : o)));
      } else {
        notifications.show({ color: "red", message: res.message || "Archive failed" });
      }
    } catch {
      notifications.show({ color: "red", message: "Archive failed" });
    }
  };

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

  return (
    <Stack px={28} py={20} gap="xl" style={{ minHeight: "100vh" }}>
      {/* 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">
            <IconTag size={20} style={{ color: "#495057" }} />
          </ThemeIcon>
          <Stack gap={2}>
            <Title order={3} style={{ fontFamily: "Outfit, Inter, sans-serif", fontWeight: 700, color: "#212529" }}>
              Member Offers Management
            </Title>
            <Text size="xs" c="dimmed">
              Configure and release promotional campaigns, hot deals, and exclusive discoveries
            </Text>
          </Stack>
        </Group>
        <Group gap="xs" wrap="wrap">
          <Button
            variant="light"
            color="gray"
            radius="md"
            size="sm"
            leftSection={<IconHistory size={16} />}
            onClick={openHistory}
          >
            Activity Log
          </Button>
          <Button
            variant="light"
            color="gray"
            radius="md"
            size="sm"
            leftSection={<IconRefresh size={16} />}
            onClick={() => navigate(".", { replace: true })}
            loading={loading}
          >
            Refresh
          </Button>
          {accessScope.create && (
            <Button
              variant="filled"
              color="dark"
              radius="md"
              size="sm"
              leftSection={<IconPlus size={16} />}
              onClick={() => navigate("/admin/member-offers/new")}
            >
              New Offer
            </Button>
          )}
        </Group>
      </Flex>

      {initialError && <Text size="sm" c="red">{initialError}</Text>}

      {/* Dynamic Statistics Cards Row */}
      <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="md">
        {/* Total Offers */}
        <Paper
          withBorder
          radius="lg"
          p="lg"
          style={{
            background: "#ffffff",
            border: "1px solid #e9ecef",
            boxShadow: "0 4px 12px rgba(0,0,0,0.02)",
            transition: "transform 0.2s ease, box-shadow 0.2s ease",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = "translateY(-2px)";
            e.currentTarget.style.boxShadow = "0 6px 16px rgba(0,0,0,0.04)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = "translateY(0)";
            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.02)";
          }}
        >
          <Group justify="space-between" wrap="nowrap">
            <Stack gap={4}>
              <Text size="xs" fw={700} c="dimmed" style={{ textTransform: "uppercase", letterSpacing: "0.5px" }}>Total Offers</Text>
              <Text size="xl" fw={800} style={{ fontFamily: "Outfit, Inter, sans-serif" }}>{total}</Text>
            </Stack>
            <ThemeIcon size={40} radius="md" variant="light" color="gray">
              <IconTag size={20} style={{ color: "#495057" }} />
            </ThemeIcon>
          </Group>
          <Text size="xs" c="dimmed" mt="xs">All member offers across resorts</Text>
        </Paper>

        {/* Published */}
        <Paper
          withBorder
          radius="lg"
          p="lg"
          style={{
            background: "#ffffff",
            border: "1px solid #e9ecef",
            boxShadow: "0 4px 12px rgba(0,0,0,0.02)",
            transition: "transform 0.2s ease, box-shadow 0.2s ease",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = "translateY(-2px)";
            e.currentTarget.style.boxShadow = "0 6px 16px rgba(0,0,0,0.04)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = "translateY(0)";
            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.02)";
          }}
        >
          <Group justify="space-between" wrap="nowrap">
            <Stack gap={4}>
              <Group gap={6}>
                <Text size="xs" fw={700} c="dimmed" style={{ textTransform: "uppercase", letterSpacing: "0.5px" }}>Published</Text>
                <span style={{
                  width: 6,
                  height: 6,
                  borderRadius: "50%",
                  backgroundColor: "#21ae3bff",
                  display: "inline-block",
                }} />
              </Group>
              <Text size="xl" fw={800} c="gray.8" style={{ fontFamily: "Outfit, Inter, sans-serif" }}>
                {metrics.published}
              </Text>
            </Stack>
            <ThemeIcon size={40} radius="md" variant="light" color="gray">
              <IconCheck size={20} style={{ color: "#49574cff" }} />
            </ThemeIcon>
          </Group>
          <Text size="xs" c="dimmed" mt="xs">Active and bookable on frontend</Text>
        </Paper>

        {/* Scheduled & Draft */}
        <Paper
          withBorder
          radius="lg"
          p="lg"
          style={{
            background: "#ffffff",
            border: "1px solid #e9ecef",
            boxShadow: "0 4px 12px rgba(0,0,0,0.02)",
            transition: "transform 0.2s ease, box-shadow 0.2s ease",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = "translateY(-2px)";
            e.currentTarget.style.boxShadow = "0 6px 16px rgba(0,0,0,0.04)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = "translateY(0)";
            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.02)";
          }}
        >
          <Group justify="space-between" wrap="nowrap">
            <Stack gap={4}>
              <Text size="xs" fw={700} c="dimmed" style={{ textTransform: "uppercase", letterSpacing: "0.5px" }}>Draft & Scheduled</Text>
              <Text size="xl" fw={800} c="gray.8" style={{ fontFamily: "Outfit, Inter, sans-serif" }}>
                {metrics.draftAndScheduled}
              </Text>
            </Stack>
            <ThemeIcon size={40} radius="md" variant="light" color="gray">
              <IconClock size={20} style={{ color: "#495057" }} />
            </ThemeIcon>
          </Group>
          <Text size="xs" c="dimmed" mt="xs">
            {metrics.draft} draft, {metrics.scheduled} scheduled
          </Text>
        </Paper>

        {/* Archived */}
        <Paper
          withBorder
          radius="lg"
          p="lg"
          style={{
            background: "#ffffff",
            border: "1px solid #e9ecef",
            boxShadow: "0 4px 12px rgba(0,0,0,0.02)",
            transition: "transform 0.2s ease, box-shadow 0.2s ease",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = "translateY(-2px)";
            e.currentTarget.style.boxShadow = "0 6px 16px rgba(0,0,0,0.04)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = "translateY(0)";
            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.02)";
          }}
        >
          <Group justify="space-between" wrap="nowrap">
            <Stack gap={4}>
              <Text size="xs" fw={700} c="dimmed" style={{ textTransform: "uppercase", letterSpacing: "0.5px" }}>Archived</Text>
              <Text size="xl" fw={800} c="gray.8" style={{ fontFamily: "Outfit, Inter, sans-serif" }}>
                {metrics.archived}
              </Text>
            </Stack>
            <ThemeIcon size={40} radius="md" variant="light" color="gray">
              <IconArchive size={20} style={{ color: "#495057" }} />
            </ThemeIcon>
          </Group>
          <Text size="xs" c="dimmed" mt="xs">Historical campaigns</Text>
        </Paper>
      </SimpleGrid>

      {/* Advanced Filters */}
      <Paper
        withBorder
        radius="lg"
        p="md"
        style={{
          background: "rgba(255, 255, 255, 0.8)",
          backdropFilter: "blur(12px)",
          border: "1px solid rgba(233, 236, 239, 0.7)",
          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.02)",
        }}
      >
        <Flex justify="space-between" align="center" wrap="wrap" gap="md">
          <Group gap="sm" style={{ flex: 1, minWidth: 280 }}>
            <TextInput
              placeholder="Search by offer name…"
              leftSection={<IconSearch size={16} stroke={1.5} style={{ color: "#868e96" }} />}
              value={localSearch}
              onChange={(e) => setLocalSearch(e.currentTarget.value)}
              size="sm"
              radius="md"
              style={{ flex: 1, maxWidth: 360 }}
            />
            <Select
              placeholder="Offer Type"
              data={[
                { value: "HOT_DEAL", label: "Hot Deal" },
                { value: "EXCLUSIVE_DISCOVERY", label: "Exclusive Discovery" },
              ]}
              value={typeFilter}
              onChange={(v) => updateParams({ offer_type: v })}
              clearable
              size="sm"
              radius="md"
              style={{ width: 180 }}
            />
            <Select
              placeholder="Select Resort"
              data={resorts.map((r) => ({ value: r.id, label: r.name }))}
              value={resortFilter}
              onChange={(v) => updateParams({ resort_id: v })}
              clearable
              searchable
              size="sm"
              radius="md"
              style={{ width: 220 }}
            />
            <Select
              placeholder="Status"
              data={[
                { value: "DRAFT", label: "Draft" },
                { value: "SCHEDULED", label: "Scheduled" },
                { value: "PUBLISHED", label: "Published" },
                { value: "ARCHIVED", label: "Archived" },
              ]}
              value={statusFilter}
              onChange={(v) => updateParams({ publish_mode: v })}
              clearable
              size="sm"
              radius="md"
              style={{ width: 140 }}
            />
            {(search || typeFilter || resortFilter || statusFilter) && (
              <Button
                variant="subtle"
                color="red"
                size="sm"
                radius="md"
                onClick={() => {
                  setLocalSearch("");
                  updateParams({ search: "", offer_type: "", resort_id: "", publish_mode: "", page: 1 });
                }}
              >
                Clear Filters
              </Button>
            )}
          </Group>
        </Flex>
      </Paper>

      {/* Main Table Grid */}
      <Stack gap="md">
        {items.length === 0 ? (
          <Stack align="center" py="xl" gap="xs">
            <IconTag size={40} opacity={0.3} />
            <Text c="dimmed" size="md">No member offers found.</Text>
            {accessScope.create && (
              <Button variant="subtle" leftSection={<IconPlus size={14} />} onClick={() => navigate("/admin/member-offers/new")}>
                Create your first offer
              </Button>
            )}
          </Stack>
        ) : (
          <Paper
            withBorder
            radius="lg"
            style={{
              overflow: "hidden",
              boxShadow: "0 4px 16px rgba(0,0,0,0.01)",
              border: "1px solid #e9ecef",
              background: "#ffffff",
            }}
          >
            <Table verticalSpacing="sm" horizontalSpacing="md" highlightOnHover>
              <Table.Thead style={{ background: "#f8f9fa" }}>
                <Table.Tr>
                  <Table.Th style={{ color: "#495057", fontWeight: 700 }}>Offer Name</Table.Th>
                  <Table.Th style={{ color: "#495057", fontWeight: 700 }}>Offer Type</Table.Th>
                  <Table.Th style={{ color: "#495057", fontWeight: 700 }}>Target Resort</Table.Th>
                  <Table.Th style={{ color: "#495057", fontWeight: 700 }}>Release Status</Table.Th>
                  <Table.Th style={{ color: "#495057", fontWeight: 700 }}>Booking Window</Table.Th>
                  <Table.Th style={{ color: "#495057", fontWeight: 700 }}>Travel Window</Table.Th>
                  <Table.Th style={{ color: "#495057", fontWeight: 700, width: 160 }}>Actions</Table.Th>
                </Table.Tr>
              </Table.Thead>
              <Table.Tbody>
                {items.map((offer) => (
                  <Table.Tr
                    key={offer.id}
                    style={{
                      cursor: "pointer",
                      transition: "background-color 0.2s ease",
                    }}
                    onClick={() => navigate(`/admin/member-offers/${offer.id}`)}
                  >
                    <Table.Td>
                      <Text fw={700} size="sm" c="gray.8">{offer.name}</Text>
                    </Table.Td>
                    <Table.Td>
                      {offer.offer_type === "HOT_DEAL" ? (
                        <Badge variant="light" color="gray" size="sm" radius="md">
                          Hot Deal
                        </Badge>
                      ) : (
                        <Badge variant="outline" color="gray" size="sm" radius="md">
                          Excl. Discovery
                        </Badge>
                      )}
                    </Table.Td>
                    <Table.Td>
                      <Text size="sm" fw={500} c="gray.6">{offer.resort_name || "—"}</Text>
                    </Table.Td>
                    <Table.Td>
                      <Badge
                        variant={offer.publish_mode === "DRAFT" || offer.publish_mode === "PUBLISHED" ? "light" : "outline"}
                        color={PUBLISH_MODE_COLORS[offer.publish_mode]}
                        size="sm"
                        radius="md"
                      >
                        {offer.publish_mode.charAt(0) + offer.publish_mode.slice(1).toLowerCase()}
                      </Badge>
                    </Table.Td>
                    <Table.Td>
                      <Text size="sm" fw={500} c="gray.6">
                        {offer.booking_period_start && offer.booking_period_end
                          ? `${moment(offer.booking_period_start).format("DD MMM YY")} – ${moment(offer.booking_period_end).format("DD MMM YY")}`
                          : "—"}
                      </Text>
                    </Table.Td>
                    <Table.Td>
                      <Text size="sm" fw={500} c="gray.6">
                        {offer.travel_period_start && offer.travel_period_end
                          ? `${moment(offer.travel_period_start).format("DD MMM YY")} – ${moment(offer.travel_period_end).format("DD MMM YY")}`
                          : "—"}
                      </Text>
                    </Table.Td>
                    <Table.Td onClick={(e) => e.stopPropagation()}>
                      <Group gap={4} justify="flex-start">
                        {accessScope.update && (
                          <Tooltip label="Edit Details" position="top" withArrow>
                            <ActionIcon
                              variant="light"
                              color="gray"
                              size="md"
                              onClick={() => navigate(`/admin/member-offers/${offer.id}`)}
                            >
                              <IconEdit size={16} />
                            </ActionIcon>
                          </Tooltip>
                        )}
                        {accessScope.create && (
                          <Tooltip label="Duplicate Offer" position="top" withArrow>
                            <ActionIcon
                              variant="light"
                              color="gray"
                              size="md"
                              onClick={(e) => handleDuplicate(e, offer)}
                            >
                              <IconCopy size={16} />
                            </ActionIcon>
                          </Tooltip>
                        )}
                        {accessScope.update && offer.publish_mode === "PUBLISHED" && (
                          <Tooltip label="Archive Offer" position="top" withArrow>
                            <ActionIcon
                              variant="light"
                              color="gray"
                              size="md"
                              onClick={(e) => handleArchive(e, offer)}
                            >
                              <IconArchive size={16} />
                            </ActionIcon>
                          </Tooltip>
                        )}
                        {accessScope.delete && offer.publish_mode === "DRAFT" && (
                          <Tooltip label="Delete Draft" position="top" withArrow>
                            <ActionIcon
                              variant="light"
                              color="gray"
                              size="md"
                              onClick={(e) => { e.stopPropagation(); setDeleteTarget(offer); openDelete(); }}
                            >
                              <IconTrash size={16} />
                            </ActionIcon>
                          </Tooltip>
                        )}
                      </Group>
                    </Table.Td>
                  </Table.Tr>
                ))}
              </Table.Tbody>
            </Table>

            <Paper p="md" style={{ background: "#f8f9fa", borderTop: "1px solid #e9ecef" }}>
              <Flex justify="space-between" align="center" direction={{ base: "column", sm: "row" }} gap="sm">
                <Group gap="xs">
                  <Select
                    style={{ width: 80 }}
                    data={PAGE_SIZE_OPTIONS}
                    value={pageSize}
                    onChange={(v) => updateParams({ pageSize: v || "20", page: 1 })}
                    size="sm"
                    radius="md"
                  />
                  <Text size="sm" c="dimmed" fw={500}>Entries per page</Text>
                </Group>
                <Group gap="md">
                  <Text size="sm" c="dimmed" fw={500}>{total} total offer{total !== 1 ? "s" : ""}</Text>
                  <Pagination total={totalPages} value={page} onChange={(p) => updateParams({ page: p })} size="sm" radius="md" />
                </Group>
              </Flex>
            </Paper>
          </Paper>
        )}
      </Stack>

      <Modal opened={deleteOpened} onClose={closeDelete} title="Delete Member Offer" centered size="sm">
        <Stack>
          <Text size="sm">
            Are you sure you want to delete{" "}
            <Text span fw={700}>{deleteTarget?.name}</Text>?
            Only draft offers can be deleted.
          </Text>
          <Group justify="flex-end">
            <Button variant="subtle" onClick={closeDelete}>Cancel</Button>
            <Button color="red" onClick={handleDeleteConfirm} loading={deleting}>Delete</Button>
          </Group>
        </Stack>
      </Modal>

      <Drawer opened={historyOpened} onClose={closeHistory} title="Member Offers Activity" position="right" size="md">
        <MemberOffersLogsPanel offerId={null} />
      </Drawer>
    </Stack>
  );
}