"use client";

import {
  Alert,
  Badge,
  Button,
  Checkbox,
  Container,
  Divider,
  Group,
  Modal,
  MultiSelect,
  NumberInput,
  Paper,
  Radio,
  Select,
  Stack,
  Switch,
  Table,
  Text,
  TextInput,
  Title,
  SimpleGrid,
  Box,
  Card,
  Tooltip,
  Grid,
  ThemeIcon,
  Flex,
  Tabs,
} from "@mantine/core";
import { DateInput, DateTimePicker } from "@mantine/dates";
import { useDisclosure } from "@mantine/hooks";
import { notifications } from "@mantine/notifications";
import {
  IconAlertCircle,
  IconArrowLeft,
  IconDeviceFloppy,
  IconHistory,
  IconTag,
  IconTrash,
  IconCalendar,
  IconInfoCircle,
  IconCheck,
  IconSettings,
  IconLock,
  IconFileText,
  IconSend,
  IconClock,
  IconEdit,
} from "@tabler/icons-react";
import moment from "moment";
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router";
import {
  createMemberOffer,
  updateMemberOffer,
  deleteMemberOffer,
  publishMemberOffer,
  archiveMemberOffer,
} from "@/lib/features/member-offers/action";
import { getEligibleUnits } from "@/lib/features/resorts/query";
import { RichTextComp } from "@/components/Richtext";
import type {
  MemberOffer,
  MemberOfferUnit,
  OfferType,
  PublishMode,
  OfferValueType,
  AllowedUserType,
  DropdownOption,
  EDMTemplateOption,
} from "@/lib/features/member-offers/types";
import type { AccessScope } from "@/lib/features/types";
import { MemberOffersLogsPanel } from "../_components/MemberOffersLogsPanel";
import { OfferTravelRulesTab } from "../_components/OfferTravelRulesTab";
import { useRoleAccess } from "@/hooks/useRoleAccess";
import { OfferConfigurationTab } from "../_components/OfferConfigurationTab";
import { OfferContentTab } from "../_components/OfferContentTab";
import { WorkflowSidebar } from "@/components/WorkflowSidebar";
import { getWorkflowTaskByEntity } from "@/lib/features/workflow/query";

interface UnitOfferRow {
  resort_unit_id: string;
  unit_name: string;
  unit_vp_code: string;
  unit_type?: string;
  is_selected: boolean;
  is_admin_override: boolean;
  offer_value_type: OfferValueType | null;
  offer_value: number | "";
  minimum_nights: number | "";
  maximum_nights_per_booking: number | "";
  maximum_units_per_membership: number | "";
}

interface Props {
  initialOffer: MemberOffer | null;
  isNew: boolean;
  initialError?: string;
  accessScope: AccessScope;
  resorts: { id: string; name: string }[];
  edmTemplates: EDMTemplateOption[];
  accountTypes: DropdownOption[];
  accountStatuses: DropdownOption[];
  clubs: DropdownOption[];
  initialEligibleUnits: any[];
}

function buildUnitRows(eligibleUnits: any[], existingUnitOffers: MemberOfferUnit[], offerType: OfferType): UnitOfferRow[] {
  return eligibleUnits.map((u) => {
    const existing = existingUnitOffers.find((uo) => uo.resort_unit_id === u.id);
    const defaultEligible = offerType === "HOT_DEAL" ? u.eligible_for_hot_deals : u.eligible_for_exclusive_discovery;
    return {
      resort_unit_id: u.id,
      unit_name: u.unit_name,
      unit_vp_code: u.unit_vp_code,
      unit_type: u.unit_type,
      is_selected: existing ? true : defaultEligible,
      is_admin_override: existing ? existing.is_admin_override : false,
      offer_value_type: existing?.offer_value_type ?? null,
      offer_value: existing?.offer_value ?? "",
      minimum_nights: existing?.minimum_nights ?? "",
      maximum_nights_per_booking: existing?.maximum_nights_per_booking ?? "",
      maximum_units_per_membership: existing?.maximum_units_per_membership ?? "",
    };
  });
}

