import { Outlet, useNavigate, useLocation } from 'react-router';
import { Tabs } from '@cameleer/design-system';
import { ArrowLeft, LogOut } from 'lucide-react';
import { useAuthStore } from '../../auth/auth-store';
import styles from './AdminLayout.module.css';

const ADMIN_TABS = [
  { label: 'User Management', value: '/admin/rbac' },
  { label: 'Audit Log', value: '/admin/audit' },
  { label: 'OIDC', value: '/admin/oidc' },
  { label: 'App Config', value: '/admin/appconfig' },
  { label: 'Database', value: '/admin/database' },
  { label: 'ClickHouse', value: '/admin/clickhouse' },
];

export default function AdminLayout() {
  const navigate = useNavigate();
  const location = useLocation();
  const { username, logout } = useAuthStore();

  const handleBack = () => navigate('/exchanges');
  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  return (
    <div>
      <header className={styles.header}>
        <button className={styles.backBtn} onClick={handleBack}>
          <ArrowLeft size={16} />
          Back
        </button>
        <span className={styles.title}>Admin</span>
        <div className={styles.userSection}>
          <span className={styles.username}>{username}</span>
          <button className={styles.logoutBtn} onClick={handleLogout}>
            <LogOut size={14} />
          </button>
        </div>
      </header>
      <Tabs
        tabs={ADMIN_TABS}
        active={location.pathname}
        onChange={(path) => navigate(path)}
      />
      <div className={styles.content}>
        <Outlet />
      </div>
    </div>
  );
}