/* ============================================================
   Trazly · Demo Hub
   Landing: role selector + full sitemap of the design system.
   React 18 UMD + Babel standalone — no build step.
   Theme lives in memory only (reload resets). On navigation the
   chosen theme is forwarded to each kit via the ?theme= param.
   ============================================================ */

const { useState, useEffect } = React;

/* ---------- Inline SVG icons (stroke 2, round caps) ---------- */
const I = {
  sun:   '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M4.93 4.93l1.41 1.41"/><path d="M17.66 17.66l1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="M6.34 17.66l-1.41 1.41"/><path d="M19.07 4.93l-1.41 1.41"/>',
  moon:  '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>',
  arrow: '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>',
  ext:   '<line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/>',
};

const Svg = ({ name, size = 16, stroke = 2 }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={stroke}
    strokeLinecap="round"
    strokeLinejoin="round"
    dangerouslySetInnerHTML={{ __html: I[name] }}
  />
);

/* ---------- Data: roles ---------- */
const ROLES = [
  {
    key: 'admin', icon: '👥', label: 'Admin RRHH', sub: 'Vista de operación',
    desc: 'Panel completo para gestionar onboarding, offboarding, ausencias, directorio, documentos, accesos, activos, reportes y configuración del tenant.',
    tags: ['11 pantallas principales', 'Sidebar + topbar', 'CRUD completo'],
    cta: 'Entrar como Admin',
    target: 'Trazly Design System/ui_kits/web/index.html',
  },
  {
    key: 'empleado', icon: '🙋', label: 'Empleado', sub: 'Portal personal',
    desc: 'Vista del empleado: su onboarding/offboarding personal, tareas, documentos, ausencias y perfil. Switcher entre Juan (onboarding) y Carlos (offboarding).',
    tags: ['Portal autoservicio', 'Mis tareas', 'Mis ausencias'],
    cta: 'Entrar como Empleado',
    target: 'Trazly Design System/ui_kits/portal/index.html',
  },
  {
    key: 'cgt', icon: '🛡️', label: 'Super Admin CGT', sub: 'Backoffice de la plataforma',
    desc: 'Panel interno de CGT para gestionar todos los tenants de Trazly: clientes, suscripciones, soporte, métricas globales, auditoría y operaciones de la plataforma.',
    tags: ['Multi-tenant', 'Solo CGT', 'Métricas globales'],
    cta: 'Entrar como Super Admin',
    target: 'Trazly Design System/ui_kits/web/cgt/index.html',
  },
];

