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

// Header component
const HeaderComponent = ({ isMobile }) => {
  return (
    <div style={isMobile ? styles.headerContainerMobile : styles.headerContainer}>
      <img src={WAB_1} alt="WAB_1" style={styles.image(isMobile ? 200 : 350, isMobile ? 100 : 170)} />
      <div style={styles.textContainer}>
        <h2 style={styles.textTitle}>API For Your WhatsApp Business</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>
    </div>
  );
};


// Step Component (untuk menampilkan 4 langkah yang ada)
const StepComponent = ({ isMigration, isMobile }) => {
  const stepsData = isMigration
    ? [
        { number: '01', description: 'A Viable Phone Number for WhatsApp' },
        { number: '02', description: 'Your Business Legal address and details' },
      ]
    : [
        { number: '01', description: 'A Viable Phone Number for WhatsApp' },
        { number: '02', description: 'Your Business Legal address and details' },
        { number: '03', description: 'Select Number you want to connect' },
        { number: '04', description: 'Verify your Facebook Business' },
      ];

  return (
    <div style={isMobile ? styles.stepsContainerMobile : styles.stepsContainer}>
      {stepsData.map((step, index) => (
        <div key={index} style={styles.step}>
          <div style={styles.stepNumberContainer}>
            <span style={styles.stepNumber}>{step.number}</span>
          </div>
          <p style={styles.stepDescription}>{step.description}</p>
        </div>
      ))}
    </div>
  );
};

// Info Box Component untuk setiap informasi
const InfoComponent = ({ title, description, onStartNow, isMobile }) => {
  return (
    <div style={isMobile ? styles.infoBoxMobile : styles.infoBox}>
      <h3>{title}</h3>
      <p>{description}</p>
      <button style={styles.startButton} onClick={onStartNow}>Start Now</button>
    </div>
  );
};

// Need Component (Menggabungkan Step dan Info Pertama)
const Need = ({ onStartNow, isMobile }) => {
  return (
    <div style={styles.regisBusinessContainer}>
      <div style={styles.rowContainer}>
        <div style={styles.col6}>
          <StepComponent isMobile={isMobile} />
        </div>
        <div style={styles.col6}>
          <InfoComponent 
            title="What You Need?" 
            description="To register for WhatsApp Business API, you'll need an active phone number, 
            your business's legal address and details, select the number you want to connect, and 
            verify your Facebook Business account to complete the setup." 
            onStartNow={onStartNow}
            isMobile={isMobile}
          />
        </div>
      </div>
    </div>
  );
};

// Migration Component (Menggabungkan Step dan Info Kedua)
const Migration = ({ isMobile }) => {
  return (
    <div style={styles.regisBusinessContainer}>
      <div style={styles.rowContainer}>
        <div style={styles.col6}>
          <div style={styles.leftSideContainer}>
            <img src={WAB_2} alt="WAB_2" style={styles.image(isMobile ? 100 : 180, isMobile ? 100 : 180)} />
            <StepComponent isMigration={true} isMobile={isMobile} />
          </div>
        </div>
        <div style={styles.col6}>
          <InfoComponent 
            title="What You Need for Migration?" 
            description="To complete the migration, you'll need a verified Facebook Business account 
            and access to the phone number you wish to migrate." 
            isMobile={isMobile}
          />
        </div>
      </div>
    </div>
  );
};


// Main component
const RegisterContent = () => {
  const [isStarted, setIsStarted] = useState(false);
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  // Update isMobile state on window resize
  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handleResize);

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

  const handleStartNow = () => {
    setIsStarted(true);
  };

  return (
    <div style={styles.regisBusinessContainer}>
      {!isStarted && <HeaderComponent isMobile={isMobile} />}
      {!isStarted && <Need onStartNow={handleStartNow} isMobile={isMobile} />}
      {!isStarted && <Migration isMobile={isMobile} />}
      {isStarted && <RegisterStep />}
    </div>
  );
};


const styles = {
  regisBusinessContainer: {
    padding: '1rem',
    margin: 'auto',
    fontFamily: 'Arial, sans-serif'
  },

  // Header Content Style
  headerContainer: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: '20px',
  },
  leftSideContainer: {
    display: 'flex',
    flexDirection: 'row',        
    alignItems: 'center',        
    gap: '10px',                 
  },
  image: (width, height) => ({
    width: width,           
    height: height,         
    flex: '1 1 33%',         
    alignSelf: 'flex-start', 
  }),
  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',
  },
  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 50%', 
    padding: '10px', 
    boxSizing: 'border-box', 
  },

  // Step Style
  stepsContainer: {
    display: 'flex',
    flexWrap: 'wrap',
    gap: '10px', // Jarak antar langkah
    position: 'relative', // Posisi relatif agar connectorLine bisa diposisikan dengan benar
  },
  step: {
    flex: '1 1 16.6%', // Menyusun setiap langkah untuk mengambil 1/6 dari lebar container
    padding: '10px',
    boxSizing: 'border-box',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    textAlign: 'center',
    marginBottom: '10px',
    position: 'relative', // Agar connectorLine bisa diposisikan di dalam step
  },
  stepNumberContainer: {
    width: '40px', // Menentukan lebar oval
    height: '40px', // Menentukan tinggi oval
    borderRadius: '50%', // Membuat bentuk oval
    backgroundColor: '#0542CC', // Warna latar belakang oval
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: '8px',
  },
  stepNumber: {
    fontSize: '16px',
    color: '#fff', // Warna teks putih di dalam oval
    fontWeight: 'bold',
  },
  stepDescription: {
    fontSize: '14px',
    lineHeight: '1.5',
    color: '#333',
    textAlign: 'center',
    margin: '10px 0',
  },

  // Info Style
  infoBox: {
    padding: '20px',
    marginBottom: '20px',
  },
  startButton: {
    backgroundColor: '#0542cc',
    color: '#fff',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    marginTop: '15px',
  },
};

export default RegisterContent;
