import React, { useState, useEffect } from 'react';
import { useLocation, useNavigate, Link, Routes, Route } from 'react-router-dom';
import {
  AuthLogs,
  MessageLogs
} from './Section';

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

  useEffect(() => {
    if (window.location.pathname === '/wa-transaction') {
      navigate('wa-transaction-auth', { replace: true });
    }
  }, [navigate]);

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

  const settingsTabs = [
    { name: 'Authentication', link: 'wa-transaction-auth' },
    { name: 'Message', link: 'wa-transaction-message' }
  ];
  

  return (
    <div style={styles.container}>
      <div style={isMobile ? styles.wrapperMobile : styles.wrapper}>
        <div className={`d-flex ${isMobile ? 'flex-column' : 'flex-row'} justify-content-between align-items-center mb-3`}>
          <div className="d-flex flex-wrap">
            {settingsTabs.map((tab) => (
              <Link
                key={tab.link}
                to={tab.link}
                className={`btn ${window.location.pathname.includes(tab.link) ? 'btn-primary' : 'btn-light'} me-2 mb-2`}
                style={styles.tabLink}
              >
                {tab.name}
              </Link>
            ))}
          </div>
        </div>

        {/* Dynamic Tab Content */}
        <div className="tab-content">
          <Routes>
            <Route path="wa-transaction-auth" element={<AuthLogs />} />
            <Route path="wa-transaction-message" element={<MessageLogs />} />
          </Routes>
        </div>        
      </div>
    </div>
  );
};

export default Transaction;

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',
  },
  tabLink: {
    padding: '10px 20px',
  },
};
