// pages/DocumentosPage.jsx — com viewer, download e aba "Equipe e seguranca"

function DocumentosPage() {
  const [tab, setTab] = React.useState("obra");
  const equipeSummary = window.EQUIPE_SUMMARY || null;
  const docsEmpresa = window.DOCS_EMPRESA || [];
  const totalEmpresa = docsEmpresa.reduce((a, p) => a + (p.totalItens || 0), 0);
  const docs = tab === "obra" ? DOCS_OBRA : tab === "equipe" ? DOCS_EQUIPE : [];

  const categorias = [...new Set(docs.map(d => d.category))];
  const fileUrl = (d, download = false) =>
    `/portal-cliente/api/documentos/${d.kind}/${d.id}/file${download ? "?dl=1" : ""}`;

  const TABS = [
    { id: "obra", label: "Documentos da obra", count: DOCS_OBRA.length },
    { id: "equipe", label: "Entregas parciais", count: DOCS_EQUIPE.length },
    { id: "empresa", label: "Documentos da empresa", count: totalEmpresa },
    {
      id: "seguranca",
      label: "Equipe e seguranca",
      count: equipeSummary?.totalAtivos || 0,
    },
  ];

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Documentos</h1>
          <div className="page-sub">
            {DOCS_OBRA.length + DOCS_EQUIPE.length} arquivo{(DOCS_OBRA.length + DOCS_EQUIPE.length) !== 1 ? "s" : ""} disponivel{(DOCS_OBRA.length + DOCS_EQUIPE.length) !== 1 ? "is" : ""}
            {equipeSummary && ` · ${equipeSummary.totalAtivos} ${equipeSummary.totalAtivos === 1 ? "trabalhador alocado" : "trabalhadores alocados"}`}
          </div>
        </div>
      </div>

      <div style={{
        display: "inline-flex", gap: 4, padding: 4,
        background: "#F5F5F5",
        border: "1px solid var(--border)",
        borderRadius: 999,
        marginBottom: 20,
      }}>
        {TABS.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
            className="btn" style={{
              background: tab === t.id ? "#fff" : "transparent",
              borderColor: tab === t.id ? "var(--border)" : "transparent",
              borderRadius: 999,
              height: 32,
              padding: "0 14px",
              fontSize: 12,
              boxShadow: tab === t.id ? "0 1px 3px rgba(0,0,0,0.04)" : "none",
            }}>
            {t.label}
            <span className="mono" style={{ color: "#999", fontSize: 11, marginLeft: 6 }}>{t.count}</span>
          </button>
        ))}
      </div>

      {tab === "seguranca" ? (
        <SegurancaPanel summary={equipeSummary} />
      ) : tab === "empresa" ? (
        <EmpresaPanel pastas={docsEmpresa} />
      ) : docs.length === 0 ? (
        <div className="card" style={{ padding: 32, textAlign: "center", color: "#999" }}>
          Ainda nao ha documentos disponiveis nesta aba.
        </div>
      ) : categorias.map(cat => {
        const items = docs.filter(d => d.category === cat);
        return (
          <div key={cat} className="card" style={{ marginBottom: 14 }}>
            <div className="card-head">
              <div className="card-title">{cat}</div>
              <div className="card-sub mono">{items.length} {items.length === 1 ? "arquivo" : "arquivos"}</div>
            </div>
            <div>
              {items.map((d) => (
                <div key={`${d.kind}-${d.id}`} className="file-row">
                  <div className="file-ico">{d.type}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="file-name">{d.name}</div>
                    <div className="file-meta">{d.size} · {fmtDate(d.date)}</div>
                  </div>
                  <span className="pill">{d.type}</span>
                  <button
                    className="icon-btn"
                    onClick={() => window.open(fileUrl(d, false), "_blank")}
                    title="Visualizar"
                    aria-label="Visualizar"
                  >
                    <I.Eye size={14} />
                  </button>
                  <a
                    className="icon-btn"
                    href={fileUrl(d, true)}
                    download={d.name}
                    title="Baixar"
                    aria-label="Baixar"
                    style={{ display: "inline-flex", textDecoration: "none", color: "inherit" }}
                  >
                    <I.Download size={14} />
                  </a>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// Painel de Equipe e seguranca:
// - Cards de compliance por tipo (com expansao para listar documentos)
// - Tabela de trabalhadores com seus cursos/certificados clicaveis (visualizar + baixar)
function SegurancaPanel({ summary }) {
  const [expandedType, setExpandedType] = React.useState(null);
  const [expandedFunc, setExpandedFunc] = React.useState(null);

  if (!summary || summary.totalAtivos === 0) {
    return (
      <div className="card" style={{ padding: 32, textAlign: "center", color: "#999" }}>
        Sem trabalhadores alocados nesta obra no momento.
      </div>
    );
  }

  const statusColor = (s) => {
    if (s === "vigente") return "#16a34a";
    if (s === "vencendo") return "#b45309";
    if (s === "vencido" || s === "ausente") return "#dc2626";
    return "#999";
  };
  const statusLabel = (s) => {
    if (s === "vigente") return "Vigente";
    if (s === "vencendo") return "Vencendo";
    if (s === "vencido") return "Vencido";
    if (s === "ausente") return "Ausente";
    return "Sem validade";
  };
  const fileUrl = (id, dl) => "/portal-cliente/api/equipe/documento/" + id + "/file" + (dl ? "?dl=1" : "");

  return (
    <>
      {/* Cards de resumo por tipo — clicaveis para expandir lista de documentos */}
      {summary.porTipo.length > 0 && (
        <div className="card" style={{ marginBottom: 14 }}>
          <div className="card-head">
            <div>
              <div className="card-title">Cursos e certificados da equipe</div>
              <div className="card-sub">
                Toque em um tipo para ver os documentos · {summary.totalAtivos} trabalhador{summary.totalAtivos !== 1 ? "es" : ""} alocado{summary.totalAtivos !== 1 ? "s" : ""}
              </div>
            </div>
          </div>
          <div style={{ padding: 18 }}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12 }}>
              {summary.porTipo.map((t) => {
                const isExpanded = expandedType === t.tipo;
                return (
                  <button
                    key={t.tipo}
                    onClick={() => setExpandedType(isExpanded ? null : t.tipo)}
                    style={{
                      border: "1px solid " + (isExpanded ? "#0A0A0A" : "var(--border)"),
                      borderRadius: 16,
                      padding: 14,
                      background: "#fff",
                      textAlign: "left",
                      cursor: "pointer",
                      transition: "border-color 120ms ease",
                      fontFamily: "inherit",
                    }}
                  >
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                      <div style={{ fontSize: 10, color: "#999", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 500 }}>
                        {t.tipo}
                      </div>
                      <I.Chevron size={12} style={{ color: "#999", transform: isExpanded ? "rotate(90deg)" : "none", transition: "transform 120ms ease" }} />
                    </div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: "#0A0A0A", marginTop: 2 }}>
                      {t.label}
                    </div>
                    <div className="mono" style={{ fontSize: 22, fontWeight: 500, marginTop: 8, color: "#0A0A0A" }}>
                      {t.total}
                    </div>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }}>
                      {t.vigente > 0 && (
                        <span className="pill green" style={{ fontSize: 10 }}>
                          <span className="status-dot" style={{ background: "#16a34a" }} />
                          {t.vigente} vigente{t.vigente !== 1 ? "s" : ""}
                        </span>
                      )}
                      {t.vencendo > 0 && (
                        <span className="pill amber" style={{ fontSize: 10 }}>
                          <span className="status-dot" style={{ background: "#b45309" }} />
                          {t.vencendo} vencendo
                        </span>
                      )}
                      {t.vencido > 0 && (
                        <span className="pill red" style={{ fontSize: 10 }}>
                          <span className="status-dot" style={{ background: "#dc2626" }} />
                          {t.vencido} vencido{t.vencido !== 1 ? "s" : ""}
                        </span>
                      )}
                      {t.semValidade > 0 && (
                        <span className="pill" style={{ fontSize: 10 }}>
                          {t.semValidade} sem validade
                        </span>
                      )}
                    </div>
                  </button>
                );
              })}
            </div>

            {/* Lista de documentos do tipo expandido */}
            {expandedType && (() => {
              const t = summary.porTipo.find((x) => x.tipo === expandedType);
              if (!t || !t.documentos || !t.documentos.length) {
                return (
                  <div style={{ marginTop: 16, padding: 14, background: "#FAFAFA", border: "1px solid var(--border)", borderRadius: 16, color: "#999", fontSize: 12, textAlign: "center" }}>
                    Sem arquivos disponiveis para visualizacao deste tipo.
                  </div>
                );
              }
              return (
                <div style={{ marginTop: 16, border: "1px solid var(--border)", borderRadius: 16, overflow: "hidden" }}>
                  {t.documentos.map((d, idx) => (
                    <div key={d.id} className="file-row" style={{ borderTop: idx ? "1px solid var(--border)" : "none" }}>
                      <div className="file-ico">PDF</div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div className="file-name">{d.funcionario?.nome || "Documento"}</div>
                        <div className="file-meta">
                          {d.funcionario?.cargo || "—"}
                          {d.expiryDate && <> · valido ate {fmtDate(d.expiryDate)}</>}
                        </div>
                      </div>
                      <span className="pill" style={{ fontSize: 10 }}>
                        <span className="status-dot" style={{ background: statusColor(d.status) }} />
                        {statusLabel(d.status)}
                      </span>
                      <button
                        className="icon-btn"
                        onClick={() => window.open(fileUrl(d.id), "_blank")}
                        title="Visualizar"
                        aria-label="Visualizar"
                      >
                        <I.Eye size={14} />
                      </button>
                      <a
                        className="icon-btn"
                        href={fileUrl(d.id, true)}
                        download={d.nome}
                        title="Baixar"
                        aria-label="Baixar"
                        style={{ display: "inline-flex", textDecoration: "none", color: "inherit" }}
                      >
                        <I.Download size={14} />
                      </a>
                    </div>
                  ))}
                </div>
              );
            })()}
          </div>
        </div>
      )}

      {/* Tabela: trabalhadores alocados com cursos clicaveis */}
      <div className="card">
        <div className="card-head">
          <div>
            <div className="card-title">Trabalhadores alocados</div>
            <div className="card-sub">
              Toque em um trabalhador para ver os cursos e registros · {summary.totalAtivos} pessoa{summary.totalAtivos !== 1 ? "s" : ""} ativa{summary.totalAtivos !== 1 ? "s" : ""}
            </div>
          </div>
        </div>
        <table className="t" style={{ width: "100%" }}>
          <thead>
            <tr>
              <th>Nome</th>
              <th>Cargo</th>
              <th style={{ width: 140 }}>ASO</th>
              <th style={{ width: 140 }}>NR-35</th>
              <th style={{ width: 80, textAlign: "right" }}>Cursos</th>
            </tr>
          </thead>
          <tbody>
            {summary.porFuncionario.map((f) => {
              const isOpen = expandedFunc === f.id;
              const docCount = (f.documentos || []).length;
              return (
                <React.Fragment key={f.id}>
                  <tr
                    onClick={() => setExpandedFunc(isOpen ? null : f.id)}
                    style={{ cursor: docCount > 0 ? "pointer" : "default" }}
                  >
                    <td style={{ fontWeight: 500 }}>{f.nome}</td>
                    <td style={{ fontSize: 12, color: "#666" }}>{f.cargo || "—"}</td>
                    <td>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11.5 }}>
                        <span className="status-dot" style={{ background: statusColor(f.asoStatus) }} />
                        {statusLabel(f.asoStatus)}
                      </span>
                    </td>
                    <td>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11.5 }}>
                        <span className="status-dot" style={{ background: statusColor(f.nr35Status) }} />
                        {statusLabel(f.nr35Status)}
                      </span>
                    </td>
                    <td className="mono right" style={{ color: docCount > 0 ? "#0A0A0A" : "#bdbdbd", fontSize: 12 }}>
                      {docCount > 0 ? (
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
                          {docCount}
                          <I.Chevron size={11} style={{ transform: isOpen ? "rotate(90deg)" : "none", transition: "transform 120ms ease" }} />
                        </span>
                      ) : "—"}
                    </td>
                  </tr>
                  {isOpen && f.documentos && f.documentos.length > 0 && (
                    <tr>
                      <td colSpan={5} style={{ padding: 0, background: "#FAFAFA" }}>
                        <div style={{ padding: "10px 16px" }}>
                          {f.documentos.map((d) => (
                            <div key={d.id} className="file-row" style={{ borderTop: "none", padding: "8px 0", background: "transparent" }}>
                              <span className="pill" style={{ fontSize: 10, minWidth: 50, textAlign: "center" }}>{d.tipo}</span>
                              <div style={{ flex: 1, minWidth: 0 }}>
                                <div className="file-name" style={{ fontSize: 12.5 }}>{d.tipoLabel}</div>
                                <div className="file-meta" style={{ fontSize: 11 }}>
                                  {d.expiryDate ? "valido ate " + fmtDate(d.expiryDate) : "sem validade definida"}
                                </div>
                              </div>
                              <span className="pill" style={{ fontSize: 10 }}>
                                <span className="status-dot" style={{ background: statusColor(d.status) }} />
                                {statusLabel(d.status)}
                              </span>
                              <button
                                className="icon-btn"
                                onClick={(e) => { e.stopPropagation(); window.open(fileUrl(d.id), "_blank"); }}
                                title="Visualizar"
                                aria-label="Visualizar"
                              >
                                <I.Eye size={14} />
                              </button>
                              <a
                                className="icon-btn"
                                href={fileUrl(d.id, true)}
                                download={d.nome}
                                onClick={(e) => e.stopPropagation()}
                                title="Baixar"
                                aria-label="Baixar"
                                style={{ display: "inline-flex", textDecoration: "none", color: "inherit" }}
                              >
                                <I.Download size={14} />
                              </a>
                            </div>
                          ))}
                        </div>
                      </td>
                    </tr>
                  )}
                </React.Fragment>
              );
            })}
          </tbody>
        </table>
      </div>

      <div style={{
        fontSize: 11, color: "#999", marginTop: 12,
        padding: "12px 16px", background: "#FAFAFA",
        border: "1px solid var(--border)", borderRadius: 16,
      }}>
        <strong style={{ color: "#3A3A3A" }}>Privacidade:</strong> os documentos exibidos sao
        certificados de cursos (NR-35, NR-18), atestados de saude ocupacional e fichas de EPI.
        Documentos pessoais (RG, CPF, registros de CTPS) nao sao expostos por privacidade dos colaboradores.
      </div>
    </>
  );
}

