// modules-admin.jsx — Team, Support (chat), Plans, Account
window.NA = window.NA || {};
window.NA.M = window.NA.M || {};
const _na4 = window.NA;
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

// ============================================================
// TEAM — Equipe (sectors + permissions)
// ============================================================
function ModuleTeam({ t, lang }) {
  const [tab, setTab] = useStateA("sectors");
  const [showSector, setShowSector] = useStateA(false);
  const [sectorName, setSectorName] = useStateA("");
  const sectors = [
    { id: "s1", name: "Alex", status: "no_password", permissions: ["reviews", "dashboard", "analysis"], color: "cyan" },
    { id: "s2", name: "Dr. Wellton Reis", status: "synced", permissions: ["lawyer"], color: "orange" },
    { id: "s3", name: "Paloma", status: "synced", color: "purple",
      permissions: ["cashbook", "contracts", "lawyer", "management", "financing", "analysis", "reviews", "dashboard", "opportunities", "acquisitions", "trackers", "finance", "team", "admin", "support"] },
  ];

  return (
    <div data-screen-label="Team">
      <_na4.PageHead icon="users" title={lang === "pt" ? "Equipe" : "Team"}
        subtitle={lang === "pt" ? "Cadastre membros, defina permissões individuais e organize por setor" : "Add members, set permissions, organize by sector"}
        right={<_na4.Tag kind="info" icon="shield-check">{lang === "pt" ? "Modo Super Administrador" : "Super Admin Mode"}</_na4.Tag>} />

      <_na4.Tabs tabs={[
        { key: "sectors", label: lang === "pt" ? "Setores" : "Sectors" },
        { key: "password", label: lang === "pt" ? "Senha administrativa" : "Admin password" }
      ]} active={tab} onChange={setTab} />

      {tab === "sectors" && (
        <_na4.Card>
          <_na4.CardHead title={lang === "pt" ? "Setores da equipe" : "Team sectors"} icon="users-2"
            right={<_na4.Button kind="primary" icon="plus" onClick={() => setShowSector(true)}>{lang === "pt" ? "Novo setor" : "New sector"}</_na4.Button>} />
          <_na4.CardBody>
            <div className="hint mb-16">{lang === "pt" ? "Setores criados aqui aparecem automaticamente na Portaria e herdam as permissões definidas." : "Sectors auto-appear in the login screen and inherit permissions set here."}</div>
            <div className="col gap-16">
              <div className="text-faint fs-12 fw-500">{lang === "pt" ? "Setores" : "Sectors"} ({sectors.length})</div>
              {sectors.map(s => (
                <_na4.Card key={s.id}>
                  <_na4.CardBody>
                    <div className="row gap-12">
                      <_na4.Avatar name={s.name} color={s.color} size="lg" />
                      <div className="flex-1">
                        <div className="row gap-8">
                          <span className="fw-600 fs-15">{s.name}</span>
                          {s.status === "no_password" && <_na4.Tag kind="warning">{lang === "pt" ? "Sem senha" : "No password"}</_na4.Tag>}
                          {s.status === "synced" && <_na4.Tag kind="success">{lang === "pt" ? "Sincronizado com Portaria" : "Synced with login"}</_na4.Tag>}
                        </div>
                        <div className="row gap-4 mt-8" style={{ flexWrap: "wrap" }}>
                          {s.permissions.map(p => <_na4.Tag key={p} kind="info">{_na4.t(window.NA.modules.find(m => m.key === p)?.i18n || p, lang)}</_na4.Tag>)}
                        </div>
                      </div>
                      <div className="col gap-4">
                        <button className="btn ghost sm"><_na4.Icon name="edit-2" size={12} />{lang === "pt" ? "Editar" : "Edit"}</button>
                        <button className="btn ghost sm">{lang === "pt" ? "Desativar" : "Deactivate"}</button>
                        <button className="btn ghost sm text-error"><_na4.Icon name="trash-2" size={12} />{lang === "pt" ? "Excluir" : "Delete"}</button>
                      </div>
                    </div>
                  </_na4.CardBody>
                </_na4.Card>
              ))}
            </div>
          </_na4.CardBody>
        </_na4.Card>
      )}

      {tab === "password" && (
        <_na4.Card>
          <_na4.CardHead title={lang === "pt" ? "Senha administrativa" : "Admin password"} icon="key" />
          <_na4.CardBody>
            <div className="hint mb-16">{lang === "pt" ? "A senha administrativa controla ações sensíveis (exclusão, alteração de planos, etc)." : "Admin password gates sensitive actions (deletion, plan changes, etc)."}</div>
            <_na4.Field label={lang === "pt" ? "Nova senha" : "New password"} style={{ maxWidth: 360 }}>
              <_na4.Input type="password" placeholder="••••••••" />
            </_na4.Field>
            <_na4.Field label={lang === "pt" ? "Confirmar nova senha" : "Confirm new password"} style={{ maxWidth: 360, marginTop: 12 }}>
              <_na4.Input type="password" placeholder="••••••••" />
            </_na4.Field>
            <_na4.Button kind="primary" icon="save" style={{ marginTop: 16 }}>{lang === "pt" ? "Salvar senha" : "Save password"}</_na4.Button>
          </_na4.CardBody>
        </_na4.Card>
      )}
      <_na4.Modal open={showSector} onClose={() => setShowSector(false)} title={lang === "pt" ? "Novo setor" : "New sector"}
        footer={<>
          <_na4.Button kind="ghost" onClick={() => setShowSector(false)}>{t("common_cancel")}</_na4.Button>
          <_na4.Button kind="primary" onClick={() => { setShowSector(false); alert(t("common_saved")); }}>{t("common_save")}</_na4.Button>
        </>}>
        <_na4.Field label={lang === "pt" ? "Nome do setor" : "Sector name"} required>
          <_na4.Input value={sectorName} onChange={setSectorName} placeholder={lang === "pt" ? "Ex.: Comercial" : "e.g. Sales"} />
        </_na4.Field>
      </_na4.Modal>
    </div>
  );
}
window.NA.M.team = ModuleTeam;