/* ---------- Data: sitemap ---------- */
const SITEMAP = [
  {
    title: 'Onboarding inicial · Flujo de cliente nuevo', dot: 'amber',
    items: [
      { name: 'Signup', desc: 'Registro de empresa y creación de cuenta.', target: 'Trazly Design System/ui_kits/web/auth/index.html' },
      { name: 'Setup wizard', desc: 'Asistente de configuración inicial del tenant.', target: 'Trazly Design System/ui_kits/web/setup/index.html' },
      { name: 'Billing', desc: 'Selección de plan y datos de facturación.', target: 'Trazly Design System/ui_kits/web/billing/index.html' },
    ],
  },
  {
    title: 'Web App · Admin RRHH', dot: 'teal',
    items: [
      { name: 'Login', desc: 'Pantalla de acceso al panel de administración.', target: 'Trazly Design System/ui_kits/web/index.html' },
      { name: 'Web app (todo)', desc: 'Router completo con las 11 pantallas del panel admin.', target: 'Trazly Design System/ui_kits/web/index.html' },
      { name: 'Vista mobile', desc: 'Adaptación responsive del panel para móvil.', target: 'Trazly Design System/ui_kits/web/mobile/index.html' },
    ],
  },
  {
    title: 'Portal del Empleado', dot: 'violet',
    items: [
      { name: 'Portal home', desc: 'Inicio del portal del empleado · autoservicio.', target: 'Trazly Design System/ui_kits/portal/index.html' },
      { name: 'Mis ausencias', desc: 'Listado de ausencias del propio empleado.', target: 'Trazly Design System/ui_kits/portal/absences-mine/index.html' },
      { name: 'Solicitar ausencia', desc: 'Formulario de solicitud de ausencia.', target: 'Trazly Design System/ui_kits/portal/absences-request/index.html' },
      { name: 'Widget de ausencias', desc: 'Componente compacto de saldo y solicitud.', target: 'Trazly Design System/ui_kits/portal/absences-widget/index.html' },
    ],
  },
  {
    title: 'Ausencias · Vistas Admin/Manager', dot: 'violet',
    items: [
      { name: 'Calendario ausencias', desc: 'Vista de calendario de ausencias del equipo.', target: 'Trazly Design System/ui_kits/web/absences/index.html' },
      { name: 'Lista de ausencias', desc: 'Tabla de ausencias con filtros.', target: 'Trazly Design System/ui_kits/web/absences-list/index.html' },
      { name: 'Saldos de ausencias', desc: 'Balances de días disponibles por empleado.', target: 'Trazly Design System/ui_kits/web/absences-balances/index.html' },
      { name: 'Aprobaciones manager', desc: 'Cola de aprobación de ausencias para managers.', target: 'Trazly Design System/ui_kits/web/absences-manager/index.html' },
      { name: 'Tipos de ausencia', desc: 'Configuración de tipos y políticas de ausencia.', target: 'Trazly Design System/ui_kits/web/absences-types/index.html' },
    ],
  },
  {
    title: 'Super Admin · Backoffice CGT', dot: 'coral',
    items: [
      { name: 'Panel CGT', desc: 'Backoffice multi-tenant de la plataforma Trazly.', target: 'Trazly Design System/ui_kits/web/cgt/index.html' },
    ],
  },
  {
    title: 'Patterns & estados', dot: 'grey',
    items: [
      { name: 'Search global', desc: 'Buscador transversal de la aplicación.', target: 'Trazly Design System/ui_kits/web/search/index.html' },
      { name: 'Notificaciones', desc: 'Centro de notificaciones y alertas.', target: 'Trazly Design System/ui_kits/web/notifications/index.html' },
      { name: 'Upload', desc: 'Patrón de carga de archivos.', target: 'Trazly Design System/ui_kits/web/upload/index.html' },
      { name: 'Editor de plantillas', desc: 'Editor de plantillas de documentos.', target: 'Trazly Design System/ui_kits/web/template-editor/index.html' },
      { name: 'Editor rich text', desc: 'Editor de texto enriquecido.', target: 'Trazly Design System/ui_kits/web/editor/index.html' },
      { name: 'Integraciones', desc: 'Conexiones con servicios externos.', target: 'Trazly Design System/ui_kits/web/integrations/index.html' },
      { name: 'RBAC · permisos', desc: 'Roles y control de permisos de acceso.', target: 'Trazly Design System/ui_kits/web/rbac/index.html' },
      { name: 'i18n', desc: 'Internacionalización e idiomas.', target: 'Trazly Design System/ui_kits/web/i18n/index.html' },
      { name: 'Patterns', desc: 'Patrones de UI reutilizables.', target: 'Trazly Design System/ui_kits/web/patterns/index.html' },
      { name: 'Data visualization', desc: 'Gráficas y visualización de datos.', target: 'Trazly Design System/ui_kits/web/dataviz/index.html' },
      { name: 'Empty states', desc: 'Estados vacíos de las distintas vistas.', target: 'Trazly Design System/ui_kits/web/empty/index.html' },
      { name: 'Errors', desc: 'Páginas y estados de error.', target: 'Trazly Design System/ui_kits/web/errors/index.html' },
      { name: 'Feedback', desc: 'Widget de feedback del usuario.', target: 'Trazly Design System/ui_kits/web/feedback/index.html' },
      { name: 'Accesibilidad', desc: 'Guías y verificaciones de accesibilidad.', target: 'Trazly Design System/ui_kits/web/a11y/index.html' },
    ],
  },
  {
    title: 'Design System · Referencia', dot: 'grey',
    items: [
      { name: 'Colores · marca', desc: 'Paleta de marca y colores núcleo.', target: 'Trazly Design System/preview/colors-brand-core.html' },
      { name: 'Colores · semántica', desc: 'Tokens de color semánticos.', target: 'Trazly Design System/preview/colors-semantic.html' },
      { name: 'Tipografía', desc: 'Escala tipográfica display.', target: 'Trazly Design System/preview/type-display-scale.html' },
      { name: 'Spacing & radii', desc: 'Escala de espaciado y radios.', target: 'Trazly Design System/preview/spacing-scale.html' },
      { name: 'Buttons', desc: 'Componente de botones.', target: 'Trazly Design System/preview/components-buttons.html' },
      { name: 'Cards', desc: 'Componente de tarjetas.', target: 'Trazly Design System/preview/components-cards.html' },
      { name: 'Sidebar nav', desc: 'Componente de navegación lateral.', target: 'Trazly Design System/preview/components-sidebar-nav.html' },
      { name: 'Tablas', desc: 'Componente de tablas.', target: 'Trazly Design System/preview/components-table.html' },
      { name: 'Inputs & controls', desc: 'Campos y controles de formulario.', target: 'Trazly Design System/preview/components-inputs.html' },
    ],
  },
];