// Painel de Documentos da empresa: pastas (Certidoes, Alvara, Seguros, Programas SST...)
// vindas da pagina "Cursos e Documentos" do admin. Read-only para o cliente.
function EmpresaPanel({ pastas }) {
  const fileUrl = (slug, nome, dl) =>
    "/portal-cliente/api/documentos-empresa/file?slug=" + encodeURIComponent(slug) + "&nome=" + encodeURIComponent(nome) + (dl ? "&dl=1" : "");

  if (!pastas || pastas.length === 0) {
    return (
      <div className="card" style={{ padding: 32, textAlign: "center", color: "#999" }}>
        Sem documentos da empresa disponiveis ainda.
        <div style={{ fontSize: 11, marginTop: 8 }}>
          Quando a Strucon publicar certidoes, alvaras, seguros ou programas SST, eles aparecerao aqui.
        </div>
      </div>
    );
  }

  // Ordem preferencial das pastas mais relevantes pro cliente
  const ORDER = ["certidoes", "licencas", "alvaras", "seguros", "contratos", "programas-sst"];
  const ordered = [...pastas].sort((a, b) => {
    const ai = ORDER.indexOf(a.slug); const bi = ORDER.indexOf(b.slug);
    if (ai === -1 && bi === -1) return a.nome.localeCompare(b.nome);
    if (ai === -1) return 1;
    if (bi === -1) return -1;
    return ai - bi;
  });

  const ICONS = {
    "certidoes": "📋",
    "licencas": "🪪",
    "alvaras": "🪪",
    "seguros": "🛡",
    "contratos": "📄",
    "programas-sst": "⚠",
  };

  return (
    <>
      {ordered.map((pasta) => (
        <div key={pasta.id} className="card" style={{ marginBottom: 14 }}>
          <div className="card-head">
            <div className="card-title">{pasta.nome}</div>
            <div className="card-sub mono">
              {pasta.totalItens} {pasta.totalItens === 1 ? "arquivo" : "arquivos"}
            </div>
          </div>
          <div>
            {pasta.arquivos.map((a) => (
              <div key={a.nome} className="file-row">
                <div className="file-ico">{a.type}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="file-name">{a.nome}</div>
                  <div className="file-meta">
                    {a.tamanho ? Math.round(a.tamanho / 1024) + " KB" : "—"}
                    {a.atualizadoEm && <> · atualizado em {fmtDate(a.atualizadoEm)}</>}
                  </div>
                </div>
                <span className="pill">{a.type}</span>
                <button
                  className="icon-btn"
                  onClick={() => window.open(fileUrl(pasta.slug, a.nome, false), "_blank")}
                  title="Visualizar"
                  aria-label="Visualizar"
                >
                  <I.Eye size={14} />
                </button>
                <a
                  className="icon-btn"
                  href={fileUrl(pasta.slug, a.nome, true)}
                  download={a.nome}
                  title="Baixar"
                  aria-label="Baixar"
                  style={{ display: "inline-flex", textDecoration: "none", color: "inherit" }}
                >
                  <I.Download size={14} />
                </a>
              </div>
            ))}
          </div>
        </div>
      ))}
    </>
  );
}

window.DocumentosPage = DocumentosPage;