import React, { useState, useEffect } from 'react'
import { WAB_2 } from '../../../../assets/images';

const HeaderComponent = () => {
  const isMobile = useIsMobile();

  return (
    <div style={{ ...styles.headerContainer, flexDirection: isMobile ? 'column' : 'row' }}>
      <div style={styles.textContainer} className='p-3'>
        <h2 style={styles.textTitle}>Registration Step</h2>
        <p style={styles.textBody}>
          WhatsApp is one of the most popular communication platforms globally. As a Facebook-owned company,
          setting up WhatsApp Business API requires a Facebook account and Facebook Business Manager.
          Start leveraging this powerful tool for seamless communication with your customers.
        </p>
      </div>
      <img src={WAB_2} alt="WAB_2" style={styles.image(190, 190)} />
    </div>
  );
};

const useIsMobile = () => {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return isMobile;
};


const InfoComponent = ({ title, description, onStartNow }) => {
  const [isChecked, setIsChecked] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const handleCheckboxChange = (event) => {
    setIsChecked(event.target.checked);
    setErrorMessage('');
  };

  const handleStartNow = () => {
    if (!isChecked) {
      setErrorMessage('Please confirm agreement on above!');
    } else {
      onStartNow();
    }
  };

  return (
    <div style={styles.contentContainer}>
      <h3>{title}</h3>
      <p>{description}</p>
      <ul style={styles.descriptionList}>
        <li>The number must be owned by your company.</li>
        <li>Do not use a personal number.</li>
        <li>It should not be actively registered on WhatsApp Messenger or WhatsApp Business App.</li>
        <li>You must be able to receive phone calls or SMS on the number during the setup process.</li>
      </ul>
      <div style={styles.checkboxContainer}>
        <input
          type="checkbox"
          id="agreement"
          style={styles.checkbox}
          checked={isChecked}
          onChange={handleCheckboxChange}
        />
        <label htmlFor="agreement" style={styles.checkboxLabel}>
          I have a number with the above requirements
        </label>
      </div>
      {errorMessage && (
        <p style={{ color: 'red', fontSize: '0.875rem' }}>{errorMessage}</p>
      )}
      <button style={styles.startButton} onClick={handleStartNow}>
        Start Now
      </button>
    </div>
  );
};

// StepComponent
const StepComponent = ({ activeStep }) => {
  const stepsData = [
    { number: '01', description: 'Phone Number to WhatsApp' },
    { number: '02', description: 'WhatsApp Business Channel' },
    { number: '03', description: 'Verify Your Business on Facebook' },
  ];

  return (
    <div style={styles.stepsContainer}>
      {stepsData.map((step, index) => {
        const isCurrent = activeStep === index;

        return (
          <div key={index} style={styles.step}>
            <div
              style={{
                ...styles.stepNumberContainer,
                backgroundColor: isCurrent ? '#0542cc' : '#d3d3d3',
              }}
            >
              <span
                style={{
                  ...styles.stepNumber,
                  color: isCurrent ? '#fff' : '#808080',
                }}
              >
                {step.number}
              </span>
            </div>
            <p
              style={{
                ...styles.stepDescription,
                color: isCurrent ? '#000' : 'gray',
              }}
            >
              {step.description}
            </p>
          </div>
        );
      })}
    </div>
  );
};

// FirstContentComponent
const FirstContentComponent = ({ onStartNow }) => (
  <div style={styles.rowContainer}>
    <div style={styles.col6}>
      <StepComponent activeStep={0} /> {/* Displays step 1 as active */}
    </div>
    <div style={styles.col6}>
      <InfoComponent
        title="Following Specifications Step"
        onStartNow={onStartNow} // Handles "Start Now" button click
      />
    </div>
  </div>
);

// SecondContentComponent
const SecondContentComponent = ({ onNextStep, onBack }) => {
  const [isChecked, setIsChecked] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const handleCheckboxChange = (event) => {
    setIsChecked(event.target.checked);
    setErrorMessage(''); // Reset error message if checkbox is changed
  };

  const handleNextStep = () => {
    if (!isChecked) {
      setErrorMessage('Please confirm agreement on above!');
    } else {
      onNextStep(); // Proceed to next step if checkbox is checked
    }
  };

  return (
    <div style={styles.rowContainer}>
      <div style={styles.col6}>
        <StepComponent activeStep={1} /> {/* Displays step 2 as active */}
      </div>
      <div style={styles.col6}>
        <p>You'll need the following information for your WhatsApp Business Channel, Be sure to have them on hand.</p>
        <ul style={styles.descriptionList}>
            <li>Your brand's Display Name, shown to customers you chat with.</li>
            <li>Your company's Legal business name.</li>
            <li>Your company's official address.</li>
        </ul>
        <p>Create your WhatsApp Business Channel</p>
        <p>You'll be directed to Facebook Business Manager. Complete all the steps in the pop-up in order to create your WhatsApp Business Channel</p>

        <div style={styles.checkboxContainer}>
            <input 
              type="checkbox" 
              id="agreement" 
              style={styles.checkbox} 
              checked={isChecked} 
              onChange={handleCheckboxChange} 
            />
            <label htmlFor="agreement" style={styles.checkboxLabel}>
              Create Your Own Channel
            </label>
        </div>

        {errorMessage && (
          <p style={{ color: 'red', fontSize: '0.875rem' }}>{errorMessage}</p>
        )}

        <button onClick={onBack} style={styles.backButton}>
          Back
        </button>
        <button onClick={handleNextStep} style={styles.startButton}>
          Next Step
        </button>
      </div>
    </div>
  );
};

