import { useCallback, useState } from "react";
import Button from "../../../components/ui/button";
import styles from "./stepthree.module.css";
import { Checkbox } from "@shopify/polaris";
import { MdOutlineInfo } from "react-icons/md";
import ChatboxPhone from "../../../components/ui/chatbox-phone";

interface StepThreeProps {
  handleNext: (data: any) => void;
  handleFinish: () => void;
}

export default function StepThree({ handleNext, handleFinish }: StepThreeProps) {
  const [selectedColor, setSelectedColor] = useState("#9100DF");
  const [selectedButton, setSelectedButton] = useState(0);
  const [blocks, setBlocks] = useState({
    contactUs: true,
    featuredQuestions: true,
    orderTracking: true,
    featuredCategories: false,
  });

  const [checked, setChecked] = useState(false);
  const handleChange = useCallback((newChecked: boolean) => setChecked(newChecked), []);

  const brandColors = [
    "#D9D9D9",
    "#101010",
    "#7861BA",
    "#F7B1AD",
    "#A7D16C",
    "#82654E",
    "#F79433",
    "#BDBFF8",
    "#FEE45A",
    "#A72B2B",
  ];

  const toggleBlock = (blockName: keyof typeof blocks) => {
    setBlocks((prev) => ({ ...prev, [blockName]: !prev[blockName] }));
  };

  return (
    <>
      <div className={styles.main}>
        <div className={styles.leftSection}>
          <div className={styles.content}>
            <h1 className={styles.title}>Set up your chatbox</h1>
            <p className={styles.subtitle}>
              Customize chatbox to allign with your brand and website design
            </p>

            <div className={styles.section}>
              <label className={styles.label}>Brand Color</label>
              <div className={styles.colorGrid}>
                {brandColors.map((color) => (
                  <button
                    key={color}
                    className={styles.colorButton}
                    style={{ backgroundColor: color }}
                    onClick={() => setSelectedColor(color)}
                    aria-label={`Select color ${color}`}
                  />
                ))}
              </div>
            </div>

            <div className={styles.section}>
              <label className={styles.label}>Chatbox button</label>
              <div className={styles.buttonGrid}>
                <button
                  className={`${styles.chatboxButton} ${selectedButton === 0 ? styles.selected : ""}`}
                  onClick={() => setSelectedButton(0)}
                >
                  <div className={styles.chatIcon} style={{ backgroundColor: selectedColor }}>
                    <svg
                      width="35"
                      height="35"
                      viewBox="0 0 35 35"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <circle cx="17.5" cy="17.5" r="17.5" fill="currentColor" />
                      <path
                        d="M24.2082 12.5732H10.9411C9.8313 12.5732 8.9316 13.4729 8.9316 14.5827V22.7174C8.9316 23.8271 9.8313 24.7268 10.9411 24.7268H13.0957V28.6003L16.5337 24.7268H24.2082C25.318 24.7268 26.2177 23.8271 26.2177 22.7174V14.5827C26.2177 13.4729 25.318 12.5732 24.2082 12.5732ZM19.3685 20.8462H12.2753C11.9593 20.8462 11.7029 20.5899 11.7029 20.2738C11.7029 20.1158 11.7671 19.9726 11.8706 19.8691C11.9741 19.7656 12.1173 19.7014 12.2753 19.7014H19.3685C19.6845 19.7014 19.9409 19.9578 19.9409 20.2738C19.9409 20.5899 19.6845 20.8462 19.3685 20.8462ZM22.511 17.6588H12.2753C11.9593 17.6588 11.7029 17.4024 11.7029 17.0864C11.7029 16.9284 11.7671 16.7851 11.8706 16.6817C11.9741 16.5782 12.1173 16.514 12.2753 16.514H22.511C22.8271 16.514 23.0834 16.7703 23.0834 17.0864C23.0834 17.4024 22.8271 17.6588 22.511 17.6588Z"
                        fill="white"
                      />
                    </svg>
                  </div>
                </button>

                <button
                  className={`${styles.chatboxButton} ${selectedButton === 1 ? styles.selected : ""}`}
                  onClick={() => setSelectedButton(1)}
                >
                  <div className={styles.textButton}>
                    <span>Chat with us</span>
                  </div>
                </button>

                <button
                  className={`${styles.chatboxButton} ${selectedButton === 2 ? styles.selected : ""}`}
                  onClick={() => setSelectedButton(2)}
                >
                  <div className={styles.textButtonWithIcon}>
                    <svg
                      width="13"
                      height="13"
                      viewBox="0 0 13 13"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M11.4639 0H1.50792C0.67513 0 0 0.67513 0 1.50792V7.61239C0 8.44517 0.67513 9.12031 1.50792 9.12031H3.12483V12.027L5.70474 9.12031H11.4639C12.2967 9.12031 12.9718 8.44518 12.9718 7.61239V1.50792C12.9718 0.67513 12.2967 0 11.4639 0ZM7.83204 6.20823H2.50916C2.27199 6.20823 2.07963 6.01586 2.07963 5.77869C2.07963 5.66011 2.1278 5.55264 2.20546 5.47498C2.28311 5.39733 2.39058 5.34916 2.50916 5.34916H7.83204C8.06921 5.34916 8.26158 5.54152 8.26158 5.77869C8.26158 6.01586 8.06921 6.20823 7.83204 6.20823ZM10.1903 3.8163H2.50916C2.27199 3.8163 2.07963 3.62394 2.07963 3.38677C2.07963 3.26818 2.1278 3.16071 2.20546 3.08306C2.28311 3.0054 2.39058 2.95723 2.50916 2.95723H10.1903C10.4274 2.95723 10.6198 3.14959 10.6198 3.38677C10.6198 3.62394 10.4274 3.8163 10.1903 3.8163Z"
                        fill="white"
                      />
                    </svg>
                    <span>Chat with us</span>
                  </div>
                </button>
              </div>
            </div>

            <div className={styles.section}>
              <label className={styles.label}>Blocks</label>
              <div className={styles.checkboxGrid}>
                <Checkbox label="Contact us" checked={checked} onChange={handleChange} />
                <Checkbox label="Order Tracking" checked={checked} onChange={handleChange} />
                <Checkbox label="Featured questions" checked={checked} onChange={handleChange} />
                <Checkbox label="Featured categories" checked={checked} onChange={handleChange} />
              </div>
              <div className={styles.infoText}>
                <MdOutlineInfo size={16} color="#616161" />
                <span>You can change this later in app.</span>
              </div>
            </div>

            <div className={styles.section}>
              <label className={styles.label}>Enable app</label>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "flex-start",
                }}
              >
                <p className={styles.enableText}>Go to theme to activate our app on your store</p>
                <button className={styles.themeButton}>Go to theme</button>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.rightSection}>
          <ChatboxPhone headerColor={selectedColor} />
        </div>
      </div>
      <div className={styles.buttonContainer}>
        <Button btnVariant="secondary" onClick={() => {}}>
          Back
        </Button>
        <div>
          <Button
            btnVariant="primary"
            onClick={() => {
              handleNext("completed");
              handleFinish();
            }}
          >
            Finish
          </Button>
        </div>
      </div>
    </>
  );
}