const { Card, Button, Icon, Tabs, Badge, EmptyState, SectorTag } = window.ACRFlowDesignSystem_ba1e9c;

/** Um passo do guia: número, título e o que fazer. */
function Passo({ n, titulo, children, nota }) {
  return (
    <div style={{ display: "flex", gap: 14, padding: "14px 0", borderBottom: "1px solid var(--border-subtle)" }}>
      <span style={{ flex: "none", width: 28, height: 28, borderRadius: "50%", display: "grid", placeItems: "center", background: "var(--accent-primary)", color: "#fff", font: "var(--type-body-strong)", fontSize: 13 }}>{n}</span>
      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 6 }}>
        <span style={{ font: "var(--type-h4)", color: "var(--text-strong)" }}>{titulo}</span>
        <div style={{ font: "var(--type-body)", color: "var(--text-body)", display: "flex", flexDirection: "column", gap: 5 }}>{children}</div>
        {nota ? (
          <span style={{ display: "flex", alignItems: "flex-start", gap: 7, marginTop: 2, font: "var(--type-caption)", color: "var(--text-muted)" }}>
            <Icon name="info" size={14} style={{ flex: "none", marginTop: 1 }} />{nota}
          </span>
        ) : null}
      </div>
    </div>
  );
}

function Onde({ children }) {
  return <strong style={{ color: "var(--text-strong)" }}>{children}</strong>;
}

