import { Outlet, useNavigate, useLocation } from 'react-router';
import {
  AppShell,
  Sidebar,
  TopBar,
} from '@cameleer/design-system';
import { LayoutDashboard, ShieldCheck, Server, Users, Settings, KeyRound, Building } from 'lucide-react';
import { useAuth } from '../auth/useAuth';
import { useScopes } from '../auth/useScopes';
import { useOrgStore } from '../auth/useOrganization';
import cameleerLogo from '@cameleer/design-system/assets/cameleer3-logo.svg';

function CameleerLogo() {
  return (
    <img
      src={cameleerLogo}
      alt=""
      width="24"
      height="24"
      aria-hidden="true"
    />
  );
}

function isActive(location: ReturnType<typeof useLocation>, path: string) {
  return location.pathname === path || location.pathname.startsWith(path + '/');
}

export function Layout() {
  const navigate = useNavigate();
  const location = useLocation();
  const { logout } = useAuth();
  const scopes = useScopes();
  const { username, organizations, currentOrgId } = useOrgStore();

  const isVendor = scopes.has('platform:admin');
  const isTenantAdmin = scopes.has('tenant:manage');
  const onVendorRoute = location.pathname.startsWith('/vendor');
  // Vendor on vendor routes: show only TENANTS. On tenant routes: show tenant portal too (for debugging).
  const showTenantPortal = isTenantAdmin && (!isVendor || !onVendorRoute);

  // Determine current org slug for server dashboard link
  const currentOrg = organizations.find((o) => o.id === currentOrgId);
  const serverDashboardHref = currentOrg?.slug ? `/t/${currentOrg.slug}/` : '/server/';

  // Build breadcrumbs from path
  const segments = location.pathname.replace(/^\//, '').split('/').filter(Boolean);
  const breadcrumb = segments.map((seg) => {
    const label = seg.charAt(0).toUpperCase() + seg.slice(1).replace(/-/g, ' ');
    return { label };
  });

  const sidebar = (
    <Sidebar collapsed={false} onCollapseToggle={() => {}}>
      <Sidebar.Header
        logo={<CameleerLogo />}
        title="Cameleer SaaS"
        onClick={() => navigate(isVendor ? '/vendor/tenants' : '/tenant')}
      />

      {/* Vendor console — only visible to platform:admin */}
      {isVendor && (
        <Sidebar.Section
          icon={<Building size={16} />}
          label="Tenants"
          open={false}
          active={isActive(location, '/vendor/tenants')}
          onToggle={() => navigate('/vendor/tenants')}
        >
          {null}
        </Sidebar.Section>
      )}

      {/* Tenant portal — visible to tenant admins; hidden for vendor on vendor routes */}
      {showTenantPortal && (
        <>
          <Sidebar.Section
            icon={<LayoutDashboard size={16} />}
            label="Dashboard"
            open={false}
            active={location.pathname === '/tenant'}
            onToggle={() => navigate('/tenant')}
          >
            {null}
          </Sidebar.Section>

          <Sidebar.Section
            icon={<ShieldCheck size={16} />}
            label="License"
            open={false}
            active={isActive(location, '/tenant/license')}
            onToggle={() => navigate('/tenant/license')}
          >
            {null}
          </Sidebar.Section>

          <Sidebar.Section
            icon={<KeyRound size={16} />}
            label="OIDC"
            open={false}
            active={isActive(location, '/tenant/oidc')}
            onToggle={() => navigate('/tenant/oidc')}
          >
            {null}
          </Sidebar.Section>

          <Sidebar.Section
            icon={<Users size={16} />}
            label="Team"
            open={false}
            active={isActive(location, '/tenant/team')}
            onToggle={() => navigate('/tenant/team')}
          >
            {null}
          </Sidebar.Section>

          <Sidebar.Section
            icon={<Settings size={16} />}
            label="Settings"
            open={false}
            active={isActive(location, '/tenant/settings')}
            onToggle={() => navigate('/tenant/settings')}
          >
            {null}
          </Sidebar.Section>
        </>
      )}

      <Sidebar.Footer>
        <Sidebar.FooterLink
          icon={<Server size={16} />}
          label="Open Server Dashboard"
          onClick={() => window.open(serverDashboardHref, '_blank', 'noopener')}
        />
      </Sidebar.Footer>
    </Sidebar>
  );

  return (
    <AppShell sidebar={sidebar}>
      <TopBar
        breadcrumb={breadcrumb}
        user={username ? { name: username } : undefined}
        onLogout={logout}
      />
      <Outlet />
    </AppShell>
  );
}