// LGPD — Área "Privacidade e Meus Dados" do sócio

const LGPD_REQUESTS_KEY = "ikigai_lgpd_requests";
function lerRequests() {
  try { return JSON.parse(localStorage.getItem(LGPD_REQUESTS_KEY)) || []; }
  catch { return []; }
}
function salvarRequests(arr) {
  localStorage.setItem(LGPD_REQUESTS_KEY, JSON.stringify(arr));
  window.dispatchEvent(new CustomEvent("ikigai-lgpd-requests-changed"));
}

function PagePrivacidade({ socio, onOpenDoc }) {
  const [consent, setConsent] = React.useState(lerConsentimento() || { essenciais: true, analytics: false, marketing: false });
  const [imagem, setImagem] = React.useState(true);
  const [marketing, setMarketing] = React.useState(false);
  const [exportandoFmt, setExportandoFmt] = React.useState(null);

  // Exportar dados (LGPD Art 18 — portabilidade)
  const exportarDados = (fmt) => {
    setExportandoFmt(fmt);
    setTimeout(() => {
      const dados = {
        gerado_em: new Date().toISOString(),
        titular: {
          codigo: socio.id, nome: socio.nome, email: socio.email,
          telefone: socio.tel, cidade: socio.cidade, nascimento: socio.nascimento,
        },
        faixa: socio.faixa, aulasNaGraduacao: socio.aulasNaGraduacao,
        socio_desde: socio.desde,
        mensalidade_atual: socio.mensalidade,
        proxima_aula: socio.proxAula,
        proximo_exame: socio.proximoExame,
        questionario_pendente: socio.questionarioPendente,
        consentimentos: consent,
        preferencias_marketing: marketing,
        autorizacao_imagem: imagem,
      };
      let blob, ext;
      if (fmt === "json") {
        blob = new Blob([JSON.stringify(dados, null, 2)], { type: "application/json" });
        ext = "json";
      } else {
        const linhas = [
          `# Meus Dados — Dojô Ikigai`,
          `Gerado em: ${new Date().toLocaleString("pt-BR")}`, "",
          `## Titular`, `Código: ${dados.titular.codigo}`, `Nome: ${dados.titular.nome}`,
          `E-mail: ${dados.titular.email}`, `Telefone: ${dados.titular.telefone}`,
          `Cidade: ${dados.titular.cidade}`, `Nascimento: ${dados.titular.nascimento}`, "",
          `## Prática`, `Faixa atual: ${dados.faixa?.nome}`, `Aulas na graduação: ${dados.aulasNaGraduacao}`,
          `Sócio desde: ${dados.socio_desde}`, "",
          `## Consentimentos`,
          `Essenciais: ${consent.essenciais ? "✓" : "✗"}`,
          `Analytics: ${consent.analytics ? "✓" : "✗"}`,
          `Marketing: ${consent.marketing ? "✓" : "✗"}`,
          `Uso de imagem: ${imagem ? "✓" : "✗"}`,
          `Marketing por e-mail: ${marketing ? "✓" : "✗"}`,
        ];
        blob = new Blob([linhas.join("\n")], { type: "text/plain" });
        ext = "txt";
      }
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url; a.download = `ikigai-meus-dados-${socio.id}.${ext}`;
      a.click(); URL.revokeObjectURL(url);
      setExportandoFmt(null);
    }, 600);
  };

  // Solicitar exclusão (LGPD Art 18 — eliminação)
  const [modalExcluir, setModalExcluir] = React.useState(false);
  const [confirmar, setConfirmar] = React.useState("");
  const [motivo, setMotivo] = React.useState("");
  const [feedback, setFeedback] = React.useState(null);

  const submeterExclusao = () => {
    const reqs = lerRequests();
    reqs.push({
      id: "req-" + Date.now(),
      tipo: "exclusao",
      socioId: socio.id, socioNome: socio.nome, socioEmail: socio.email,
      motivo: motivo || "(não informado)",
      criadoEm: new Date().toISOString(),
      status: "pendente",
    });
    salvarRequests(reqs);
    setModalExcluir(false);
    setConfirmar(""); setMotivo("");
    setFeedback({ tipo: "ok", texto: "Solicitação registrada. O dojô vai analisar e te responder em até 15 dias úteis, conforme a LGPD." });
    setTimeout(() => setFeedback(null), 8000);
  };

  // Solicitação genérica (correção, oposição, etc)
  const [modalSolicitar, setModalSolicitar] = React.useState(false);
  const [tipoSol, setTipoSol] = React.useState("correcao");
  const [detalheSol, setDetalheSol] = React.useState("");
  const submeterSolicitacao = () => {
    const reqs = lerRequests();
    reqs.push({
      id: "req-" + Date.now(),
      tipo: tipoSol,
      socioId: socio.id, socioNome: socio.nome, socioEmail: socio.email,
      detalhe: detalheSol,
      criadoEm: new Date().toISOString(),
      status: "pendente",
    });
    salvarRequests(reqs);
    setModalSolicitar(false);
    setDetalheSol("");
    setFeedback({ tipo: "ok", texto: "Solicitação registrada. O DPO vai analisar e te responder em até 15 dias úteis." });
    setTimeout(() => setFeedback(null), 8000);
  };

  // Revogar/ajustar consentimentos
  const toggleConsent = (key) => {
    if (key === "essenciais") return;
    const next = { ...consent, [key]: !consent[key] };
    salvarConsentimento(next);
    setConsent(next);
  };

  return (
    <>
      <h1 className="as-page-title">Privacidade e meus dados</h1>
      <p className="as-page-sub">
        Conforme a Lei Geral de Proteção de Dados (LGPD), você tem total controle sobre seus dados.
        <a onClick={(e) => { e.preventDefault(); onOpenDoc && onOpenDoc("privacidade"); }} href="#" style={{ marginLeft: 6, color: "var(--k-blue)" }}>Leia nossa política completa ›</a>
      </p>

      {feedback && (
        <div style={{
          marginBottom: 16, padding: 14, borderRadius: 12,
          background: feedback.tipo === "ok" ? "rgba(45,160,106,0.12)" : "rgba(198,59,59,0.10)",
          color: feedback.tipo === "ok" ? "#1f7a4d" : "#a02e2e",
          fontSize: 13.5,
        }}>{feedback.texto}</div>
      )}

      {/* Exportar dados */}
      <div className="as-panel" style={{ maxWidth: 720, marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: "rgba(0,113,227,0.12)", display: "grid", placeItems: "center", fontSize: 22 }}>📥</div>
          <div style={{ flex: 1 }}>
            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, marginBottom: 4 }}>Baixar meus dados</h3>
            <p style={{ fontSize: 13.5, color: "var(--k-ink-3)", lineHeight: 1.5, marginBottom: 12 }}>
              Direito à <strong>portabilidade</strong> (LGPD Art 18). Receba cópia completa de tudo que temos sobre você.
            </p>
            <div style={{ display: "flex", gap: 8 }}>
              <button className="k-btn k-btn-dark" disabled={exportandoFmt === "json"} onClick={() => exportarDados("json")}>
                {exportandoFmt === "json" ? "Gerando..." : "Baixar JSON"}
              </button>
              <button className="k-btn k-btn-light" disabled={exportandoFmt === "txt"} onClick={() => exportarDados("txt")}>
                {exportandoFmt === "txt" ? "Gerando..." : "Baixar TXT legível"}
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Consentimentos */}
      <div className="as-panel" style={{ maxWidth: 720, marginBottom: 16 }}>
        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, marginBottom: 14 }}>Meus consentimentos</h3>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {[
            { id: "essenciais", label: "Cookies essenciais", desc: "Necessários — não podem ser desativados.", locked: true },
            { id: "analytics", label: "Cookies de análise", desc: "Coleta anônima sobre uso do site." },
            { id: "marketing", label: "Cookies de marketing", desc: "Mostrar anúncios relevantes em outros sites." },
          ].map((c) => (
            <div key={c.id} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "12px 14px", background: "var(--k-bg-soft)", borderRadius: 10 }}>
              <div>
                <p style={{ fontSize: 14, fontWeight: 500, color: "var(--k-ink)", margin: 0 }}>{c.label}</p>
                <p style={{ fontSize: 12, color: "var(--k-ink-3)", margin: "2px 0 0" }}>{c.desc}</p>
              </div>
              <div className={`lgpd-switch ${consent[c.id] ? "is-on" : ""} ${c.locked ? "is-locked" : ""}`}
                   onClick={() => !c.locked && toggleConsent(c.id)} role="switch" aria-checked={!!consent[c.id]}></div>
            </div>
          ))}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "12px 14px", background: "var(--k-bg-soft)", borderRadius: 10 }}>
            <div>
              <p style={{ fontSize: 14, fontWeight: 500, color: "var(--k-ink)", margin: 0 }}>Uso de imagem</p>
              <p style={{ fontSize: 12, color: "var(--k-ink-3)", margin: "2px 0 0" }}>Autoriza fotos/vídeos seus em materiais do dojô.</p>
            </div>
            <div className={`lgpd-switch ${imagem ? "is-on" : ""}`} onClick={() => setImagem(!imagem)} role="switch" aria-checked={imagem}></div>
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "12px 14px", background: "var(--k-bg-soft)", borderRadius: 10 }}>
            <div>
              <p style={{ fontSize: 14, fontWeight: 500, color: "var(--k-ink)", margin: 0 }}>Comunicações de marketing</p>
              <p style={{ fontSize: 12, color: "var(--k-ink-3)", margin: "2px 0 0" }}>Receber e-mails sobre eventos, promoções e novidades.</p>
            </div>
            <div className={`lgpd-switch ${marketing ? "is-on" : ""}`} onClick={() => setMarketing(!marketing)} role="switch" aria-checked={marketing}></div>
          </div>
        </div>
      </div>

      {/* Outras solicitações */}
      <div className="as-panel" style={{ maxWidth: 720, marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: "rgba(230,168,0,0.12)", display: "grid", placeItems: "center", fontSize: 22 }}>📝</div>
          <div style={{ flex: 1 }}>
            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, marginBottom: 4 }}>Outras solicitações</h3>
            <p style={{ fontSize: 13.5, color: "var(--k-ink-3)", lineHeight: 1.5, marginBottom: 12 }}>
              Correção de dados, oposição a tratamento, ou qualquer pedido relacionado aos seus direitos como titular.
            </p>
            <button className="k-btn k-btn-light" onClick={() => setModalSolicitar(true)}>Abrir solicitação ›</button>
          </div>
        </div>
      </div>

      {/* Excluir conta */}
      <div className="as-panel" style={{ maxWidth: 720, marginBottom: 16, borderColor: "rgba(198,59,59,0.3)" }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: "rgba(198,59,59,0.12)", display: "grid", placeItems: "center", fontSize: 22 }}>🗑️</div>
          <div style={{ flex: 1 }}>
            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, marginBottom: 4 }}>Excluir minha conta</h3>
            <p style={{ fontSize: 13.5, color: "var(--k-ink-3)", lineHeight: 1.5, marginBottom: 12 }}>
              Direito à <strong>eliminação</strong> (LGPD Art 18). Dados financeiros podem ser mantidos por 10 anos para cumprir exigência fiscal.
            </p>
            <button className="k-btn" style={{ background: "#c63b3b", color: "#fff" }} onClick={() => setModalExcluir(true)}>Solicitar exclusão</button>
          </div>
        </div>
      </div>

      {/* Modal: excluir */}
      {modalExcluir && (
        <div className="as-modal-bg" onClick={() => setModalExcluir(false)}>
          <div className="as-modal" onClick={(e) => e.stopPropagation()}>
            <span className="as-modal-x" onClick={() => setModalExcluir(false)}>✕</span>
            <div className="as-modal-h">
              <h3>Confirmar pedido de exclusão</h3>
              <p>Esta solicitação será analisada pelo DPO em até 15 dias úteis (LGPD Art 19).</p>
            </div>
            <div className="as-modal-body">
              <div className="as-field">
                <label>Motivo (opcional)</label>
                <textarea rows="3" value={motivo} onChange={(e) => setMotivo(e.target.value)} placeholder="Por que está pedindo a exclusão?" />
              </div>
              <div className="as-field">
                <label>Digite EXCLUIR para confirmar</label>
                <input value={confirmar} onChange={(e) => setConfirmar(e.target.value)} placeholder="EXCLUIR" />
              </div>
            </div>
            <div className="as-modal-foot">
              <button className="k-btn k-btn-light" onClick={() => setModalExcluir(false)}>Cancelar</button>
              <button className="k-btn" style={{ background: "#c63b3b", color: "#fff", opacity: confirmar.trim().toUpperCase() === "EXCLUIR" ? 1 : 0.5 }}
                disabled={confirmar.trim().toUpperCase() !== "EXCLUIR"} onClick={submeterExclusao}>Confirmar exclusão</button>
            </div>
          </div>
        </div>
      )}

      {/* Modal: solicitar */}
      {modalSolicitar && (
        <div className="as-modal-bg" onClick={() => setModalSolicitar(false)}>
          <div className="as-modal" onClick={(e) => e.stopPropagation()}>
            <span className="as-modal-x" onClick={() => setModalSolicitar(false)}>✕</span>
            <div className="as-modal-h">
              <h3>Nova solicitação LGPD</h3>
              <p>Conta com a análise do nosso DPO em até 15 dias úteis.</p>
            </div>
            <div className="as-modal-body">
              <div className="as-field">
                <label>Tipo de solicitação</label>
                <select value={tipoSol} onChange={(e) => setTipoSol(e.target.value)}>
                  <option value="correcao">Correção de dados incorretos</option>
                  <option value="oposicao">Oposição a um tratamento</option>
                  <option value="revogacao">Revogação de consentimento específico</option>
                  <option value="anonimizacao">Anonimização de dados</option>
                  <option value="outro">Outra</option>
                </select>
              </div>
              <div className="as-field">
                <label>Descrição</label>
                <textarea rows="4" value={detalheSol} onChange={(e) => setDetalheSol(e.target.value)} placeholder="Explique sua solicitação..." required />
              </div>
            </div>
            <div className="as-modal-foot">
              <button className="k-btn k-btn-light" onClick={() => setModalSolicitar(false)}>Cancelar</button>
              <button className="k-btn k-btn-primary" disabled={!detalheSol.trim()} onClick={submeterSolicitacao}>Enviar solicitação</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { PagePrivacidade, lerRequests, salvarRequests });