(() => {
  const { useState, useEffect } = window.DC;

  function DocsTabs({ tabs, activeTab, onChange }) {
    return (
      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-body" style={{ padding: 12 }}>
          <div className="nav-tabs-wrap settings-tabs-wrap internal-tabs-wrap">
            <div className="nav-tabs settings-tabs internal-tabs">
              {tabs.map((tab) => (
                <button
                  key={tab.key}
                  type="button"
                  onClick={() => onChange(tab.key)}
                  className={`nav-tab${activeTab === tab.key ? " active" : ""}`}
                  title={tab.label}
                >
                  <span className="nav-tab-icon" aria-hidden="true">{tab.icon}</span>
                  <span className="nav-tab-text">{tab.label}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  function DocStepList({ items }) {
    return (
      <div className="docs-step-list">
        {items.map((item, index) => (
          <div key={`${item.title}-${index}`} className="docs-step-card">
            <div className="docs-step-number">{index + 1}</div>
            <div className="docs-step-body">
              <div className="docs-step-title">{item.title}</div>
              <div className="docs-step-text">{item.text}</div>
              {item.command && <pre className="docs-code-block">{item.command}</pre>}
            </div>
          </div>
        ))}
      </div>
    );
  }

  function DocChecklist({ title, items, tone = "#22d3ee" }) {
    return (
      <div className="docs-checklist-card" style={{ "--docs-tone": tone }}>
        <div className="docs-checklist-title">{title}</div>
        <div className="docs-checklist-items">
          {items.map((item) => (
            <div key={item} className="docs-checklist-item">{item}</div>
          ))}
        </div>
      </div>
    );
  }

  function DocCommandBlock({ title, commands }) {
    return (
      <div className="docs-command-card">
        <div className="docs-command-title">{title}</div>
        <pre className="docs-code-block">{commands.join("\n")}</pre>
      </div>
    );
  }

  function WorkflowTab() {
    const devSteps = [
      {
        title: "Actualizar main y crear rama de trabajo",
        text: "Todo cambio debe nacer desde la ultima version de main para reducir conflictos y evitar que test valide una base desactualizada.",
        command: [
          "git checkout main",
          "git pull origin main",
          "git checkout -b feature/nombre-del-cambio",
        ].join("\n"),
      },
      {
        title: "Desarrollar, guardar y subir la rama",
        text: "El desarrollador avanza en su rama y publica commits pequenos y entendibles.",
        command: [
          "git add .",
          "git commit -m \"Descripcion corta del cambio\"",
          "git push origin feature/nombre-del-cambio",
        ].join("\n"),
      },
      {
        title: "Actualizar la rama con main",
        text: "Antes de integrar, el desarrollador trae los cambios recientes de main para resolver conflictos en su propio branch y no durante el despliegue.",
        command: [
          "git checkout main",
          "git pull origin main",
          "git checkout feature/nombre-del-cambio",
          "git merge main",
        ].join("\n"),
      },
      {
        title: "Integrar el cambio a main",
        text: "La opcion recomendada es un Pull Request. Si el equipo decide trabajar por consola, la integracion debe hacerse de forma controlada y luego subir main.",
        command: [
          "git checkout main",
          "git pull origin main",
          "git merge feature/nombre-del-cambio",
          "git push origin main",
        ].join("\n"),
      },
      {
        title: "Desplegar main a test",
        text: "El desarrollador entra al sistema, selecciona el branch main y hace deploy solo al ambiente de test. Nunca se despliega una feature branch directo a produccion.",
      },
      {
        title: "Validar y liberar para produccion",
        text: "Si test queda correcto, el desarrollador registra el commit validado y avisa que el cambio quedo aprobado para produccion. Produccion se despliega despues usando ese mismo main.",
      },
    ];

    const prodSteps = [
      {
        title: "Confirmar validacion de test",
        text: "Antes de tocar produccion, revisar que el deploy de test haya sido exitoso, que el branch desplegado sea main y que el commit validado sea el esperado.",
      },
      {
        title: "Actualizar repositorio local y verificar commit",
        text: "Asi se confirma que produccion recibira exactamente la misma version que fue probada en test.",
        command: [
          "git checkout main",
          "git pull origin main",
          "git log --oneline -n 10",
          "git rev-parse --short HEAD",
        ].join("\n"),
      },
      {
        title: "Ejecutar deploy a clientes",
        text: "El responsable de produccion entra al sistema, selecciona main y despliega a todos los servidores o clientes definidos para el ambiente productivo.",
      },
      {
        title: "Verificacion post-deploy",
        text: "Despues del despliegue, se revisan resultados por servidor, estado de dominios y cualquier rollback o alerta disparada por el sistema.",
      },
    ];

    return (
      <div className="docs-stack">
        <div className="card">
          <div className="card-head">Proceso oficial</div>
          <div className="card-body">
            <div className="alert alert-info">
              Regla base: tanto test como produccion se despliegan desde <strong>main</strong>. Las ramas de trabajo sirven para desarrollar e integrar, no para desplegar a clientes.
            </div>
            <div className="docs-section-title">Flujo del desarrollador</div>
            <DocStepList items={devSteps} />
          </div>
        </div>

        <div className="card">
          <div className="card-head">Produccion</div>
          <div className="card-body">
            <div className="docs-section-title">Flujo del responsable de produccion</div>
            <DocStepList items={prodSteps} />
          </div>
        </div>
      </div>
    );
  }

  function RolesTab() {
    return (
      <div className="docs-stack">
        <div className="card">
          <div className="card-head">Roles recomendados</div>
          <div className="card-body">
            <div className="docs-grid">
              <DocChecklist
                title="Desarrollador"
                tone="#22d3ee"
                items={[
                  "Trabaja en su propia rama.",
                  "Integra el cambio a main.",
                  "Despliega main al ambiente test.",
                  "Valida el comportamiento funcional.",
                  "No despliega a produccion.",
                ]}
              />
              <DocChecklist
                title="Responsable de produccion"
                tone="#fbbf24"
                items={[
                  "Verifica que test haya quedado aprobado.",
                  "Confirma el commit validado en main.",
                  "Ejecuta el deploy a todos los clientes.",
                  "Revisa resultados, alertas y rollback.",
                  "Define la ventana operativa de salida.",
                ]}
              />
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">Reglas operativas</div>
          <div className="card-body">
            <div className="docs-grid">
              <DocChecklist
                title="Si se permite"
                tone="#22d3a5"
                items={[
                  "Desarrollar en ramas feature/*.",
                  "Hacer merge a main antes del deploy a test.",
                  "Permitir que el dev ejecute deploy solo en test.",
                  "Usar preview, validacion y rollback cuando aplique.",
                ]}
              />
              <DocChecklist
                title="No se permite"
                tone="#f43f5e"
                items={[
                  "Desplegar feature branches a produccion.",
                  "Saltar la validacion en test para cambios funcionales.",
                  "Enviar a produccion un commit distinto al validado.",
                  "Dar permisos de produccion a todos los usuarios.",
                ]}
              />
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">Comandos de referencia</div>
          <div className="card-body">
            <div className="docs-grid">
              <DocCommandBlock
                title="Flujo rapido del desarrollador"
                commands={[
                  "git checkout main",
                  "git pull origin main",
                  "git checkout -b feature/nombre-del-cambio",
                  "git add .",
                  "git commit -m \"Descripcion corta del cambio\"",
                  "git push origin feature/nombre-del-cambio",
                  "git checkout main",
                  "git pull origin main",
                  "git merge feature/nombre-del-cambio",
                  "git push origin main",
                ]}
              />
              <DocCommandBlock
                title="Verificacion previa a produccion"
                commands={[
                  "git checkout main",
                  "git pull origin main",
                  "git log --oneline -n 10",
                  "git rev-parse --short HEAD",
                ]}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }

  function TabsGuideTab({ currentUser }) {
    const isViewer = currentUser?.role === "viewer";
    const isSuperAdmin = currentUser?.role === "superadmin";
    const tabs = [
      {
        key: "dashboard",
        label: "Dashboard",
        summary: "Panel ejecutivo del estado general, actividad reciente e incidentes visibles.",
        when: "Usalo al iniciar el dia o para una lectura rapida del sistema.",
      },
      {
        key: "servers",
        label: "Servidores",
        summary: "Alta, edicion y revision de servidores, usuarios Virtualmin y acciones por servidor.",
        when: "Usalo para registrar infraestructura, revisar usuarios desplegables o ejecutar acciones puntuales.",
      },
      ...(!isViewer ? [{
        key: "deploy",
        label: "Deploy",
        summary: "Centro principal para previews, despliegues, aprobaciones, validacion post-deploy y sync de test.",
        when: "Usalo para mover main a test o produccion de forma controlada.",
      }] : []),
      ...(!isViewer ? [{
        key: "actions",
        label: "Acciones",
        summary: "Ejecucion de acciones HTTP o remotas y consulta de su historial.",
        when: "Usalo para tareas operativas o pasos post-deploy que no son un despliegue completo.",
      }] : []),
      {
        key: "monitor",
        label: "Monitor",
        summary: "Metricas y salud por servidor con historico de CPU, RAM, disco y cargas.",
        when: "Usalo para detectar degradacion tecnica o confirmar estabilidad despues de un cambio.",
      },
      ...(isSuperAdmin ? [{
        key: "noc",
        label: "NOC",
        summary: "Vista priorizada de incidentes criticos, riesgo por servidor y acciones de respuesta.",
        when: "Usalo durante incidentes o cuando necesitas una vista operativa mas agresiva.",
      }] : []),
      ...(isSuperAdmin ? [{
        key: "ops",
        label: "Ops",
        summary: "Backups, mantenimiento, retencion, automatizacion y runbooks de operacion.",
        when: "Usalo para tareas internas de plataforma y administracion avanzada.",
      }] : []),
      ...(!isViewer ? [{
        key: "schedules",
        label: "Programados",
        summary: "Creacion y seguimiento de deploys programados con cron o ejecucion unica.",
        when: "Usalo cuando un despliegue debe correr fuera de horario o de forma repetitiva.",
      }] : []),
      {
        key: "history",
        label: "Historial",
        summary: "Consulta de despliegues pasados, resultados por servidor y exportacion de reportes.",
        when: "Usalo para auditoria, soporte y revision del resultado de una salida.",
      },
      {
        key: "settings",
        label: "Config",
        summary: "GitHub, SSH, ambiente test, usuarios y otros parametros del sistema.",
        when: "Usalo para cambiar configuracion base o revisar permisos.",
      },
    ];

    return (
      <div className="docs-stack">
        <div className="card">
          <div className="card-head">Guia de pestanas</div>
          <div className="card-body">
            <div className="alert alert-info">
              La visibilidad de algunas pestanas cambia segun el rol. Esta guia muestra las que corresponden al usuario actual.
            </div>
            <div className="docs-tab-guide">
              {tabs.map((tab) => (
                <div key={tab.key} className="docs-tab-card">
                  <div className="docs-tab-title">{tab.label}</div>
                  <div className="docs-tab-summary">{tab.summary}</div>
                  <div className="docs-tab-usage"><strong>Cuando usarla:</strong> {tab.when}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  function ChecklistTab() {
    return (
      <div className="docs-stack">
        <div className="card">
          <div className="card-head">Checklist previo a test</div>
          <div className="card-body">
            <div className="docs-grid">
              <DocChecklist
                title="Antes del deploy"
                tone="#22d3ee"
                items={[
                  "El cambio ya fue integrado a main.",
                  "El desarrollador resolvio conflictos con main.",
                  "El commit a validar esta identificado.",
                  "El ambiente test esta disponible y configurado.",
                ]}
              />
              <DocChecklist
                title="Durante la validacion"
                tone="#a78bfa"
                items={[
                  "El deploy termino sin errores.",
                  "No hubo rollback automatico inesperado.",
                  "Las rutas o modulos impactados responden bien.",
                  "No se rompieron funciones ya existentes.",
                ]}
              />
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">Checklist previo a produccion</div>
          <div className="card-body">
            <div className="docs-grid">
              <DocChecklist
                title="Confirmaciones obligatorias"
                tone="#fbbf24"
                items={[
                  "Test quedo validado por el responsable funcional o desarrollador.",
                  "El branch aprobado es main.",
                  "El commit en test coincide con el commit actual de main.",
                  "La ventana de despliegue fue autorizada.",
                ]}
              />
              <DocChecklist
                title="Control post-salida"
                tone="#22d3a5"
                items={[
                  "Se revisaron resultados por servidor.",
                  "Los dominios principales siguen respondiendo.",
                  "No se detectaron incidentes nuevos de severidad alta.",
                  "Se registro el resultado final del despliegue.",
                ]}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }

  function DocsView({ currentUser }) {
    const [activeTab, setActiveTab] = useState(() => {
      try {
        return window.localStorage.getItem("dc:tabs:docs") || "workflow";
      } catch (_error) {
        return "workflow";
      }
    });

    const tabs = [
      { key: "workflow", label: "Flujo", icon: "🧭" },
      { key: "roles", label: "Roles", icon: "👥" },
      { key: "guide", label: "Pestanas", icon: "🗂" },
      { key: "checklists", label: "Checklists", icon: "✅" },
    ];

    useEffect(() => {
      try {
        window.localStorage.setItem("dc:tabs:docs", activeTab);
      } catch (_error) {
        // ignore localStorage persistence issues
      }
    }, [activeTab]);

    return (
      <div className="docs-layout">
        <div className="card" style={{ overflow: "visible" }}>
          <div className="card-body">
            <div className="docs-hero">
              <div>
                <div className="docs-eyebrow">Centro de documentacion</div>
                <div className="docs-title">Flujo operativo y guia del sistema</div>
                <div className="docs-subtitle">
                  Este espacio formaliza como se mueve un cambio desde desarrollo hasta produccion y resume el proposito de cada pestana del sistema.
                </div>
              </div>
              <div className="docs-hero-note">
                <div className="docs-hero-note-label">Fuente oficial</div>
                <div className="docs-hero-note-value">Desplegar siempre desde main</div>
              </div>
            </div>
          </div>
        </div>

        <DocsTabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />

        {activeTab === "workflow" && <WorkflowTab />}
        {activeTab === "roles" && <RolesTab />}
        {activeTab === "guide" && <TabsGuideTab currentUser={currentUser} />}
        {activeTab === "checklists" && <ChecklistTab />}
      </div>
    );
  }

  window.DCViews.DocsView = DocsView;
})();