// ============================================================
// SUPPORT — Chat (cliente)
// ============================================================
function ModuleSupport({ t, lang }) {
  const [tab, setTab] = useStateA("chat");
  const initialMessages = [
    { id: 1, from: "support", text: "Olá! Sou dionealves (tjdigital123@gmail.com). Olá! Preciso de ajuda com o sistema.", time: "27/04, 17:24" },
    { id: 2, from: "support", text: "Olá! Sou dionealves (tjdigital123@gmail.com). Olá! Preciso de ajuda com o sistema.", time: "27/04, 16:22" },
    { id: 3, from: "support", text: "Olá! Sou dionealves (tjdigital123@gmail.com). Olá! Preciso de ajuda com o sistema.", time: "27/04, 16:18" },
    { id: 4, from: "support", text: "Olá! Sou dionealves (tjdigital123@gmail.com). Olá! Preciso de ajuda com o sistema.", time: "13/04, 11:08" },
    { id: 5, from: "support", text: "Olá! Sou dionealves (tjdigital123@gmail.com). Olá! Preciso de ajuda com o sistema. testeeeeeeeeeeeeeeeeeeeeeeee", time: "12/04, 19:38" },
    { id: 6, from: "user", text: "oi", time: "27/04, 16:36" },
  ];
  const [messages, setMessages] = useStateA(initialMessages);
  const [input, setInput] = useStateA("");
  const send = () => {
    if (!input.trim()) return;
    setMessages(m => [...m, { id: Date.now(), from: "user", text: input, time: lang === "pt" ? "Agora" : "Now" }]);
    setInput("");
    setTimeout(() => {
      setMessages(m => [...m, { id: Date.now(), from: "support",
        text: lang === "pt" ? "Olá! Recebi sua mensagem. Já chamei o time. Te respondo em alguns minutos." : "Hi! Got your message. I've alerted the team. Back to you soon.",
        time: lang === "pt" ? "Agora" : "Now" }]);
    }, 800);
  };

  return (
    <div data-screen-label="Support">
      <_na4.PageHead icon="headphones" title={lang === "pt" ? "Suporte ao vivo" : "Live support"}
        subtitle={lang === "pt" ? "Converse com nosso time. Histórico permanente, respostas em tempo real." : "Chat with our team. Permanent history, real-time replies."} />

      <_na4.Card>
        <_na4.CardBody style={{ padding: 0 }}>
          <_na4.Tabs tabs={[
            { key: "chat", label: lang === "pt" ? "Conversa" : "Conversation" },
            { key: "history", label: `${messages.length} ${lang === "pt" ? "mensagens" : "messages"}` }
          ]} active={tab} onChange={setTab} />
          <div style={{
            height: 360, overflow: "auto", padding: 16,
            display: "flex", flexDirection: "column", gap: 8,
            background: "var(--color-fill-quaternary)"
          }}>
            {messages.map(m => (
              <div key={m.id} style={{
                alignSelf: m.from === "user" ? "flex-end" : "flex-start",
                maxWidth: "70%"
              }}>
                <div style={{
                  padding: "8px 14px",
                  background: m.from === "user" ? "var(--color-bg-container)" : "var(--color-success-bg)",
                  border: "1px solid " + (m.from === "user" ? "var(--color-border)" : "var(--color-success-border)"),
                  color: m.from === "user" ? "var(--fg1)" : "var(--green-7)",
                  borderRadius: 10,
                  fontSize: 13, lineHeight: 1.4
                }}>{m.text}</div>
                <div className="text-faint fs-11 mono mt-8" style={{ textAlign: m.from === "user" ? "right" : "left" }}>
                  {m.from === "user" ? "você · " + m.time : "Suporte Velocicar · " + m.time}
                </div>
              </div>
            ))}
          </div>
          <div style={{ padding: 16, borderTop: "1px solid var(--color-border-secondary)", background: "var(--color-bg-container)" }}>
            <textarea className="input" value={input} onChange={e => setInput(e.target.value)}
              placeholder={lang === "pt" ? "Digite sua mensagem... (Ctrl+Enter envia)" : "Type your message... (Ctrl+Enter sends)"}
              onKeyDown={e => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) send(); }}
              rows={2} style={{ resize: "none" }} />
            <div className="row jcsb mt-8">
              <span className="text-faint fs-11">{lang === "pt" ? "Suas mensagens ficam salvas no seu histórico permanente." : "Messages are saved permanently."}</span>
              <_na4.Button kind="primary" icon="send" onClick={send}>{lang === "pt" ? "Enviar" : "Send"}</_na4.Button>
            </div>
          </div>
        </_na4.CardBody>
      </_na4.Card>
    </div>
  );
}
window.NA.M.support = ModuleSupport;

