import React, { useEffect, useState } from 'react';
import { Link, useNavigate, useLocation, Outlet } from 'react-router-dom';
import { getAuthToken, removeAuthToken } from '../utils/api';

export const AdminLayout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [user, setUser] = useState<any>(null);

  useEffect(() => {
    const token = getAuthToken();
    if (!token) {
      navigate('/admin/login');
      return;
    }
    const storedUser = localStorage.getItem('admin_user');
    if (storedUser) {
      setUser(JSON.parse(storedUser));
    }
  }, [navigate]);

  const handleLogout = () => {
    removeAuthToken();
    localStorage.removeItem('admin_user');
    navigate('/admin/login');
  };

  const navItems = [
    { label: 'Dashboard Overview', path: '/admin/dashboard', icon: '📊' },
    { label: 'Berita & Informasi', path: '/admin/news', icon: '📰' },
    { label: 'Galeri & Media', path: '/admin/gallery', icon: '🖼️' },
    { label: 'Struktur Organisasi', path: '/admin/organization', icon: '🏢' },
    { label: 'Capaian & Prestasi', path: '/admin/achievements', icon: '🏆' },
  ];

  return (
    <div style={styles.appContainer}>
      {/* Sidebar */}
      <aside style={styles.sidebar}>
        <div style={styles.brand}>
          <img src="/bnnlogo.png" alt="Logo" style={styles.logo} />
          <div>
            <h3 style={styles.brandTitle}>Admin BNN</h3>
            <span style={styles.brandSubtitle}>CMS Museum</span>
          </div>
        </div>

        <nav style={styles.navMenu}>
          {navItems.map((item) => {
            const isActive = location.pathname === item.path;
            return (
              <Link
                key={item.path}
                to={item.path}
                style={{
                  ...styles.navItem,
                  ...(isActive ? styles.navItemActive : {}),
                }}
              >
                <span style={styles.navIcon}>{item.icon}</span>
                <span>{item.label}</span>
              </Link>
            );
          })}
        </nav>

        <div style={styles.sidebarFooter}>
          <a href="/" target="_blank" rel="noreferrer" style={styles.previewBtn}>
            🌐 Tampilan Publik
          </a>
          <button onClick={handleLogout} style={styles.logoutBtn}>
            🚪 Keluar
          </button>
        </div>
      </aside>

      {/* Main Content Area */}
      <main style={styles.mainContent}>
        <header style={styles.topHeader}>
          <div>
            <h2 style={styles.headerTitle}>Halaman Kelola CMS</h2>
            <p style={styles.headerSubtitle}>Kelola seluruh konten museum dinamis dari MySQL</p>
          </div>
          <div style={styles.userInfo}>
            <span style={styles.userBadge}>Admin</span>
            <span style={styles.userName}>{user?.name || 'Administrator'}</span>
          </div>
        </header>

        <div style={styles.pageBody}>
          <Outlet />
        </div>
      </main>
    </div>
  );
};

const styles: { [key: string]: React.CSSProperties } = {
  appContainer: {
    display: 'flex',
    minHeight: '100vh',
    backgroundColor: '#0f172a',
    color: '#f8fafc',
    fontFamily: "'Inter', sans-serif",
  },
  sidebar: {
    width: '260px',
    backgroundColor: '#1e293b',
    borderRight: '1px solid #334155',
    display: 'flex',
    flexDirection: 'column',
    position: 'fixed',
    top: 0,
    bottom: 0,
    left: 0,
    zIndex: 100,
  },
  brand: {
    padding: '24px 20px',
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    borderBottom: '1px solid #334155',
  },
  logo: {
    width: '40px',
    height: '40px',
    objectFit: 'contain',
  },
  brandTitle: {
    margin: 0,
    fontSize: '16px',
    fontWeight: 700,
    color: '#ffffff',
  },
  brandSubtitle: {
    fontSize: '12px',
    color: '#94a3b8',
  },
  navMenu: {
    flex: 1,
    padding: '20px 12px',
    display: 'flex',
    flexDirection: 'column',
    gap: '6px',
  },
  navItem: {
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    padding: '12px 16px',
    borderRadius: '10px',
    color: '#cbd5e1',
    textDecoration: 'none',
    fontSize: '14px',
    fontWeight: 500,
    transition: 'all 0.2s',
  },
  navItemActive: {
    backgroundColor: '#2563eb',
    color: '#ffffff',
    fontWeight: 600,
  },
  navIcon: {
    fontSize: '18px',
  },
  sidebarFooter: {
    padding: '20px',
    borderTop: '1px solid #334155',
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
  },
  previewBtn: {
    textAlign: 'center',
    padding: '10px',
    borderRadius: '8px',
    backgroundColor: '#334155',
    color: '#e2e8f0',
    textDecoration: 'none',
    fontSize: '13px',
    fontWeight: 500,
  },
  logoutBtn: {
    padding: '10px',
    borderRadius: '8px',
    backgroundColor: '#991b1b',
    color: '#ffffff',
    border: 'none',
    cursor: 'pointer',
    fontSize: '13px',
    fontWeight: 600,
  },
  mainContent: {
    marginLeft: '260px',
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    minHeight: '100vh',
  },
  topHeader: {
    backgroundColor: '#1e293b',
    padding: '20px 32px',
    borderBottom: '1px solid #334155',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  headerTitle: {
    margin: '0 0 4px 0',
    fontSize: '20px',
    fontWeight: 700,
  },
  headerSubtitle: {
    margin: 0,
    fontSize: '13px',
    color: '#94a3b8',
  },
  userInfo: {
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
  },
  userBadge: {
    backgroundColor: '#3b82f6',
    color: '#ffffff',
    fontSize: '11px',
    padding: '4px 8px',
    borderRadius: '6px',
    fontWeight: 700,
    textTransform: 'uppercase',
  },
  userName: {
    fontSize: '14px',
    fontWeight: 600,
  },
  pageBody: {
    padding: '32px',
    flex: 1,
  },
};