/* ---------- Navigation ---------- */
const goTo = (target, theme) => {
  const url = new URL(target, window.location.href);
  url.searchParams.set('from', 'hub');
  url.searchParams.set('theme', theme);
  window.location.href = url.href;
};

/* ---------- Theme hook (memory only) ---------- */
const useTheme = () => {
  const [theme, setTheme] = useState(
    () => document.documentElement.getAttribute('data-theme') || 'dark'
  );
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);
  const toggle = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'));
  return [theme, toggle];
};

/* ---------- Components ---------- */
const TopBar = ({ theme, onToggle }) => (
  <header className="tz-hub-topbar">
    <div className="tz-hub-brand">
      <img
        className="tz-hub-logo"
        src={theme === 'dark' ? 'demo/assets/trazly-logo-dark.png' : 'demo/assets/trazly-logo-light.png'}
        alt="Trazly"
      />
      <span className="tz-hub-badge">Demo · UX Preview</span>
    </div>
    <div className="tz-hub-spacer" />
    <button className="tz-hub-theme" onClick={onToggle}>
      <Svg name={theme === 'dark' ? 'sun' : 'moon'} size={15} />
      {theme === 'dark' ? 'Light' : 'Dark'}
    </button>
  </header>
);

const Hero = () => (
  <section className="tz-hub-hero">
    <div className="tz-hub-eyebrow">
      <span className="tz-hub-eyebrow-dot" />
      Demo navegable · sin backend
    </div>
    <h1 className="tz-hub-title">
      Todo el ciclo del empleado — de la{' '}
      <span className="accent-t">bienvenida</span> a la{' '}
      <span className="accent-v">despedida</span>
    </h1>
    <p className="tz-hub-sub">
      Demo navegable del producto Trazly. Elige un rol para recorrer su flujo
      completo, o abre cualquier pantalla directamente desde el mapa de sitio.
    </p>
  </section>
);

const RoleCard = ({ role, theme }) => (
  <a
    className={`tz-role ${role.key}`}
    href={role.target}
    onClick={(e) => { e.preventDefault(); goTo(role.target, theme); }}
  >
    <div className="tz-role-icon">{role.icon}</div>
    <div className="tz-role-sub">{role.sub}</div>
    <h3 className="tz-role-name">{role.label}</h3>
    <p className="tz-role-desc">{role.desc}</p>
    <div className="tz-role-tags">
      {role.tags.map((t, i) => (
        <span key={i} className="tz-role-tag">{t}</span>
      ))}
    </div>
    <span className="tz-role-cta">
      {role.cta}
      <Svg name="arrow" size={15} />
    </span>
  </a>
);

const SitemapCard = ({ item, theme }) => (
  <a
    className="tz-sitemap-card"
    href={item.target}
    onClick={(e) => { e.preventDefault(); goTo(item.target, theme); }}
  >
    <div className="tz-sitemap-card-name">
      <span className="nm">{item.name}</span>
      <Svg name="ext" size={13} />
    </div>
    <div className="tz-sitemap-card-desc">{item.desc}</div>
  </a>
);

const Sitemap = ({ theme }) => {
  const total = SITEMAP.reduce((n, g) => n + g.items.length, 0);
  return (
    <section className="tz-hub-sitemap">
      <div className="tz-sitemap-head">
        <h2 className="tz-sitemap-title">Mapa de sitio</h2>
        <span className="tz-sitemap-count">{total} pantallas</span>
      </div>
      <p className="tz-sitemap-intro">
        Todas las pantallas del design system, agrupadas por área.
      </p>
      {SITEMAP.map((group, gi) => (
        <div className="tz-sitemap-group" key={gi}>
          <div className="tz-sitemap-group-h">
            <span className={`tz-sitemap-dot tz-dot-${group.dot}`} />
            <span className="label">{group.title}</span>
            <span className="line" />
          </div>
          <div className="tz-sitemap-cards">
            {group.items.map((item, ii) => (
              <SitemapCard key={ii} item={item} theme={theme} />
            ))}
          </div>
        </div>
      ))}
    </section>
  );
};

const Footer = () => (
  <footer className="tz-hub-footer">
    <div className="ft-logo">Trazly</div>
    <div className="ft-meta">Demo Hub · UX Preview · sin backend · {new Date().getFullYear()}</div>
  </footer>
);

const App = () => {
  const [theme, toggle] = useTheme();
  return (
    <React.Fragment>
      <TopBar theme={theme} onToggle={toggle} />
      <main className="tz-hub-main">
        <Hero />
        <div className="tz-hub-roles">
          {ROLES.map(role => (
            <RoleCard key={role.key} role={role} theme={theme} />
          ))}
        </div>
        <Sitemap theme={theme} />
      </main>
      <Footer />
    </React.Fragment>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);