/* ============================================================
   KeS Metas — Backup e Restauração
   - Cria "pontos de restauração" (cópia dos dados da equipe) no banco
   - Baixa/!importa cópia em arquivo (.json) — segurança extra offline
   - Restaura um backup (sobrescreve os dados atuais) — com confirmação
   - Só o administrador acessa.
   ============================================================ */
const { useState, useEffect, useRef } = React;

// Monta a "fatia" de dados que representa a equipe (igual ao que é salvo no banco).
function fatiaDados(state) {
  const semSenha = (u) => { const c = Object.assign({}, u); delete c.senha; return c; };
  return {
    users: (state.users || []).map(semSenha),
    metas: state.metas,
    activities: state.activities || [],
    meetings: state.meetings || [],
    stages: state.stages || [],
    leads: state.leads || [],
    comissaoEquipe: state.comissaoEquipe || {},
    tarefas: state.tarefas || [],
  };
}
function contar(dados) {
  return {
    usuarios: (dados.users || []).length,
    leads: (dados.leads || []).length,
    reunioes: (dados.meetings || []).length,
    tarefas: (dados.tarefas || []).length,
  };
}
function fmtData(iso) {
  if (!iso) return "—";
  try { return new Date(iso).toLocaleString("pt-BR"); } catch (e) { return iso; }
}