// ============================================================
// PLANS — Pricing
// ============================================================
function ModulePlans({ t, lang }) {
  const monthlyPrice = lang === "pt" ? 497.90 : 89.90;
  const annualPrice = lang === "pt" ? 4997.90 : 899.90;
  const annualMonthly = annualPrice / 12;
  const savings = (monthlyPrice * 12) - annualPrice;

  return (
    <div data-screen-label="Plans">
      <div style={{ textAlign: "center", marginBottom: 32, paddingTop: 16 }}>
        <_na4.Tag kind="success" icon="crown" style={{ marginBottom: 12, display: "inline-flex" }}>{lang === "pt" ? "PLANOS NORTHAUTO" : "NORTHAUTO PLANS"}</_na4.Tag>
        <h1 style={{ margin: "12px 0 8px", fontSize: 32, fontWeight: 600, letterSpacing: "-0.01em" }}>
          {lang === "pt" ? "Escolha o plano " : "Choose the "}<span style={{ color: "var(--color-primary)" }}>{lang === "pt" ? "ideal" : "ideal"}</span>{lang === "pt" ? " para você" : " plan for you"}
        </h1>
        <p className="text-muted fs-14">{lang === "pt" ? "7 dias grátis — cancele a qualquer momento." : "7 days free — cancel anytime."}</p>
        <div className="row gap-12" style={{ justifyContent: "center", marginTop: 16 }}>
          <_na4.Tag kind="success" icon="shield-check">100% {lang === "pt" ? "SEGURO" : "SECURE"}</_na4.Tag>
          <_na4.Tag kind="info" icon="zap">PIX</_na4.Tag>
          <_na4.Tag kind="info" icon="credit-card">{lang === "pt" ? "Cartão" : "Card"}</_na4.Tag>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, maxWidth: 900, margin: "0 auto" }}>
        {/* MONTHLY */}
        <_na4.Card padded>
          <div className="text-faint fs-11 fw-600" style={{ letterSpacing: "0.06em", textTransform: "uppercase" }}>{lang === "pt" ? "MENSAL" : "MONTHLY"}</div>
          <div className="text-muted fs-13 mt-8">{lang === "pt" ? "Flexibilidade total, cancele quando quiser" : "Full flexibility, cancel anytime"}</div>
          <div className="mt-16">
            <_na4.Money value={monthlyPrice} lang={lang} style={{ fontSize: 36, fontWeight: 600 }} />
            <span className="text-muted fs-13"> {lang === "pt" ? "por mês" : "per month"}</span>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: "20px 0", display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              lang === "pt" ? "7 dias de teste grátis" : "7-day free trial",
              lang === "pt" ? "Acesso a todas as funcionalidades" : "Access to all features",
              lang === "pt" ? "Suporte por e-mail e WhatsApp" : "Email & WhatsApp support",
              lang === "pt" ? "Atualizações automáticas" : "Automatic updates",
              lang === "pt" ? "Cancele a qualquer momento" : "Cancel anytime",
            ].map((f, i) => <li key={i} className="row gap-8 fs-13"><_na4.Icon name="check" size={14} style={{ color: "var(--color-success)" }} />{f}</li>)}
          </ul>
          <_na4.Button kind="default" style={{ width: "100%", justifyContent: "center", height: 44 }}>{lang === "pt" ? "Começar 7 dias grátis" : "Start 7-day free trial"}</_na4.Button>
          <div className="hint text-center mt-8" style={{ textAlign: "center" }}>{lang === "pt" ? "Cobrança apenas após o teste — PIX ou Cartão" : "Charged only after trial — PIX or Card"}</div>
        </_na4.Card>

        {/* ANNUAL */}
        <_na4.Card padded style={{
          background: "linear-gradient(180deg, var(--color-primary-bg) 0%, transparent 50%)",
          borderColor: "var(--color-primary)", borderWidth: 2, position: "relative"
        }}>
          <div style={{
            position: "absolute", top: -14, left: "50%", transform: "translateX(-50%)",
            background: "var(--color-primary)", color: "#fff", padding: "4px 12px", borderRadius: 999,
            fontSize: 11, fontWeight: 600, letterSpacing: "0.04em"
          }}>{lang === "pt" ? "MAIS ESCOLHIDO" : "MOST POPULAR"}</div>

          <div className="text-faint fs-11 fw-600" style={{ letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--color-primary)" }}>{lang === "pt" ? "ANUAL" : "ANNUAL"}</div>
          <div className="text-muted fs-13 mt-8">{lang === "pt" ? `Economize ${Math.round((savings/(monthlyPrice*12))*100)}% pagando uma vez por ano` : `Save ${Math.round((savings/(monthlyPrice*12))*100)}% paying yearly`}</div>
          <div className="mt-16">
            <_na4.Money value={annualPrice} lang={lang} style={{ fontSize: 36, fontWeight: 600 }} />
            <span className="text-muted fs-13"> {lang === "pt" ? "por ano" : "per year"}</span>
            <div className="text-muted fs-12">{lang === "pt" ? `(equivale a ${_na4.fmtMoney(annualMonthly, lang)}/mês)` : `(${_na4.fmtMoney(annualMonthly, lang)}/mo equivalent)`}</div>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: "20px 0", display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              lang === "pt" ? "7 dias de teste grátis" : "7-day free trial",
              lang === "pt" ? "Acesso a todas as funcionalidades" : "Access to all features",
              lang === "pt" ? "Suporte prioritário por WhatsApp" : "Priority WhatsApp support",
              lang === "pt" ? "Atualizações automáticas" : "Automatic updates",
              lang === "pt" ? `Economia de ${_na4.fmtMoney(savings, lang)}` : `Save ${_na4.fmtMoney(savings, lang)}`,
            ].map((f, i) => <li key={i} className="row gap-8 fs-13"><_na4.Icon name="check" size={14} style={{ color: "var(--color-success)" }} />{f}</li>)}
          </ul>
          <_na4.Button kind="primary" style={{ width: "100%", justifyContent: "center", height: 44 }}>{lang === "pt" ? "Começar 7 dias grátis" : "Start 7-day free trial"}</_na4.Button>
          <div className="hint text-center mt-8" style={{ textAlign: "center" }}>{lang === "pt" ? "Cobrança apenas após o teste — PIX ou Cartão" : "Charged only after trial — PIX or Card"}</div>
        </_na4.Card>
      </div>

      <div className="row" style={{ justifyContent: "center", gap: 24, marginTop: 24, color: "var(--fg2)", fontSize: 12 }}>
        <span className="row gap-4"><_na4.Icon name="lock" size={12} />{lang === "pt" ? "Pagamento criptografado" : "Encrypted payment"}</span>
        <span className="row gap-4"><_na4.Icon name="zap" size={12} />{lang === "pt" ? "Liberação imediata" : "Instant access"}</span>
        <span className="row gap-4"><_na4.Icon name="message-circle" size={12} />{lang === "pt" ? "Suporte por WhatsApp" : "WhatsApp support"}</span>
        <span className="row gap-4"><span className="text-warning">★★★★★</span> 4,9/5</span>
        <span className="row gap-4"><_na4.Icon name="users" size={12} />+100 {lang === "pt" ? "revendas" : "dealerships"}</span>
      </div>
    </div>
  );
}
window.NA.M.plans = ModulePlans;

