import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

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

  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const Breadcrumb = ({ path }) => {
    return (
      <nav style={styles.breadcrumb}>
        {path.map((item, index) => (
          <span key={index}>
            {index > 0 && ' > '}
            <a
              href={item.link}
              style={{
                ...styles.breadcrumbLink,
                fontWeight: location.pathname === item.link ? 'bold' : 'normal',
              }}
            >
              {item.name}
            </a>
          </span>
        ))}
      </nav>
    );
  };

  const breadcrumbPath = [
    { name: 'Wa Integration', link: '/wa-integration' },
    { name: 'Add Setting', link: '/wa-createSettings' },
  ];

  return (
    <div style={styles.container}>
      <div style={isMobile ? styles.wrapperMobile : styles.wrapper}>
        <Breadcrumb path={breadcrumbPath} />
        <h2 style={styles.header}>Create Settings</h2>

        <div style={isMobile ? styles.formWrapperMobile : styles.formWrapper}>
          {/* Left Form Section */}
          <div style={styles.formSection}>
            <div style={styles.inputGroup}>
              <label style={styles.label}>Application ID</label>
              <select style={styles.input}>
                <option value="">Select Application</option>
              </select>
            </div>
            <div style={styles.inputGroup}>
              <label style={styles.label}>Inbound Configuration</label>
              <select style={styles.input}>
                <option value="">Select Configuration</option>
              </select>
            </div>
            <div style={styles.inputGroup}>
              <label style={styles.label}>Webhook URL</label>
              <input
                type="text"
                placeholder="Enter Webhook URL"
                style={styles.input}
              />
            </div>
            <div style={styles.inputGroup}>
              <label style={styles.label}>Event</label>
              <div style={styles.checkboxGroup}>
                <label>
                  <input type="checkbox" />
                  Message Created
                </label>
                <label>
                  <input type="checkbox" />
                  Message Updated
                </label>
              </div>
            </div>
            <button style={styles.button}>Add Now</button>
          </div>

          {/* Right WhatsApp Details Section */}
          <div style={styles.detailSection}>
            <h3 style={styles.detailHeader}>WhatsApp Channel Detail</h3>
            <div style={styles.detailItem}>
              <strong>Business Account Name:</strong> RekanVeri
            </div>
            <div style={styles.detailItem}>
              <strong>WABA ID:</strong> 112917284928438
            </div>
            <div style={styles.detailItem}>
              <strong>WhatsApp Number:</strong> 6287736766208
            </div>
            <div style={styles.detailItem}>
              <strong>Channel Name:</strong> RekanVeri
            </div>
            <div style={styles.detailItem}>
              <strong>Eligible for Inbound:</strong> YES
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CreateSettings;

const styles = {
  container: {
    padding: '1rem',
    width: '100%',
    margin: '0 auto',
    boxSizing: 'border-box',
  },
  wrapper: {
    display: 'flex',
    flexDirection: 'column',
    border: '1px solid #ddd',
    borderRadius: '8px',
    padding: '1.5rem',
    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
    backgroundColor: '#fff',
    maxWidth: '1200px',
    margin: '0 auto',
    borderLeft: '5px solid #0542cc',
  },
  wrapperMobile: {
    display: 'flex',
    flexDirection: 'column',
    border: '1px solid #ddd',
    borderRadius: '8px',
    padding: '1rem',
    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
    backgroundColor: '#fff',
    borderLeft: '5px solid #0542cc',
  },
  breadcrumb: {
    marginBottom: '1rem',
    fontSize: '0.9rem',
  },
  breadcrumbLink: {
    textDecoration: 'none',
    color: '#0542cc',
  },
  header: {
    marginBottom: '1rem',
    fontSize: '1.5rem',
  },
  formWrapper: {
    display: 'flex',
    gap: '2rem',
    marginTop: '1rem',
  },
  formWrapperMobile: {
    display: 'flex',
    flexDirection: 'column',
    gap: '1rem',
    marginTop: '1rem',
  },
  formSection: {
    flex: 2,
    display: 'flex',
    flexDirection: 'column',
    gap: '1rem',
  },
  inputGroup: {
    display: 'flex',
    flexDirection: 'column',
    gap: '0.5rem',
  },
  label: {
    fontWeight: 'bold',
  },
  input: {
    padding: '0.5rem',
    border: '1px solid #ddd',
    borderRadius: '4px',
    width: '100%',
  },
  checkboxGroup: {
    display: 'flex',
    flexDirection: 'column',
    gap: '0.5rem',
  },
  button: {
    padding: '0.8rem 1.5rem',
    backgroundColor: '#0542cc',
    color: '#fff',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
    alignSelf: 'flex-start',
  },
  detailSection: {
    flex: 1,
    backgroundColor: '#f5f9ff',
    padding: '1rem',
    border: '1px solid #ddd',
    borderRadius: '8px',
  },
  detailHeader: {
    fontSize: '1.2rem',
    marginBottom: '1rem',
    color: '#0542cc',
  },
  detailItem: {
    marginBottom: '0.5rem',
    fontSize: '0.9rem',
  },
};