import { Outlet, useNavigate } from 'react-router';
import {
  AppShell,
  Sidebar,
  TopBar,
} from '@cameleer/design-system';
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"
    />
  );
}

// Nav icon helpers
function DashboardIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <rect x="1" y="1" width="6" height="6" rx="1" fill="currentColor" />
      <rect x="9" y="1" width="6" height="6" rx="1" fill="currentColor" />
      <rect x="1" y="9" width="6" height="6" rx="1" fill="currentColor" />
      <rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" />
    </svg>
  );
}

function LicenseIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
      <path d="M5 8h6M5 5h6M5 11h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

function ObsIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.5" />
      <path d="M4 8h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <path d="M8 4v8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

function PlatformIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M8 1l6 3.5v7L8 15l-6-3.5v-7L8 1z" stroke="currentColor" strokeWidth="1.5" />
      <path d="M8 1v14M2 4.5L14 4.5M2 11.5L14 11.5" stroke="currentColor" strokeWidth="1" opacity="0.4" />
    </svg>
  );
}

export function Layout() {
  const navigate = useNavigate();
  const { logout } = useAuth();
  const scopes = useScopes();
  const { username } = useOrgStore();

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

      {/* Dashboard */}
      <Sidebar.Section
        icon={<DashboardIcon />}
        label="Dashboard"
        open={false}
        onToggle={() => navigate('/')}
      >
        {null}
      </Sidebar.Section>

      {/* License */}
      <Sidebar.Section
        icon={<LicenseIcon />}
        label="License"
        open={false}
        onToggle={() => navigate('/license')}
      >
        {null}
      </Sidebar.Section>

      {/* Platform Admin section */}
      {scopes.has('platform:admin') && (
        <Sidebar.Section
          icon={<PlatformIcon />}
          label="Platform"
          open={false}
          onToggle={() => navigate('/admin/tenants')}
        >
          {null}
        </Sidebar.Section>
      )}

      <Sidebar.Footer>
        {/* Link to the server observability dashboard */}
        <Sidebar.FooterLink
          icon={<ObsIcon />}
          label="Open Server Dashboard"
          onClick={() => window.open('/server/', '_blank', 'noopener')}
        />
      </Sidebar.Footer>
    </Sidebar>
  );

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