Sidebar

import { Sidebar } from 'boltdocs/primitives'

// docs/components/CustomSidebar.tsx
import React from 'react'
import { Sidebar } from 'boltdocs/primitives'
import { useRoutes } from 'boltdocs/client'

export default function CustomSidebar() {
  const { routes } = useRoutes()

  return (
    <>
      {/* 1. Contenedor de Sidebar de Escritorio */}
      <Sidebar className="hidden lg:flex border-r border-subtle bg-zinc-50 dark:bg-zinc-950">
        <Sidebar.Header className="px-4 py-3 flex items-center justify-between border-b">
          <span className="text-xs font-bold uppercase tracking-wider text-muted">Navegación</span>
        </Sidebar.Header>
        <Sidebar.Content>
          {/* Maneja automáticamente rutas anidadas colapsables y encabezados de grupo */}
          <Sidebar.Items routes={routes} />
        </Sidebar.Content>
      </Sidebar>

      {/* 2. Contenedor de Cajón Móvil Responsivo */}
      <Sidebar.Mobile className="bg-zinc-50 dark:bg-zinc-950">
        <Sidebar.Header className="px-4 py-3 flex items-center justify-between border-b">
          <span className="text-xs font-bold uppercase tracking-wider text-muted">Menú</span>
        </Sidebar.Header>
        <Sidebar.Content>
          <Sidebar.Items routes={routes} />
        </Sidebar.Content>
      </Sidebar.Mobile>
    </>
  )
}

// docs/components/ProductionSidebar.tsx
import React from 'react'
import { Sidebar, Button, Menu } from 'boltdocs/primitives'
import { useRoutes, useNavbar, useUI, useVersion, useI18n } from 'boltdocs/client'
import { X, ChevronDown, Languages } from 'lucide-react'

export default function ProductionSidebar() {
  const { routes, config } = useRoutes()
  const { logo, title, logoProps } = useNavbar()
  const { closeSidebar } = useUI()

  const { currentVersionLabel, availableVersions, handleVersionChange } = useVersion()
  const { currentLocale, availableLocales, handleLocaleChange } = useI18n()

  const SidebarLogo = logo ? (
    <img
      src={logo}
      alt={logoProps?.alt || title}
      width={24}
      height={24}
      className="rounded-lg"
    />
  ) : null

  // 1. Selector de Cambio de Versión para Diseños Móviles
  const MobileVersionSelector = availableVersions.length > 0 && (
    <select
      value={availableVersions.find(v => v.isCurrent)?.value}
      onChange={(e) => handleVersionChange(e.target.value)}
      className="flex-1 bg-surface border border-subtle rounded-lg px-3 py-2 text-xs font-semibold"
    >
      {availableVersions.map(v => (
        <option key={v.key} value={v.value}>{v.label}</option>
      ))}
    </select>
  )

  // 2. Selector de Idioma para Diseños Móviles
  const MobileLocaleSelector = availableLocales.length > 0 && (
    <select
      value={currentLocale}
      onChange={(e) => handleLocaleChange(e.target.value)}
      className="flex-1 bg-surface border border-subtle rounded-lg px-3 py-2 text-xs font-semibold"
    >
      {availableLocales.map(loc => (
        <option key={loc.key} value={loc.value}>{loc.label}</option>
      ))}
    </select>
  )

  const hasMobileSelectors = availableVersions.length > 0 || availableLocales.length > 0

  return (
    <>
      {/* A. Panel de Sidebar de Escritorio */}
      <Sidebar className="hidden lg:flex border-r border-subtle bg-main">
        <Sidebar.Content>
          <Sidebar.Items routes={routes} />
        </Sidebar.Content>
      </Sidebar>

      {/* B. Panel de Cajón Móvil */}
      <Sidebar.Mobile className="bg-main">
        <Sidebar.Header className="flex items-center justify-between border-b border-subtle px-4 py-3">
          <div className="flex items-center gap-3">
            {SidebarLogo}
            <span className="font-bold text-base text-body truncate max-w-[140px]">
              {title}
            </span>
          </div>
          
          <Button
            onPress={closeSidebar}
            className="h-8 w-8 flex items-center justify-center text-muted hover:text-body rounded-lg hover:bg-surface transition-colors"
          >
            <X size={18} />
          </Button>
        </Sidebar.Header>

        <Sidebar.Content className="p-4">
          {/* Menús desplegables de Versión/Idioma incrustados dentro del cajón móvil */}
          {hasMobileSelectors && (
            <div className="flex flex-col gap-3 mb-6">
              <div className="flex gap-2">
                {MobileVersionSelector}
                {MobileLocaleSelector}
              </div>
              <div className="border-b border-subtle my-2" />
            </div>
          )}

          <Sidebar.Items routes={routes} />
        </Sidebar.Content>
      </Sidebar.Mobile>
    </>
  )
}