import React, { useEffect, useState } from 'react';
import { Link, Routes, Route, useNavigate } from 'react-router-dom';
import {
  Enroll,
  Compare,
  Liveness,
  Search,
  VerifySection
} from './Section';

const Verify = () => {
  const verifyTabs = [
    { name: 'Enroll', link: 'face-enroll' },
    { name: 'Verify', link: 'face-verifysection' },
    { name: 'Liveness', link: 'face-liveness' },
    { name: 'Compare', link: 'face-compare' },
    { name: 'Search', link: 'face-search' },
  ];

  const [isMobile, setIsMobile] = useState(false);
  const navigate = useNavigate();

  // Redirect otomatis ke rute default saat akses ke /face-verify
  useEffect(() => {
    if (window.location.pathname === '/face-verify') {
      navigate('face-enroll', { replace: true });
    }
  }, [navigate]);

  // Update state isMobile berdasarkan ukuran layar
  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    handleResize();
    window.addEventListener('resize', handleResize);

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

  return (
    <div className="container" style={styles.container}>
      {/* Static Content */}
      <div className="row-card border-left border-primary shadow mb-4" style={styles.welcomeCard}>
        <div className="d-flex flex-column justify-content-start align-items-start p-4">
          <h4 className="mb-3 text-start">
            <i className="fas fa-warning fa-bold me-3"></i>Alert
          </h4>
          <p className="mb-0 text-start">
            Get started now by creating an Application ID and explore all the demo services available on the dashboard.
            Experience the ease and flexibility of trying out all our features firsthand.
          </p>
          <div className="d-flex flex-row mt-3">
            <Link to="/createApps" style={{ textDecoration: 'none' }}>
              <button className="btn d-flex justify-content-center align-items-center me-2" style={styles.createButton}>
                <i className="fas fa-plus text-white me-2"></i>
                <p className="text-white mb-0">Create New App ID</p>
              </button>
            </Link>
          </div>
        </div>
      </div>

      {/* Tab Navigation */}
      <div style={styles.section}>
        <div className={`d-flex ${isMobile ? 'flex-column' : 'flex-row'} justify-content-between align-items-center mb-3`}>
          <div className="d-flex flex-wrap">
            {verifyTabs.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="face-enroll" element={<Enroll />} />
            <Route path="face-verifysection" element={<VerifySection />} />
            <Route path="face-liveness" element={<Liveness />} />
            <Route path="face-compare" element={<Compare />} />
            <Route path="face-search" element={<Search />} />
          </Routes>
        </div>
      </div>
    </div>
  );
};

export default Verify;

const styles = {
  container: {
    marginTop: '3%',
    padding: '0 15px',
  },
  welcomeCard: {
    backgroundColor: '#E2FBEA',
    borderLeft: '4px solid #0542CC',
    borderRadius: '5px',
    marginBottom: '20px',
  },
  createButton: {
    backgroundColor: '#0542CC',
  },
  section: {
    padding: '20px',
    border: '0.1px solid rgba(0, 0, 0, 0.2)',
    borderLeft: '4px solid #0542CC',
    borderRadius: '10px',
    width: '100%',
  },
  tabLink: {
    padding: '10px 20px',
  },
};