import React from "react";
import { Paper, Stack, Box, MultiSelect, TextInput, Textarea, SimpleGrid } from "@mantine/core";
import { DateInput } from "@mantine/dates";
import { IconFileText } from "@tabler/icons-react";
import { RichTextComp } from "@/components/Richtext";
import moment from "moment";

interface OfferContentTabProps {
  description: string;
  setDescription: (val: string) => void;
  termsAndConditions: string;
  setTermsAndConditions: (val: string) => void;
  edmOptions: { value: string; label: string }[];
  confirmationEdmIds: string[];
  setConfirmationEdmIds: (ids: string[]) => void;
  cancellationEdmIds: string[];
  setCancellationEdmIds: (ids: string[]) => void;
  rawConfig: Record<string, any>;
  setRawConfig: React.Dispatch<React.SetStateAction<Record<string, any>>>;
  offerType?: string;
  canEdit: boolean;
  sectionTitle: (title: string, icon?: React.ReactNode) => React.ReactNode;
}

export const OfferContentTab: React.FC<OfferContentTabProps> = ({
  description,
  setDescription,
  termsAndConditions,
  setTermsAndConditions,
  edmOptions,
  confirmationEdmIds,
  setConfirmationEdmIds,
  cancellationEdmIds,
  setCancellationEdmIds,
  rawConfig,
  setRawConfig,
  offerType,
  canEdit,
  sectionTitle,
}) => {
  return (
    <Stack gap="xl">
      {/* Description Tab Paper */}
      <Paper
        withBorder
        radius="lg"
        p="lg"
        style={{ boxShadow: "0 4px 16px rgba(0,0,0,0.01)", background: "#ffffff" }}
      >
        {sectionTitle("Detailed Overview & Description", <IconFileText size={20} style={{ color: "#868e96" }} />)}
        <Box>
          {canEdit ? (
            <RichTextComp content={description} onChange={setDescription} />
          ) : (
            <Paper withBorder p="sm" radius="md" style={{ background: "#f8f9fa" }}>
              <div dangerouslySetInnerHTML={{ __html: description || "<p>—</p>" }} />
            </Paper>
          )}
        </Box>
      </Paper>

      {/* Terms & Conditions Paper */}
      <Paper
        withBorder
        radius="lg"
        p="lg"
        style={{ boxShadow: "0 4px 16px rgba(0,0,0,0.01)", background: "#ffffff" }}
      >
        {sectionTitle("Terms & Conditions", <IconFileText size={20} style={{ color: "#868e96" }} />)}
        <Box>
          {canEdit ? (
            <RichTextComp content={termsAndConditions} onChange={setTermsAndConditions} />
          ) : (
            <Paper withBorder p="sm" radius="md" style={{ background: "#f8f9fa" }}>
              <div dangerouslySetInnerHTML={{ __html: termsAndConditions || "<p>—</p>" }} />
            </Paper>
          )}
        </Box>
      </Paper>

      {/* Section 6: EDM Notification Templates */}
      <Paper
        withBorder
        radius="lg"
        p="lg"
        style={{ boxShadow: "0 4px 16px rgba(0,0,0,0.01)", background: "#ffffff" }}
      >
        {sectionTitle("Notification Templates", <IconFileText size={20} style={{ color: "#868e96" }} />)}
        <Stack gap="md">
          <MultiSelect
            label="Confirmation EDM Template(s)"
            description="Templates sent on booking confirmation"
            data={edmOptions}
            value={confirmationEdmIds}
            onChange={setConfirmationEdmIds}
            disabled={!canEdit}
            clearable
            searchable
            radius="md"
          />
          <MultiSelect
            label="Cancellation EDM Template(s)"
            description="Templates sent on booking cancellation"
            data={edmOptions}
            value={cancellationEdmIds}
            onChange={setCancellationEdmIds}
            disabled={!canEdit}
            clearable
            searchable
            radius="md"
          />
        </Stack>
      </Paper>

      {/* Hot Deal Master Info */}
      {offerType === "HOT_DEAL" && (
        <Paper
          withBorder
          radius="lg"
          p="lg"
          style={{ boxShadow: "0 4px 16px rgba(0,0,0,0.01)", background: "#ffffff" }}
        >
          {sectionTitle("Display & Marketing Info", <IconFileText size={20} style={{ color: "#868e96" }} />)}
          <Stack gap="md">
            <TextInput
              label="Tagline"
              value={rawConfig.master_info?.tagline ?? ""}
              onChange={(e) => {
                const value = e.currentTarget.value;
                setRawConfig((prev) => ({ ...prev, master_info: { ...(prev.master_info || {}), tagline: value } }));
              }}
              disabled={!canEdit}
            />
            <TextInput
              label="Title"
              value={rawConfig.master_info?.title ?? ""}
              onChange={(e) => {
                const value = e.currentTarget.value;
                setRawConfig((prev) => ({ ...prev, master_info: { ...(prev.master_info || {}), title: value } }));
              }}
              disabled={!canEdit}
            />
            <TextInput
              label="Price Label"
              value={rawConfig.master_info?.price ?? ""}
              onChange={(e) => {
                const value = e.currentTarget.value;
                setRawConfig((prev) => ({ ...prev, master_info: { ...(prev.master_info || {}), price: value } }));
              }}
              disabled={!canEdit}
            />
            <TextInput
              label="Travel Dates Text"
              value={rawConfig.master_info?.travel ?? ""}
              onChange={(e) => {
                const value = e.currentTarget.value;
                setRawConfig((prev) => ({ ...prev, master_info: { ...(prev.master_info || {}), travel: value } }));
              }}
              disabled={!canEdit}
            />
            <TextInput
              label="Booking Notes"
              value={rawConfig.master_info?.booking ?? ""}
              onChange={(e) => {
                const value = e.currentTarget.value;
                setRawConfig((prev) => ({ ...prev, master_info: { ...(prev.master_info || {}), booking: value } }));
              }}
              disabled={!canEdit}
            />
            <TextInput
              label="Popup URL"
              value={rawConfig.master_info?.popup_url ?? ""}
              onChange={(e) => {
                const value = e.currentTarget.value;
                setRawConfig((prev) => ({ ...prev, master_info: { ...(prev.master_info || {}), popup_url: value } }));
              }}
              disabled={!canEdit}
            />
            <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
              <DateInput
                label="Check-in date (check_in)"
                description="Shown on the deal card"
                value={rawConfig.master_info?.check_in ? new Date(rawConfig.master_info.check_in) : null}
                onChange={(v) => {
                  const check_in = v ? moment(v).format("YYYY-MM-DD") : undefined;
                  setRawConfig((prev) => ({ ...prev, master_info: { ...(prev.master_info || {}), check_in } }));
                }}
                disabled={!canEdit}
                clearable
                valueFormat="DD MMM YYYY"
              />
              <DateInput
                label="Check-out date (check_out)"
                description="Shown on the deal card"
                value={rawConfig.master_info?.check_out ? new Date(rawConfig.master_info.check_out) : null}
                onChange={(v) => {
                  const check_out = v ? moment(v).format("YYYY-MM-DD") : undefined;
                  setRawConfig((prev) => ({ ...prev, master_info: { ...(prev.master_info || {}), check_out } }));
                }}
                disabled={!canEdit}
                clearable
                valueFormat="DD MMM YYYY"
              />
            </SimpleGrid>
            <Textarea
              label="Details Bullets (one per line)"
              value={(rawConfig.master_info?.details ?? []).join("\n")}
              onChange={(e) => {
                const details = e.currentTarget.value.split("\n");
                setRawConfig((prev) => ({ ...prev, master_info: { ...(prev.master_info || {}), details } }));
              }}
              disabled={!canEdit}
              rows={3}
            />
          </Stack>
        </Paper>
      )}
    </Stack>
  );
};