function HelpScreen({ user, onNavigate }) {
  const [tab, setTab] = React.useState("registrar");
  const supervisor = user && user.profile === "supervisor";

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 14, flexWrap: "wrap" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          <h1 style={{ font: "var(--type-h1)", color: "var(--text-strong)" }}>Ajuda</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>Como usar o FlowTix no dia a dia — do registro da demanda ao acompanhamento do prazo.</span>
        </div>
        <Button variant="secondary" iconLeft={<Icon name="printer" size={16} />} onClick={() => window.print()}>Salvar em PDF</Button>
      </div>

      <Tabs value={tab} onChange={setTab} tabs={[
        { id: "registrar", label: "Registrar uma demanda" },
        { id: "atribuir", label: "Atribuir a alguém" },
        { id: "fila", label: "Minha Fila" },
        { id: "encerrar", label: "Encerrar" },
      ]} />

      {tab === "registrar" ? (
        <Card title="Registrar uma demanda" subtitle="Toda solicitação de trabalho entra no sistema como uma demanda com número próprio">
          <Passo n="1" titulo="Abra o formulário">
            <span>Clique em <Onde>Nova demanda</Onde> — o botão está no Dashboard, em Minha Fila e em Todas as Demandas.</span>
          </Passo>
          <Passo n="2" titulo="Escolha a área e a atividade"
            nota="A lista de atividades muda conforme a área escolhida. Se a atividade que você precisa não existe, cadastre em Áreas e Atividades.">
            <span><Onde>Área</Onde> é o setor responsável: Gestão Condominial, Departamento Pessoal ou Contabilidade.</span>
            <span><Onde>Atividade</Onde> é o tipo de trabalho: Emissão dos Boletos, Folha de Pagamento, Férias, e assim por diante.</span>
          </Passo>
          <Passo n="3" titulo="Descreva o que precisa ser feito"
            nota="Quem vai executar pode não ter o contexto que você tem. Prefira descrever demais a descrever de menos.">
            <span>No <Onde>Título</Onde>, resuma em uma linha: "Emissão de boletos — Setembro".</span>
            <span>Na <Onde>Descrição detalhada</Onde>, explique o que deve ser feito, com quais dados e o resultado esperado.</span>
          </Passo>
          <Passo n="4" titulo="Vincule a empresa"
            nota="A empresa é obrigatória. Se ela não estiver na lista, cadastre primeiro em Empresas.">
            <span>Selecione em <Onde>Empresa</Onde> o condomínio ou a empresa a que a demanda se refere. É por esse vínculo que os relatórios agrupam o trabalho.</span>
          </Passo>
          <Passo n="5" titulo="Defina prioridade e prazo"
            nota="A prioridade pode ser alterada depois, a qualquer momento do atendimento.">
            <span><Onde>Prioridade</Onde>: Baixa, Normal, Alta ou Urgente.</span>
            <span><Onde>Prazo de entrega</Onde>: a data limite. É o que faz a demanda subir na fila conforme se aproxima.</span>
          </Passo>
          <Passo n="6" titulo="Monte o checklist (opcional)"
            nota="O sistema calcula o percentual concluído automaticamente conforme as etapas são marcadas.">
            <span>Se o trabalho tem etapas, cadastre cada uma em <Onde>Checklist inicial</Onde>. Cada etapa pode ter responsável e prazo próprios.</span>
          </Passo>
          <Passo n="7" titulo="Clique em Criar demanda">
            <span>O botão fica ao final do formulário. O sistema gera o número — <Onde>DEM-2026-000125</Onde> — e a demanda nasce com status <Onde>Aguardando atendimento</Onde>.</span>
          </Passo>
        </Card>
      ) : null}

      {tab === "atribuir" ? (
        <Card title="Atribuir a demanda a uma pessoa" subtitle="Toda demanda precisa de pelo menos um responsável">
          <Passo n="1" titulo="Na criação da demanda"
            nota="A lista aparece conforme você digita e mostra apenas colaboradores cadastrados em Controle de Acesso.">
            <span>No bloco <Onde>Responsáveis</Onde>, digite o nome da pessoa no campo de pesquisa e clique em <Onde>Definir responsável</Onde>.</span>
            <span>Para acrescentar mais gente, pesquise outro nome e clique em <Onde>Adicionar</Onde>. O primeiro é o responsável principal.</span>
          </Passo>
          <Passo n="2" titulo="Depois de aberta, para trocar ou encaminhar"
            nota="Toda troca de responsável fica registrada no histórico da demanda, com autor e data.">
            <span>Abra a demanda e use o menu <Onde>···</Onde> no canto superior direito.</span>
            <span>Escolha <Onde>Atribuir / encaminhar</Onde>, selecione o novo responsável e confirme.</span>
          </Passo>
          <Passo n="3" titulo="O que a pessoa recebe">
            <span>A demanda passa a aparecer na <Onde>Minha Fila</Onde> dela, e uma notificação é gerada no sino do topo.</span>
          </Passo>
          <Passo n="4" titulo="Acompanhar o que você delegou">
            <span>As demandas que você abriu e atribuiu a outra pessoa ficam na aba <Onde>Minhas Solicitações</Onde>, dentro de Minha Fila.</span>
          </Passo>
        </Card>
      ) : null}

      {tab === "fila" ? (
        <Card title="Minha Fila" subtitle="A tela do dia a dia — o que está sob sua responsabilidade agora">
          <Passo n="1" titulo="O que aparece aqui"
            nota="Demandas encerradas e canceladas não entram na fila. Para consultá-las, use Todas as Demandas.">
            <span>Somente demandas <Onde>atribuídas a você</Onde> e ainda em aberto.</span>
          </Passo>
          <Passo n="2" titulo="A ordem não é por data de abertura">
            <span>A fila ordena por urgência: primeiro as <Onde>atrasadas</Onde>, depois as que <Onde>vencem hoje</Onde>, <Onde>amanhã</Onde>, e por último as de maior prioridade.</span>
            <span>Ou seja: comece de cima.</span>
          </Passo>
          <Passo n="3" titulo="Filtros rápidos">
            <span><Onde>Atrasadas</Onde>, <Onde>Hoje</Onde>, <Onde>Amanhã</Onde>, <Onde>Alta prioridade</Onde> e <Onde>Aguardando aprovação</Onde> — cada um com a quantidade ao lado.</span>
            <span><Onde>Minhas Solicitações</Onde> mostra o que você delegou a outras pessoas.</span>
          </Passo>
          <Passo n="4" titulo="Como ler a coluna Prazo"
            nota="As etiquetas mudam de cor sozinhas conforme a data se aproxima — verde, âmbar, vermelho.">
            <span><Onde>Entrega em 5 dias</Onde> — dentro do prazo. <Onde>Entrega amanhã</Onde> — atenção. <Onde>Entrega hoje</Onde> — crítico. <Onde>Atrasada há 2 dias</Onde> — vencida.</span>
          </Passo>
          <Passo n="5" titulo="Trabalhar a demanda">
            <span>Clique na linha para abrir. Lá você atualiza o <Onde>status</Onde>, marca etapas do <Onde>checklist</Onde>, escreve <Onde>comentários</Onde> e anexa arquivos ou prints colados com Ctrl+V.</span>
          </Passo>
        </Card>
      ) : null}

      {tab === "encerrar" ? (
        <Card title="Encerrar uma demanda" subtitle="O encerramento passa pela aprovação do supervisor">
          <Passo n="1" titulo="Conclua o trabalho">
            <span>Marque todas as etapas do checklist e registre nos comentários o que foi feito, anexando os comprovantes.</span>
          </Passo>
          <Passo n="2" titulo="Solicite o encerramento"
            nota="O operacional não encerra a demanda sozinho — essa é a garantia de rastreabilidade do sistema.">
            <span>Clique em <Onde>Solicitar encerramento</Onde>, preencha o resumo da tratativa e o resultado.</span>
            <span>A demanda passa para <Onde>Aguardando aprovação</Onde> e o supervisor é notificado.</span>
          </Passo>
          <Passo n="3" titulo={supervisor ? "Aprove ou devolva" : "O supervisor revisa"}>
            {supervisor
              ? <span>Abra a demanda, confira as evidências e escolha <Onde>Aprovar e encerrar</Onde> ou <Onde>Devolver demanda</Onde> informando o motivo.</span>
              : <span>Se algo faltar, a demanda volta para <Onde>Em andamento</Onde> com o motivo registrado, e você recebe uma notificação.</span>}
          </Passo>
          <Passo n="4" titulo="Cancelar uma demanda registrada por engano"
            nota="Cancelar preserva o histórico; excluir apaga o registro. Prefira cancelar.">
            <span>No menu <Onde>···</Onde> da demanda, escolha <Onde>Cancelar demanda</Onde> e informe o motivo.</span>
          </Passo>
        </Card>
      ) : null}

      <Card title="Onde fica cada coisa" subtitle="Referência rápida do menu lateral">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(260px,1fr))", gap: 14 }}>
          {[
            ["layout-dashboard", "Dashboard", "Visão geral: o que está atrasado, o que vence hoje, o que aguarda aprovação."],
            ["list-checks", "Minha Fila", "O que está atribuído a você, em ordem de urgência."],
            ["inbox", "Todas as Demandas", "Busca em todo o histórico, com filtros por área, status e período."],
            ["calendar", "Calendário", "Os prazos distribuídos no mês."],
            ["bar-chart-3", "Relatórios", "Produtividade, SLA e consolidado, com exportação em planilha."],
            ["shield-check", "Controle de Acesso", "Cadastro de colaboradores, perfil e forma de acesso."],
            ["building-2", "Empresas", "Condomínios e empresas atendidas."],
            ["folder-tree", "Áreas e Atividades", "A taxonomia que classifica as demandas."],
            ["flag", "Prioridades e Status", "Os estados e níveis de urgência do fluxo."],
          ].map(([icone, titulo, texto]) => (
            <div key={titulo} style={{ display: "flex", gap: 10 }}>
              <Icon name={icone} size={17} style={{ color: "var(--accent-primary)", flex: "none", marginTop: 2 }} />
              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{titulo}</span>
                <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{texto}</span>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function AboutScreen({ user }) {
  const D = window.ACRData;
  const linha = (rotulo, valor) => (
    <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
      <span style={{ font: "var(--type-overline)", color: "var(--text-muted)", letterSpacing: "var(--tracking-caps)" }}>{rotulo}</span>
      <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{valor}</span>
    </div>
  );

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
        <img src="../../assets/flowtix-icon.png" alt="" style={{ width: 54, height: 54, objectFit: "contain" }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <h1 style={{ font: "var(--type-h1)", color: "var(--text-strong)" }}>FlowTix</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>Gestão de Demandas · Grupo ACR</span>
        </div>
      </div>

      <Card title="Para que serve" accent="var(--accent-primary)">
        <div style={{ display: "flex", flexDirection: "column", gap: 12, font: "var(--type-body)", color: "var(--text-body)" }}>
          <p style={{ margin: 0 }}>
            O FlowTix registra, distribui e acompanha as demandas internas do Grupo ACR — Gestão Condominial,
            Departamento Pessoal e Contabilidade — em um só lugar, com prazo visível e responsável definido.
          </p>
          <p style={{ margin: 0 }}>
            A ideia central é simples: <strong style={{ color: "var(--text-strong)" }}>nenhuma solicitação deveria existir apenas
            na cabeça de alguém, em um e-mail ou numa conversa de aplicativo</strong>. Cada demanda ganha um número, um dono,
            um prazo e uma história completa de atendimento — de quem abriu até quem aprovou o encerramento.
          </p>
          <p style={{ margin: 0 }}>
            Meses depois, abrir uma demanda encerrada responde sozinha: por que foi aberta, quem executou, quais
            etapas foram cumpridas, quais documentos foram anexados, houve atraso, e qual foi a solução.
          </p>
        </div>
      </Card>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))", gap: "var(--gap-grid)" }}>
        {[
          ["clipboard-list", "Registrar", "Toda solicitação entra como demanda numerada, vinculada a uma empresa, área e atividade — nada se perde em conversas soltas."],
          ["flag", "Priorizar", "Baixa, Normal, Alta ou Urgente, ajustável a qualquer momento. A prioridade orienta a ordem do trabalho quando tudo parece urgente."],
          ["alarm-clock", "Controlar prazos", "Cada demanda mostra quanto tempo resta. As que estão perto do vencimento ganham destaque sozinhas e sobem na fila."],
          ["users", "Distribuir", "Responsável principal e responsáveis adicionais, com encaminhamento registrado no histórico."],
          ["shield-check", "Garantir a conclusão", "O operacional solicita o encerramento; só o supervisor aprova. Isso evita demanda fechada sem entrega."],
          ["bar-chart-3", "Decidir com dados", "Produtividade por pessoa e por área, cumprimento de prazo e volume por período — o que sustenta a conversa de gestão."],
        ].map(([icone, titulo, texto]) => (
          <Card key={titulo} padding="var(--pad-card)">
            <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
              <Icon name={icone} size={20} style={{ color: "var(--accent-primary)" }} />
              <span style={{ font: "var(--type-h4)", color: "var(--text-strong)" }}>{titulo}</span>
              <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>{texto}</span>
            </div>
          </Card>
        ))}
      </div>

      <Card title="Perfis de acesso">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(300px,1fr))", gap: 18 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
            <Badge tone="violet" size="sm">Supervisor</Badge>
            <span style={{ font: "var(--type-body)", color: "var(--text-body)" }}>
              Visão de toda a operação, dashboards e relatórios, controle de acesso e cadastros.
              É o único perfil que <strong style={{ color: "var(--text-strong)" }}>aprova o encerramento</strong> de uma demanda,
              devolve para execução e consulta a auditoria.
            </span>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
            <Badge tone="neutral" size="sm">Operacional</Badge>
            <span style={{ font: "var(--type-body)", color: "var(--text-body)" }}>
              Executa as demandas: atualiza andamento, alimenta o checklist, registra comentários e evidências,
              e ao terminar <strong style={{ color: "var(--text-strong)" }}>solicita o encerramento</strong> para aprovação.
            </span>
          </div>
        </div>
      </Card>

      <Card title="Informações do sistema">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: 18 }}>
          {linha("Sistema", "FlowTix")}
          {linha("Versão", "1.0")}
          {linha("Organização", "Grupo ACR")}
          {linha("Áreas atendidas", String((D.sectorsCfg || []).length))}
          {linha("Empresas cadastradas", String((D.companies || []).length))}
          {linha("Colaboradores", String((D.team || []).length))}
          {linha("Seu perfil", user && user.profile === "supervisor" ? "Supervisor" : "Operacional")}
          {linha("Conectado como", (user && user.name) || "—")}
        </div>
      </Card>

      <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)", textAlign: "center", padding: "4px 0 10px" }}>
        Copyright © 2026 Grupo ACR — Todos os direitos reservados
      </span>
    </div>
  );
}

Object.assign(window, { HelpScreen, AboutScreen });