function BackupScreen({ state, dispatch, viewer, isOwner }) {
  const DB = window.KESDB;
  const isAdmin = !!isOwner; // backup é exclusivo da conta KeS (owner)
  const [lista, setLista] = useState([]);
  const [carregando, setCarregando] = useState(true);
  const [ocupado, setOcupado] = useState(false);
  const [confirmar, setConfirmar] = useState(null); // { tipo:"restaurar"|"excluir"|"arquivo", ... }
  const fileRef = useRef(null);

  async function recarregar() {
    setCarregando(true);
    const r = await DB.listBackups(state.teamId);
    setLista(r);
    setCarregando(false);
  }
  useEffect(() => { if (isAdmin && DB && DB.configured()) recarregar(); else setCarregando(false); }, [state.teamId]);

  if (!isAdmin) {
    return <div className="content"><div className="card card-pad"><p className="muted" style={{ margin: 0 }}>Acesso restrito à conta KeS.</p></div></div>;
  }
  if (!DB || !DB.configured()) {
    return <div className="content"><div className="card card-pad"><p className="muted" style={{ margin: 0 }}>Backup indisponível: banco de dados não configurado.</p></div></div>;
  }

  async function criarBackup() {
    setOcupado(true);
    const dados = fatiaDados(state);
    const r = await DB.createBackup(state.teamId, dados, contar(dados), "");
    setOcupado(false);
    if (r.ok) { dispatch({ type: "TOAST", msg: "Backup criado com sucesso." }); recarregar(); }
    else dispatch({ type: "TOAST", msg: "Falha ao criar backup." });
  }

  function baixarArquivo() {
    const dados = fatiaDados(state);
    const blob = new Blob([JSON.stringify(dados, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    const hoje = window.KES.iso(window.KES.SIM_TODAY);
    a.href = url; a.download = "kes-backup-" + (state.teamId || "dados") + "-" + hoje + ".json";
    document.body.appendChild(a); a.click(); a.remove();
    URL.revokeObjectURL(url);
    dispatch({ type: "TOAST", msg: "Cópia baixada." });
  }

  function escolherArquivo() { if (fileRef.current) fileRef.current.click(); }
  function aoEscolherArquivo(e) {
    const file = e.target.files && e.target.files[0];
    e.target.value = ""; // permite reescolher o mesmo arquivo
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      try {
        const dados = JSON.parse(reader.result);
        if (!dados || !Array.isArray(dados.users) || !Array.isArray(dados.leads)) {
          dispatch({ type: "TOAST", msg: "Arquivo inválido (não parece um backup do KeS)." });
          return;
        }
        setConfirmar({ tipo: "arquivo", dados, resumo: contar(dados), nome: file.name });
      } catch (err) {
        dispatch({ type: "TOAST", msg: "Não consegui ler o arquivo (JSON inválido)." });
      }
    };
    reader.readAsText(file);
  }

  // Aplica a restauração: grava no banco e atualiza a tela.
  async function restaurar(dados) {
    setOcupado(true);
    const completo = {
      users: dados.users || [], metas: dados.metas || window.KES.seed.metas,
      activities: dados.activities || [], meetings: dados.meetings || [],
      stages: dados.stages || window.KES.seed.stages, leads: dados.leads || [],
      comissaoEquipe: dados.comissaoEquipe || window.KES.seed.comissaoEquipe,
      tarefas: dados.tarefas || [],
    };
    const r = await Promise.resolve(DB.save(completo)).catch(() => ({ ok: false }));
    if (r && r.ok === false) {
      setOcupado(false);
      dispatch({ type: "TOAST", msg: "⚠ Falha ao restaurar: não foi possível gravar no banco. Nada foi alterado." });
      return;
    }
    dispatch({ type: "HYDRATE", data: completo });
    setOcupado(false);
    dispatch({ type: "TOAST", msg: "Dados restaurados com sucesso." });
  }

  async function confirmarAcao() {
    const c = confirmar;
    setConfirmar(null);
    if (!c) return;
    setOcupado(true);
    if (c.tipo === "excluir") {
      await DB.deleteBackup(c.id);
      setOcupado(false);
      dispatch({ type: "TOAST", msg: "Backup excluído." });
      recarregar();
    } else if (c.tipo === "restaurar") {
      const doc = await DB.getBackup(c.id);
      if (doc && doc.dados) await restaurar(doc.dados); // restaurar() libera o ocupado
      else { setOcupado(false); dispatch({ type: "TOAST", msg: "Não consegui carregar esse backup." }); }
    } else if (c.tipo === "arquivo") {
      await restaurar(c.dados);
    }
  }

  const resumoAtual = contar(fatiaDados(state));

  return (
    <div className="content">
      <div className="topbar">
        <div className="ttl"><h1>Backup e restauração</h1><p>Crie pontos de restauração dos dados da equipe e recupere se algo for perdido.</p></div>
      </div>

      {/* Criar backup / arquivo */}
      <div className="card card-pad" style={{ marginBottom: 16 }}>
        <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
          <div>
            <div style={{ fontWeight: 700 }}>Dados atuais desta equipe</div>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 3 }}>
              {resumoAtual.usuarios} usuários · {resumoAtual.leads} leads · {resumoAtual.reunioes} reuniões · {resumoAtual.tarefas} tarefas
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <Btn variant="primary" icon="plus" onClick={criarBackup} disabled={ocupado}>Criar backup agora</Btn>
            <Btn variant="subtle" icon="download" onClick={baixarArquivo} disabled={ocupado}>Baixar cópia (.json)</Btn>
            <Btn variant="subtle" icon="upload" onClick={escolherArquivo} disabled={ocupado}>Restaurar de arquivo</Btn>
            <input ref={fileRef} type="file" accept="application/json,.json" style={{ display: "none" }} onChange={aoEscolherArquivo} />
          </div>
        </div>
        <div style={{ marginTop: 12, padding: "9px 12px", background: "rgba(242,169,59,.12)", borderRadius: "var(--radius-sm)", fontSize: 12, color: "var(--warn)", display: "flex", gap: 7, alignItems: "center" }}>
          <Icon name="alert" size={14} /> Restaurar substitui os dados atuais da equipe. Faça um backup antes, por segurança.
        </div>
      </div>

      {/* Lista de backups no banco */}
      <div className="card">
        <div style={{ padding: "16px 18px 8px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <h3 style={{ margin: 0, fontSize: "var(--text-md)" }}>Backups salvos</h3>
          <Badge tone="muted">{lista.length}</Badge>
        </div>
        {carregando ? (
          <div style={{ padding: "8px 18px 18px", color: "var(--fg3)", fontSize: 13 }}>Carregando…</div>
        ) : lista.length === 0 ? (
          <div style={{ padding: "8px 18px 18px", color: "var(--fg3)", fontSize: 13 }}>Nenhum backup ainda. Clique em "Criar backup agora".</div>
        ) : (
          <div>
            {lista.map((b) => (
              <div key={b.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 18px", borderTop: "1px solid var(--border-dark)", flexWrap: "wrap" }}>
                <div style={{ flex: 1, minWidth: 180 }}>
                  <div style={{ fontWeight: 700, fontSize: 13.5 }}><Icon name="clock" size={13} style={{ verticalAlign: "-2px", marginRight: 5 }} />{fmtData(b.criadoEm)}</div>
                  {b.resumo && <div className="muted" style={{ fontSize: 11.5, marginTop: 3 }}>{b.resumo.usuarios} usuários · {b.resumo.leads} leads · {b.resumo.reunioes} reuniões · {b.resumo.tarefas} tarefas</div>}
                </div>
                <div style={{ display: "flex", gap: 6 }}>
                  <Btn variant="subtle" size="sm" icon="refresh" onClick={() => setConfirmar({ tipo: "restaurar", id: b.id, criadoEm: b.criadoEm })} disabled={ocupado}>Restaurar</Btn>
                  <button className="iconbtn" title="Excluir backup" onClick={() => setConfirmar({ tipo: "excluir", id: b.id })} disabled={ocupado}><Icon name="trash" size={16} /></button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Confirmações */}
      {confirmar && (
        <Modal title={confirmar.tipo === "excluir" ? "Excluir backup" : "Restaurar dados"} onClose={() => setConfirmar(null)}
          footer={<>
            <Btn variant="subtle" onClick={() => setConfirmar(null)} disabled={ocupado}>Cancelar</Btn>
            {confirmar.tipo === "excluir"
              ? <Btn variant="danger" icon="trash" onClick={confirmarAcao} disabled={ocupado}>Excluir</Btn>
              : <Btn variant="primary" icon="refresh" onClick={confirmarAcao} disabled={ocupado}>{ocupado ? "Restaurando…" : "Restaurar agora"}</Btn>}
          </>}>
          {confirmar.tipo === "excluir" ? (
            <p style={{ margin: 0, color: "var(--fg2)", fontSize: 14 }}>Excluir este backup permanentemente? Essa ação não pode ser desfeita.</p>
          ) : (
            <div style={{ fontSize: 14, color: "var(--fg2)" }}>
              <p style={{ marginTop: 0 }}>
                {confirmar.tipo === "arquivo"
                  ? <>Restaurar a partir do arquivo <b>{confirmar.nome}</b>?</>
                  : <>Restaurar o backup de <b>{fmtData(confirmar.criadoEm)}</b>?</>}
              </p>
              {confirmar.resumo && <p className="muted" style={{ fontSize: 12.5 }}>Vai aplicar: {confirmar.resumo.usuarios} usuários · {confirmar.resumo.leads} leads · {confirmar.resumo.reunioes} reuniões · {confirmar.resumo.tarefas} tarefas.</p>}
              <div style={{ padding: "9px 12px", background: "rgba(224,60,49,.12)", borderRadius: "var(--radius-sm)", fontSize: 12.5, color: "var(--kes-red-400)", display: "flex", gap: 7, alignItems: "center" }}>
                <Icon name="alert" size={14} /> Isso substitui TODOS os dados atuais da equipe.
              </div>
            </div>
          )}
        </Modal>
      )}
    </div>
  );
}

window.BackupScreen = BackupScreen;