// ============================================================
// ACCOUNT — Conta
// ============================================================
function ModuleAccount({ t, lang, user }) {
  return (
    <div data-screen-label="Account">
      <_na4.PageHead icon="user" title={lang === "pt" ? "Minha conta" : "My account"}
        subtitle={lang === "pt" ? "Gerencie seus dados, assinatura e pagamento." : "Manage your data, subscription and payment."} />

      <div style={{ maxWidth: 720 }}>
        <_na4.Card className="mb-16">
          <_na4.CardHead title={lang === "pt" ? "Dados do cadastro" : "Account data"} icon="user-circle" />
          <_na4.CardBody>
            <div className="field-row">
              <_na4.Field label={lang === "pt" ? "Nome / Empresa" : "Name / Company"}>
                <div className="fw-500">{user.name}</div>
              </_na4.Field>
              <_na4.Field label="Email">
                <div className="fw-500">tjdigital123@gmail.com</div>
              </_na4.Field>
              <_na4.Field label={lang === "pt" ? "Telefone" : "Phone"}>
                <div className="text-faint">—</div>
              </_na4.Field>
              <_na4.Field label="CPF">
                <div className="text-faint">—</div>
              </_na4.Field>
              <_na4.Field label={lang === "pt" ? "Endereço" : "Address"}>
                <div className="text-faint">—</div>
              </_na4.Field>
              <_na4.Field label={lang === "pt" ? "Tipo de conta" : "Account type"}>
                <_na4.Tag kind="success">{user.role}</_na4.Tag>
              </_na4.Field>
              <_na4.Field label={lang === "pt" ? "Conta criada em" : "Created at"}>
                <div className="mono fs-12">21/04/2026</div>
              </_na4.Field>
              <_na4.Field label={lang === "pt" ? "Último acesso" : "Last access"}>
                <div className="mono fs-12">23/05/2026, 01:06:13</div>
              </_na4.Field>
            </div>
          </_na4.CardBody>
        </_na4.Card>

        <_na4.Card className="mb-16">
          <_na4.CardHead title={lang === "pt" ? "Assinatura" : "Subscription"} icon="crown" />
          <_na4.CardBody>
            <div className="field-row">
              <_na4.Field label="Status"><_na4.Tag kind="warning">{t("status_trial")}</_na4.Tag></_na4.Field>
              <_na4.Field label={lang === "pt" ? "Plano" : "Plan"}><div className="text-faint">—</div></_na4.Field>
            </div>
            <_na4.Button kind="success" icon="crown" style={{ marginTop: 16 }}>{lang === "pt" ? "Ver planos" : "View plans"}</_na4.Button>
            <div className="hint mt-8">{lang === "pt" ? "No portal você pode trocar do cartão, cancelar, baixar faturas e mudar de plano." : "On the portal you can change card, cancel, get invoices and switch plan."}</div>
          </_na4.CardBody>
        </_na4.Card>

        <_na4.Card className="mb-16">
          <_na4.CardHead title={lang === "pt" ? "Trocar email de acesso" : "Change login email"} icon="mail" />
          <_na4.CardBody>
            <div className="hint mb-16">{lang === "pt" ? "Atualize o email usado para fazer login. A troca é imediata — use o novo email no próximo acesso." : "Update the email used to log in. Change is immediate — use the new email next time."}</div>
            <_na4.Field label={lang === "pt" ? "Email atual" : "Current email"}>
              <_na4.Input value="tjdigital123@gmail.com" disabled />
            </_na4.Field>
            <_na4.Field label={lang === "pt" ? "Novo email" : "New email"} style={{ marginTop: 12 }}>
              <_na4.Input placeholder="seunovo@email.com" />
            </_na4.Field>
            <_na4.Button kind="primary" icon="mail" style={{ marginTop: 16 }}>{lang === "pt" ? "Salvar novo email" : "Save new email"}</_na4.Button>
          </_na4.CardBody>
        </_na4.Card>

        <_na4.Card className="mb-16">
          <_na4.CardHead title={lang === "pt" ? "Trocar senha de acesso" : "Change password"} icon="key" />
          <_na4.CardBody>
            <div className="hint mb-16">{lang === "pt" ? "Defina uma nova senha para o seu login. Mínimo de 6 caracteres." : "Set a new password. Minimum 6 characters."}</div>
            <_na4.Field label={lang === "pt" ? "Nova senha" : "New password"}>
              <_na4.Input type="password" placeholder="Digite a nova senha" />
            </_na4.Field>
            <_na4.Field label={lang === "pt" ? "Confirmar nova senha" : "Confirm new password"} style={{ marginTop: 12 }}>
              <_na4.Input type="password" placeholder="Repita a nova senha" />
            </_na4.Field>
            <_na4.Button kind="primary" icon="key" style={{ marginTop: 16 }}>{lang === "pt" ? "Salvar nova senha" : "Save new password"}</_na4.Button>
          </_na4.CardBody>
        </_na4.Card>

        <_na4.Card style={{ borderColor: "var(--color-error-border)" }}>
          <_na4.CardHead title={lang === "pt" ? "Excluir conta" : "Delete account"} icon="trash-2" />
          <_na4.CardBody>
            <div className="text-error fs-13 mb-16">
              {lang === "pt" ? "Cancela sua assinatura imediatamente, apaga todos os dados da empresa e remove seu acesso. Essa ação é definitiva." : "Cancels subscription immediately, deletes all company data and removes your access. This is irreversible."}
            </div>
            <_na4.Button kind="danger" icon="trash-2">{lang === "pt" ? "Excluir minha conta" : "Delete my account"}</_na4.Button>
          </_na4.CardBody>
        </_na4.Card>

        <div className="text-faint fs-11 text-center mt-16" style={{ textAlign: "center" }}>
          {lang === "pt" ? "Pagamentos seguros via Paddle." : "Secure payments via Paddle."}
        </div>
      </div>
    </div>
  );
}
window.NA.M.account = ModuleAccount;