oO/apps/admin/src/components/AdminShell.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';

const mlflowUrl = process.env.NEXT_PUBLIC_MLFLOW_URL ?? '/mlflow';

type NavItem = {
  href: string;
  label: string;
  external?: boolean;
  svcName?: string; // key in the health services map
};

type NavSection = {
  label?: string;
  items: NavItem[];
};

const NAV: NavSection[] = [
  {
    items: [{ href: '/', label: 'Overview' }],
  },
  {
    label: 'Signals',
    items: [
      { href: '/users',        label: 'Users' },
      { href: '/events',       label: 'Events' },
      { href: '/features',     label: 'Features' },
      { href: '/data-quality', label: 'Data quality' },
    ],
  },
  {
    label: 'Recommender',
    items: [
      { href: '/tips',             label: 'Tips' },
      { href: '/reward-analytics', label: 'Rewards' },
      { href: '/simulate',         label: 'Simulations' },
    ],
  },
  {
    label: 'Operations',
    items: [
      { href: '/health', label: 'Health' },
      { href: '/ops',    label: 'Ops' },
      { href: '/sql',    label: 'SQL runner' },
      { href: '/audit',  label: 'Audit log' },
    ],
  },
  {
    label: 'Resources',
    items: [
      { href: '/docs',     label: 'Docs' },
      { href: mlflowUrl, label: 'MLflow ↗', external: true, svcName: 'mlflow' },
    ],
  },
];

const STATUS_DOT: Record<string, string> = {
  ok:       'bg-green-500',
  degraded: 'bg-yellow-400',
  down:     'bg-red-500',
};

export function AdminShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const [svcStatus, setSvcStatus] = useState<Record<string, string>>({});

  useEffect(() => {
    fetch('/api/admin/health', { credentials: 'include' })
      .then((r) => r.json())
      .then((data: { services?: { name: string; status: string }[] }) => {
        const map: Record<string, string> = {};
        for (const s of data.services ?? []) map[s.name] = s.status;
        setSvcStatus(map);
      })
      .catch(() => {});
  }, []);

  return (
    <div className="flex min-h-screen">
      {/* Sidebar */}
      <aside className="w-52 flex-shrink-0 border-r border-gray-800 bg-gray-950 flex flex-col">
        <div className="px-5 py-4 border-b border-gray-800">
          <span className="text-lg font-bold tracking-tight">oO</span>
          <span className="ml-2 text-xs text-gray-500 font-medium uppercase tracking-widest">
            Admin
          </span>
        </div>
        <nav className="flex-1 px-2 py-3 overflow-y-auto">
          {NAV.map((section, sectionIdx) => (
            <div key={section.label ?? `top-${sectionIdx}`} className={sectionIdx === 0 ? '' : 'pt-3'}>
              {section.label && (
                <div className="pb-1 px-3">
                  <span className="text-xs text-gray-600 uppercase tracking-wider font-medium">
                    {section.label}
                  </span>
                </div>
              )}
              <div className="space-y-0.5">
                {section.items.map((item) => {
                  const active =
                    !item.external &&
                    (item.href === '/' ? pathname === '/' : pathname.startsWith(item.href));
                  const className = `flex items-center gap-2 px-3 py-2 rounded text-sm transition-colors ${
                    active
                      ? 'bg-gray-800 text-white font-medium'
                      : item.external
                        ? 'text-gray-500 hover:text-white hover:bg-gray-900'
                        : 'text-gray-400 hover:text-white hover:bg-gray-900'
                  }`;
                  const dot = item.svcName
                    ? svcStatus[item.svcName]
                      ? <span className={`inline-block w-1.5 h-1.5 rounded-full flex-shrink-0 ${STATUS_DOT[svcStatus[item.svcName]] ?? STATUS_DOT.down}`} />
                      : <span className="inline-block w-1.5 h-1.5 rounded-full flex-shrink-0 bg-gray-700" />
                    : null;

                  return item.external ? (
                    <a
                      key={item.href}
                      href={item.href}
                      target="_blank"
                      rel="noreferrer"
                      className={className}
                    >
                      {dot}
                      {item.label}
                    </a>
                  ) : (
                    <Link key={item.href} href={item.href} className={className}>
                      {item.label}
                    </Link>
                  );
                })}
              </div>
            </div>
          ))}
        </nav>
      </aside>
      {/* Main content */}
      <main className="flex-1 overflow-auto p-6">{children}</main>
    </div>
  );
}