import React, { useState } from "react";
import "./ChatNotificationSettings.styles.scss";
import { Button } from "../../../../Button";
import { Checkbox } from "../../../../Checkbox";
import { RadioButtonGroup } from "../../../../RadioButtonGroup";
import { Prompt } from "../../../../Prompt";

export const ChatNotificationSettings = ({
  isOpen,
  onClose,
  isLoading,
  position = { top: 60, right: 32 },
  onSaveNotification,
  notificationSettings,
}) => {
  const [notificationSetting, setNotificationSetting] = useState(
    notificationSettings?.notificationSetting || "all"
  );
  const [includeChannelMentions, setIncludeChannelMentions] = useState(
    notificationSettings?.includeChannelMentions || false
  );
  const [muteChannel, setMuteChannel] = useState(
    notificationSettings?.muteChannel || false
  );
  const channelName = notificationSettings?.channelName || "general";

  const handleSave = () => {
    onSaveNotification({
      notificationSetting,
      includeChannelMentions,
      muteChannel,
    });
    onClose();
  };

  const handleCancel = () => {
    onClose();
  };

  if (!isOpen) return null;

  return (
    <>
      {/* Backdrop */}
      <div className="notification-backdrop" onClick={onClose} />

      {/* Notification Settings Card */}
      <div
        className="notification-settings-card"
        style={{
          position: "absolute",
          top: position.top,
          right: position.right,
          transform: "translate(0%, 0%)",
        }}
      >
        <div className="notification-settings-header">
          <h3>Send a notification for</h3>
        </div>

        <div className="notification-settings-content">
          {/* Radio Button Options */}
          <div className="notification-options">
            {/* All new messages */}
            <RadioButtonGroup
              value={notificationSetting}
              onChange={(_e, val) => {
                setNotificationSetting(val);
              }}
              options={[
                {
                  label: "All new messages",
                  value: "all",
                },
              ]}
            />

            {/* Mentions */}
            <RadioButtonGroup
              value={notificationSetting}
              onChange={(_e, val) => {
                setIncludeChannelMentions(false);
                setMuteChannel(false);
                setNotificationSetting(val);
              }}
              options={[
                {
                  label: "Mentions",
                  value: "mentions",
                },
              ]}
            />

            {/* Show checkbox when Mentions is selected */}
            {notificationSetting === "mentions" && (
              <div className="mentions-checkbox">
                <Checkbox
                  variant="default"
                  label={
                    <span>
                      Also include{" "}
                      <b style={{ fontWeight: "bold" }}>{`@${channelName}`}</b>{" "}
                      and <b style={{ fontWeight: "bold" }}>{`@here`}</b>
                    </span>
                  }
                  checked={includeChannelMentions}
                  onChange={(e) => setIncludeChannelMentions(e.target.checked)}
                />
              </div>
            )}

            {/* Nothing */}
            <RadioButtonGroup
              value={notificationSetting}
              onChange={(_e, val) => {
                setNotificationSetting(val);
                setIncludeChannelMentions(false);
                setMuteChannel(false);
              }}
              options={[
                {
                  label: "Nothing",
                  value: "nothing",
                },
              ]}
            />
            {/* <label className="notification-option">
              <input
                type="radio"
                name="notification"
                value="all"
                checked={notificationSetting === "all"}
                onChange={(e) => setNotificationSetting(e.target.value)}
              />
              <span className="radio-custom"></span>
              <span className="option-text">All new messages</span>
            </label>

            <label className="notification-option">
              <input
                type="radio"
                name="notification"
                value="mentions"
                checked={notificationSetting === "mentions"}
                onChange={(e) => {
                  setNotificationSetting(e.target.value);
                  setIncludeChannelMentions(false);
                }}
              />
              <span className="radio-custom"></span>
              <span className="option-text">Mentions</span>
            </label>

           
            {notificationSetting === "mentions" && (
              <div className="mentions-checkbox">
                <Checkbox
                  variant="default"
                  label={
                    <span>
                      Also include{" "}
                      <b style={{ fontWeight: "bold" }}>{`@${channelName}`}</b>{" "}
                      and <b style={{ fontWeight: "bold" }}>{`@here`}</b>
                    </span>
                  }
                  checked={includeChannelMentions}
                  onChange={(e) => setIncludeChannelMentions(e.target.checked)}
                />
              </div>
            )}

            <label className="notification-option">
              <input
                type="radio"
                name="notification"
                value="nothing"
                checked={notificationSetting === "nothing"}
                onChange={(e) => setNotificationSetting(e.target.value)}
              />
              <span className="radio-custom"></span>
              <span className="option-text">Nothing</span>
            </label> */}
          </div>

          {/* Separator */}
          <div className="notification-separator"></div>

          {/* Mute Channel Section */}
          <div className="mute-section">
            <Checkbox
              variant="default"
              label="Mute channel"
              checked={muteChannel}
              onChange={(e) => {
                setMuteChannel(e.target.checked);
                setIncludeChannelMentions(false);
                setNotificationSetting("nothing");
              }}
            />

            <Prompt
              isOpen={muteChannel}
              handleClose={() => {
                setMuteChannel(false);
              }}
              onSecondaryButtonClick={() => {
                // Cancel → revert to mute
                setMuteChannel(false);
              }}
              secondaryButtonLabel="Unmute channel"
              title="You've muted this channel"
              variant="warning"
            >
              Muted channels are greyed out at the bottom of your channel list.
              You’ll still see a badge in the sidebar if you’ve been mentioned.
            </Prompt>

            <div className="mute-description">
              <p>
                Mute channels are greyed out at the bottom of your channel list.
              </p>
              <p>
                You'll still see a badge in the sidebar if you've been
                mentioned.
              </p>
            </div>
          </div>
        </div>

        {/* Action Buttons */}
        <div className="notification-settings-actions">
          <Button
            variant="url"
            className="cancel-button"
            onClick={handleCancel}
          >
            Cancel
          </Button>
          <Button variant="primary" onClick={handleSave} disabled={isLoading}>
            {isLoading ? "Saving..." : "Save changes"}
          </Button>
        </div>
      </div>
    </>
  );
};