// LastContentComponent (ThirdComponent)
const LastContentComponent = ({ onBack }) => {
  const [isChecked, setIsChecked] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const handleCheckboxChange = (event) => {
    setIsChecked(event.target.checked);
    setErrorMessage(''); // Reset error message if checkbox is changed
  };

  const handleFinish = () => {
    if (!isChecked) {
      setErrorMessage('Please confirm agreement on above!');
    } else {
      // Perform the final action here (e.g., submit form, complete registration)
      alert('Registration Complete');
    }
  };

  return (
    <div style={styles.rowContainer}>
      <div style={styles.col6}>
        <StepComponent activeStep={2} /> {/* Displays step 3 as active */}
      </div>
      <div style={styles.col6}>
        <p>Ensure your business is fully verified by completing the required steps on Facebook. This process is essential to activate and manage your WhatsApp Business API effectively.</p>

        <div style={styles.checkboxContainer}>
            <input 
              type="checkbox" 
              id="agreement" 
              style={styles.checkbox} 
              checked={isChecked} 
              onChange={handleCheckboxChange} 
            />
            <label htmlFor="agreement" style={styles.checkboxLabel}>
              Verify Your Business on Facebook
            </label>
        </div>

        {errorMessage && (
          <p style={{ color: 'red', fontSize: '0.875rem' }}>{errorMessage}</p>
        )}

        <button onClick={onBack} style={styles.backButton}>
          Back
        </button>
        <button onClick={handleFinish} style={styles.startButton}>
          Finish
        </button>
      </div>
    </div>
  );
};

// Main Component
const RegisterStep = () => {
  const [activeStep, setActiveStep] = useState(0);
  const isMobile = useIsMobile();

  const handleStartNow = () => {
    setActiveStep(1); // Move to the second step
  };

  const handleNextStep = () => {
    setActiveStep(activeStep + 1); // Move to the next step
  };

  const handleBack = () => {
    setActiveStep(activeStep - 1); // Move to the previous step
  };

  const responsiveStyles = isMobile
    ? { flexDirection: 'column', alignItems: 'flex-start' }
    : { flexDirection: 'row' };

  return (
    <div>
      <HeaderComponent />
      <div style={{ ...styles.rowContainer, ...responsiveStyles }}>
        {activeStep === 0 && (
          <FirstContentComponent onStartNow={handleStartNow} />
        )}
        {activeStep === 1 && (
          <SecondContentComponent onNextStep={handleNextStep} onBack={handleBack} />
        )}
        {activeStep === 2 && (
          <LastContentComponent onBack={handleBack} />
        )}
      </div>
    </div>
  );
};
  

export default RegisterStep

const styles = {
    rowContainer: {
      display: 'flex',
      flexDirection: 'row',
      marginTop: '20px',
      flexWrap: 'wrap',
      borderRadius: '8px',
      border: '1px solid #ddd',
      boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)',
      justifyContent: 'center',
      alignItems: 'center',
      width: '100%',
      minHeight: '200px',
    },
    col6: {
      flex: '1 1 48%', // Membagi ruang menjadi 2 kolom
      padding: '10px',
      boxSizing: 'border-box',
    },
    headerContainer: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: '20px',
      borderRadius: '8px',
      border: '1px solid #ddd',
      boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)',
      justifyContent: 'center',
      width: '100%',
      minHeight: '250px',
    },
    leftSideContainer: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      gap: '10px',
    },
    image: (width, height) => ({
      width: width,
      height: height,
      flex: '1 1 33%',
    }),
    textContainer: {
      flex: '1 1 66%',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-end',
      paddingLeft: '20px',
    },
    textTitle: {
      fontSize: '24px',
      fontWeight: 'bold',
      marginBottom: '10px',
    },
    textBody: {
      fontSize: '16px',
      lineHeight: '1.5',
    },
    // Step Styles
    stepsContainer: {
      display: 'flex',
      flexWrap: 'wrap',
      gap: '10px', // Jarak antar langkah
      position: 'relative',
    },
    step: {
      flex: '1 1 16.6%', // Membagi langkah dalam 1/6 bagian dari lebar container
      padding: '10px',
      boxSizing: 'border-box',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      textAlign: 'center',
      marginBottom: '10px',
      position: 'relative',
    },
    stepNumberContainer: {
      width: '40px',
      height: '40px',
      borderRadius: '50%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: '8px',
      transition: 'background-color 0.3s ease',
    },
    stepNumber: {
      fontSize: '16px',
      color: '#fff',
      fontWeight: 'bold',
    },
    stepDescription: {
      fontSize: '14px',
      lineHeight: '1.5',
      color: '#333',
      textAlign: 'center',
      margin: '10px 0',
    },
    // Content Styles
    contentContainer: {
      marginTop: '20px',
      padding: '20px',
    },
    infoBox: {
      padding: '20px',
      marginBottom: '20px',
    },
    descriptionList: {
      listStyleType: 'disc',
      paddingLeft: '20px',
      color: '#333',
      fontSize: '14px',
    },
    descriptionText: {
      marginLeft: '0',
      paddingLeft: '0',
      fontSize: '14px',
      color: '#333',
    },
    startButton: {
      backgroundColor: '#0542cc',
      color: '#fff',
      padding: '10px 20px',
      border: 'none',
      borderRadius: '5px',
      cursor: 'pointer',
      marginTop: '15px',
    },
    checkboxContainer: {
      display: 'flex',
      alignItems: 'center',
      marginBottom: '10px',
    },
    checkbox: {
      marginRight: '10px',
    },
    checkboxLabel: {
      color: '#0542cc',
      fontSize: '14px',
    },
    backButton: {
        padding: '10px 20px',
        backgroundColor: '#fff', // Background color updated to white
        color: '#000', // Text color set to black
        border: '2px solid #0542cc', // Border color set to #0542cc
        borderRadius: '5px',
        cursor: 'pointer',
        marginRight: '10px',
    },

};