export default function MemberOfferEditorClientPage({
  initialOffer,
  isNew,
  initialError,
  accessScope,
  resorts,
  edmTemplates,
  accountTypes,
  accountStatuses,
  clubs,
  initialEligibleUnits,
}: Props) {
  const navigate = useNavigate();
  const { checkClientAccess } = useRoleAccess();
  const canViewAdminLogs = checkClientAccess("read", "admin-logs");
  const o = initialOffer;

  const [offerName, setOfferName] = useState(o?.name ?? "");
  const [offerType, setOfferType] = useState<OfferType>(o?.offer_type ?? "HOT_DEAL");
  const [description, setDescription] = useState(o?.description ?? "");
  const [resortId, setResortId] = useState<string | null>(o?.resort_id ?? null);
  const [isActive, setIsActive] = useState(o?.is_active ?? true);
  const [isCancellable, setIsCancellable] = useState(o?.is_cancellable ?? true);

  const [bookingStart, setBookingStart] = useState<string | null>(o?.booking_period_start ?? null);
  const [bookingEnd, setBookingEnd] = useState<string | null>(o?.booking_period_end ?? null);
  const [travelStart, setTravelStart] = useState<string | null>(o?.travel_period_start ?? null);
  const [travelEnd, setTravelEnd] = useState<string | null>(o?.travel_period_end ?? null);

  const [unitRows, setUnitRows] = useState<UnitOfferRow[]>(
    buildUnitRows(initialEligibleUnits, o?.unit_offers ?? [], o?.offer_type ?? "HOT_DEAL"),
  );
  const [allResortUnits, setAllResortUnits] = useState<any[]>(initialEligibleUnits);
  const [selectedUnitToAdd, setSelectedUnitToAdd] = useState<string | null>(null);

  const availableToAdd = allResortUnits.filter(
    (u) => !unitRows.some((row) => row.resort_unit_id === u.id)
  );

  const [blockedAccountTypes, setBlockedAccountTypes] = useState<string[]>(o?.blocked_account_types ?? []);
  const [blockedAccountStatuses, setBlockedAccountStatuses] = useState<string[]>(o?.blocked_account_statuses ?? []);
  const [blockedClubs, setBlockedClubs] = useState<string[]>(o?.blocked_clubs ?? []);
  const [allowedUserTypes, setAllowedUserTypes] = useState<AllowedUserType[]>(
    o?.allowed_user_types ?? ["LEGAL_OWNER", "FAMILY_MEMBER", "GUEST"],
  );

  const [inclusions, setInclusions] = useState(o?.inclusions ?? "");
  const [termsAndConditions, setTermsAndConditions] = useState(o?.terms_and_conditions ?? "");
  const [confirmationEdmIds, setConfirmationEdmIds] = useState<string[]>(o?.confirmation_edm_template_ids ?? []);
  const [cancellationEdmIds, setCancellationEdmIds] = useState<string[]>(o?.cancellation_edm_template_ids ?? []);
  const [rawConfig, setRawConfig] = useState<Record<string, any>>(o?.raw_config ?? {});

  const [publishMode, setPublishMode] = useState<PublishMode>(o?.publish_mode ?? "DRAFT");
  const [scheduledPublishAt, setScheduledPublishAt] = useState<string | null>(
    o?.scheduled_publish_at ?? null,
  );

  const [saving, setSaving] = useState(false);
  const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
  const [deleting, setDeleting] = useState(false);
  const [logsOpened, { open: openLogs, close: closeLogs }] = useDisclosure(false);
  const [workflowOpened, { open: openWorkflow, close: closeWorkflow }] = useDisclosure(false);
  const [workflowStatus, setWorkflowStatus] = useState<string | null>(null);

  useEffect(() => {
    if (!isNew && o?.id) {
      getWorkflowTaskByEntity("MEMBER_OFFER", o.id)
        .then((res) => {
          if (res.success && res.data) {
            setWorkflowStatus(res.data.status);
          }
        })
        .catch(() => {});
    }
  }, [isNew, o?.id]);

  const isLocked = !isNew && o?.publish_mode === "ARCHIVED";
  const canEdit = isNew ? accessScope.create : (accessScope.update && !isLocked);

  const handleResortChange = async (val: string | null) => {
    setResortId(val);
    setUnitRows([]);
    setAllResortUnits([]);
    if (!val) return;
    try {
      const res = await getEligibleUnits(val, offerType);
      if (res.success && Array.isArray(res.data)) {
        setAllResortUnits(res.data);
        setUnitRows(buildUnitRows(res.data, [], offerType));
      }
    } catch {
      // silent
    }
  };

  const updateUnitRow = (unitId: string, field: keyof UnitOfferRow, val: any) => {
    setUnitRows((prev) =>
      prev.map((r) =>
        r.resort_unit_id === unitId
          ? { ...r, [field]: val, is_admin_override: true }
          : r,
      ),
    );
  };

  const deleteUnitRow = (unitId: string) => {
    setUnitRows((prev) => prev.filter((r) => r.resort_unit_id !== unitId));
  };

  const handleAddUnit = () => {
    if (!selectedUnitToAdd) return;
    const unitObj = allResortUnits.find((u) => u.id === selectedUnitToAdd);
    if (unitObj) {
      const newRow: UnitOfferRow = {
        resort_unit_id: unitObj.id,
        unit_name: unitObj.unit_name,
        unit_vp_code: unitObj.unit_vp_code,
        unit_type: unitObj.unit_type,
        is_selected: true,
        is_admin_override: true,
        offer_value_type: null,
        offer_value: "",
        minimum_nights: "",
        maximum_nights_per_booking: "",
        maximum_units_per_membership: "",
      };
      setUnitRows((prev) => [...prev, newRow]);
      setSelectedUnitToAdd(null);
    }
  };

  const buildPayload = () => ({
    name: offerName.trim(),
    offer_type: offerType,
    description: description || undefined,
    resort_id: resortId ?? undefined,
    is_active: isActive,
    is_cancellable: isCancellable,
    booking_period_start: bookingStart ?? undefined,
    booking_period_end: bookingEnd ?? undefined,
    travel_period_start: travelStart ?? undefined,
    travel_period_end: travelEnd ?? undefined,
    unit_offers: unitRows
      .filter((r) => r.is_selected)
      .map((r) => ({
        resort_unit_id: r.resort_unit_id,
        is_admin_override: r.is_admin_override,
        offer_value_type: r.offer_value_type ?? undefined,
        offer_value: r.offer_value !== "" ? Number(r.offer_value) : undefined,
        minimum_nights: r.minimum_nights !== "" ? Number(r.minimum_nights) : undefined,
        maximum_nights_per_booking: r.maximum_nights_per_booking !== "" ? Number(r.maximum_nights_per_booking) : undefined,
        maximum_units_per_membership: r.maximum_units_per_membership !== "" ? Number(r.maximum_units_per_membership) : undefined,
      })),
    blocked_account_types: blockedAccountTypes,
    blocked_account_statuses: blockedAccountStatuses,
    blocked_clubs: blockedClubs,
    allowed_user_types: allowedUserTypes,
    inclusions: inclusions || undefined,
    terms_and_conditions: termsAndConditions || undefined,
    confirmation_edm_template_ids: confirmationEdmIds,
    cancellation_edm_template_ids: cancellationEdmIds,
    raw_config: rawConfig,
    publish_mode: publishMode,
    scheduled_publish_at: publishMode === "SCHEDULED" && scheduledPublishAt ? scheduledPublishAt : null,
  });

  const handleSave = async () => {
    if (!offerName.trim()) {
      notifications.show({ color: "red", message: "Offer name is required" });
      return;
    }
    setSaving(true);
    try {
      const payload = buildPayload();
      const res = isNew
        ? await createMemberOffer(payload as any)
        : await updateMemberOffer(o!.id, payload as any);
      if (res.success && res.data) {
        notifications.show({ color: "green", message: isNew ? "Offer created" : "Offer saved" });
        if (isNew) navigate(`/admin/member-offers/${res.data.id}`);
      } else {
        notifications.show({ color: "red", message: res.message || "Save failed" });
      }
    } catch {
      notifications.show({ color: "red", message: "Save failed" });
    } finally {
      setSaving(false);
    }
  };

  const handlePublishNow = async () => {
    if (!o) return;
    try {
      const res = await publishMemberOffer(o.id);
      if (res.success) {
        notifications.show({ color: "green", message: "Offer published" });
        navigate(`/admin/member-offers/${o.id}`);
      } else {
        notifications.show({ color: "red", message: res.message || "Publish failed" });
      }
    } catch {
      notifications.show({ color: "red", message: "Publish failed" });
    }
  };

  const handleUnpublish = async () => {
    if (!o) return;
    setSaving(true);
    try {
      const payload = {
        ...buildPayload(),
        publish_mode: "DRAFT" as const,
        scheduled_publish_at: null,
      };
      const res = await updateMemberOffer(o.id, payload as any);
      if (res.success && res.data) {
        notifications.show({ color: "green", message: "Offer unpublished successfully" });
        navigate(0);
      } else {
        notifications.show({ color: "red", message: res.message || "Unpublish failed" });
      }
    } catch {
      notifications.show({ color: "red", message: "Unpublish failed" });
    } finally {
      setSaving(false);
    }
  };

  const handleArchive = async () => {
    if (!o) return;
    try {
      const res = await archiveMemberOffer(o.id);
      if (res.success) {
        notifications.show({ color: "green", message: "Offer archived" });
        navigate("/admin/member-offers");
      } else {
        notifications.show({ color: "red", message: res.message || "Archive failed" });
      }
    } catch {
      notifications.show({ color: "red", message: "Archive failed" });
    }
  };

  const handleDelete = async () => {
    if (!o) return;
    setDeleting(true);
    try {
      const res = await deleteMemberOffer(o.id);
      if (res.success) {
        notifications.show({ color: "green", message: "Offer deleted" });
        navigate("/admin/member-offers");
      } else {
        notifications.show({ color: "red", message: res.message || "Delete failed" });
      }
    } catch {
      notifications.show({ color: "red", message: "Delete failed" });
    } finally {
      setDeleting(false);
    }
  };

  const sectionTitle = (title: string, icon?: React.ReactNode) => (
    <Group gap="xs" mb="md" style={{ borderBottom: "1px solid #f1f3f5", paddingBottom: "10px" }}>
      {icon}
      <Title order={5} style={{ fontFamily: "Outfit, Inter, sans-serif", fontWeight: 700, color: "#212529" }}>{title}</Title>
    </Group>
  );

  const edmOptions = edmTemplates.map((t) => ({ value: t.id, label: t.name }));

  return (
    <Container fluid px="xl" py="xl" style={{ backgroundColor: "#fcfcfd", minHeight: "100vh" }}>
      {/* Clean Sticky Top Header Panel */}
      <Flex justify="space-between" align="center" wrap="wrap" gap="md" mb="xl">
        <Group gap="sm">
          <Button
            variant="light"
            color="gray"
            size="xs"
            radius="md"
            leftSection={<IconArrowLeft size={14} />}
            onClick={() => navigate(-1)}
          >
            Back
          </Button>
          <ThemeIcon size={36} radius="xl" variant="light" color="gray">
            <IconTag size={20} />
          </ThemeIcon>
          <Stack gap={0}>
            <Group gap="xs">
              <Title order={3} style={{ fontFamily: "Outfit, Inter, sans-serif", color: "#212529", fontWeight: 700 }}>
                {isNew ? "Create Member Offer" : (offerName || "Member Offer")}
              </Title>
              {!isNew && (
                <Badge
                  color="gray"
                  variant="light"
                  size="sm"
                >
                  {o?.publish_mode}
                </Badge>
              )}
              {!isNew && workflowStatus && (
                <Badge
                  color={
                    workflowStatus === "VERIFIED"
                      ? "green"
                      : workflowStatus === "CHANGE_REQUESTED"
                      ? "red"
                      : workflowStatus === "READY_FOR_REVIEW"
                      ? "blue"
                      : workflowStatus === "CONTENT_IN_PROGRESS"
                      ? "yellow"
                      : workflowStatus === "READY_FOR_CONTENT"
                      ? "cyan"
                      : "gray"
                  }
                  variant="filled"
                  size="sm"
                >
                  {workflowStatus.replace(/_/g, " ")}
                </Badge>
              )}
            </Group>
            {!isNew && offerType && (
              <Text size="xs" c="dimmed">
                Type: {offerType === "HOT_DEAL" ? "Hot Deal" : "Exclusive Discovery"}
              </Text>
            )}
          </Stack>
        </Group>
        <Group gap="xs">
          {!isNew && o?.publish_mode === "DRAFT" && accessScope.delete && (
            <Button
              variant="light"
              size="sm"
              radius="md"
              color="gray"
              leftSection={<IconTrash size={16} />}
              onClick={openDelete}
            >
              Delete
            </Button>
          )}
          {!isNew && o?.publish_mode === "PUBLISHED" && accessScope.update && (
            <Button
              variant="light"
              color="gray"
              size="sm"
              radius="md"
              onClick={handleArchive}
            >
              Archive
            </Button>
          )}
          {!isNew && o?.publish_mode === "PUBLISHED" && accessScope.update && (
            <Button
              variant="light"
              color="gray"
              size="sm"
              radius="md"
              onClick={handleUnpublish}
              loading={saving}
            >
              Unpublish
            </Button>
          )}
          {!isNew && o?.publish_mode === "DRAFT" && accessScope.update && (
            <Button
              variant="light"
              color="gray"
              size="sm"
              radius="md"
              onClick={handlePublishNow}
            >
              Publish Now
            </Button>
          )}
          {!isNew && (
            <Button
              variant="light"
              color="blue"
              size="sm"
              radius="md"
              leftSection={<IconClock size={16} />}
              onClick={openWorkflow}
            >
              Workflow
            </Button>
          )}
          {!isNew && canViewAdminLogs && (
            <Button
              variant="light"
              color="gray"
              size="sm"
              radius="md"
              leftSection={<IconHistory size={16} />}
              onClick={openLogs}
            >
              Activity
            </Button>
          )}
          {canEdit && (
            <Button
              size="sm"
              radius="md"
              variant="filled"
              color="dark"
              leftSection={<IconDeviceFloppy size={16} />}
              onClick={handleSave}
              loading={saving}
            >
              {isNew ? "Create Offer" : "Save Changes"}
            </Button>
          )}
        </Group>
      </Flex>

      {initialError && (
        <Alert color="red" icon={<IconAlertCircle size={16} />} mb="xl" radius="md">
          {initialError}
        </Alert>
      )}
      {isLocked && (
        <Alert color="orange" icon={<IconAlertCircle size={16} />} mb="xl" radius="md">
          This offer is archived and cannot be edited.
        </Alert>
      )}

      {/* Tabs and Grid Layout */}
      <Tabs defaultValue="configuration" radius="md">
        <Tabs.List mb="xl">
          <Tabs.Tab value="configuration" leftSection={<IconSettings size={16} />}>
            Configuration
          </Tabs.Tab>
          {offerType === "HOT_DEAL" && (
            <Tabs.Tab value="travel-rules" leftSection={<IconCalendar size={16} />}>
              Travel Rules
            </Tabs.Tab>
          )}
          <Tabs.Tab value="content" leftSection={<IconFileText size={16} />} disabled={isNew}>
            Content
          </Tabs.Tab>
        </Tabs.List>

        {isNew && (
          <Text size="xs" c="dimmed" mt="-md" mb="lg">
            * Complete and save the configuration first to enable the Content tab.
          </Text>
        )}

        <Tabs.Panel value="configuration">
          <OfferConfigurationTab
            offerName={offerName}
            setOfferName={setOfferName}
            offerType={offerType}
            setOfferType={setOfferType}
            resortId={resortId}
            handleResortChange={handleResortChange}
            isActive={isActive}
            setIsActive={setIsActive}
            isCancellable={isCancellable}
            setIsCancellable={setIsCancellable}
            bookingStart={bookingStart}
            setBookingStart={setBookingStart}
            bookingEnd={bookingEnd}
            setBookingEnd={setBookingEnd}
            travelStart={travelStart}
            setTravelStart={setTravelStart}
            travelEnd={travelEnd}
            setTravelEnd={setTravelEnd}
            unitRows={unitRows}
            updateUnitRow={updateUnitRow}
            availableToAdd={availableToAdd}
            selectedUnitToAdd={selectedUnitToAdd}
            setSelectedUnitToAdd={setSelectedUnitToAdd}
            handleAddUnit={handleAddUnit}
            deleteUnitRow={deleteUnitRow}
            inclusions={inclusions}
            setInclusions={setInclusions}
            blockedAccountTypes={blockedAccountTypes}
            setBlockedAccountTypes={setBlockedAccountTypes}
            blockedAccountStatuses={blockedAccountStatuses}
            setBlockedAccountStatuses={setBlockedAccountStatuses}
            blockedClubs={blockedClubs}
            setBlockedClubs={setBlockedClubs}
            allowedUserTypes={allowedUserTypes}
            setAllowedUserTypes={setAllowedUserTypes}
            publishMode={publishMode}
            setPublishMode={setPublishMode}
            scheduledPublishAt={scheduledPublishAt}
            setScheduledPublishAt={setScheduledPublishAt}
            publishedAt={o?.published_at}
            rawConfig={rawConfig}
            setRawConfig={setRawConfig}
            resorts={resorts}
            accountTypes={accountTypes}
            accountStatuses={accountStatuses}
            clubs={clubs}
            canEdit={canEdit}
            isNew={isNew}
            sectionTitle={sectionTitle}
          />
        </Tabs.Panel>

        {offerType === "HOT_DEAL" && (
          <Tabs.Panel value="travel-rules" p="md">
            <OfferTravelRulesTab
              rawConfig={rawConfig}
              setRawConfig={setRawConfig}
              canEdit={canEdit}
              sectionTitle={sectionTitle}
              units={unitRows
                .filter((r) => r.is_selected && r.unit_vp_code)
                .map((r) => ({ code: r.unit_vp_code, label: r.unit_name || r.unit_vp_code }))}
            />
          </Tabs.Panel>
        )}

        <Tabs.Panel value="content">
          <OfferContentTab
            description={description}
            setDescription={setDescription}
            termsAndConditions={termsAndConditions}
            setTermsAndConditions={setTermsAndConditions}
            edmOptions={edmOptions}
            confirmationEdmIds={confirmationEdmIds}
            setConfirmationEdmIds={setConfirmationEdmIds}
            cancellationEdmIds={cancellationEdmIds}
            setCancellationEdmIds={setCancellationEdmIds}
            rawConfig={rawConfig}
            setRawConfig={setRawConfig}
            offerType={offerType}
            canEdit={canEdit}
            sectionTitle={sectionTitle}
          />
        </Tabs.Panel>
      </Tabs>

      {/* Delete modal */}
      <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}>{o?.name}</Text>?
            Only draft offers can be deleted.
          </Text>
          <Group justify="flex-end">
            <Button variant="subtle" onClick={closeDelete}>Cancel</Button>
            <Button color="red" onClick={handleDelete} loading={deleting}>Delete</Button>
          </Group>
        </Stack>
      </Modal>

      {/* Logs modal */}
      {canViewAdminLogs && (
        <Modal opened={logsOpened} onClose={closeLogs} title="Member Offer Activity" size="lg" centered>
          <MemberOffersLogsPanel offerId={o?.id ?? null} />
        </Modal>
      )}

      {/* Workflow drawer */}
      {!isNew && o?.id && (
        <WorkflowSidebar
          opened={workflowOpened}
          onClose={closeWorkflow}
          entityType="MEMBER_OFFER"
          entityId={o.id}
          onWorkflowUpdated={(newStatus) => setWorkflowStatus(newStatus)}
        />
      )}
    </Container>
  );
}