/* ============================================================
   EDUCARE — Vitrine de planos

   Lê billing_plans do banco. Preço, teto de pacientes e teto de
   profissionais NÃO são escritos aqui: mudou o catálogo, esta tela
   muda junto, sem deploy. Repetir o preço no front é a forma mais
   barata de cobrar um valor e prometer outro.

   Conteúdo e copy espelham src/components/landing/Pricing.jsx do repo
   "Educare - LP", que já está no ar com estes planos. Quem mexer em um,
   olha o outro.

   Duas regras de texto que não podem afrouxar:

   1. A IA é sempre RASCUNHO que a profissional revisa, ajusta e assina.
      Nunca "laudo pronto", nunca "laudo automático". Prometer conclusão
      clínica automática é problema com o conselho de classe dela, não
      licença poética de marketing.
   2. Nenhum contador de IA aparece. A IA é inclusa e, comercialmente,
      ilimitada. O teto técnico existe contra abuso e é assunto interno.

   O que separa os planos é PACIENTE ATIVO (paciente não arquivado) e,
   depois, o tamanho da equipe. Avaliações, anamneses, planejamentos,
   atendimentos, agenda, PDF e WhatsApp são ilimitados em todos.
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.Icon;

  /* Qual plano leva o selo de recomendado. Não é coluna de
     billing_plans, e não vale uma migração só para isso: é decisão de
     vitrine, não de cobrança. Se um dia virar coluna, esta constante
     sai e o dado manda.

     É um ID, e id não acompanha nome comercial: "clinico" é o plano que
     hoje se chama Clínica. O par completo, de id para nome, está em
     supabase/migrations/20260807000000_renomeia_planos.sql —
     inicio → Básico, clinico → Clínica, clinica → Clínica Pro. */
  const RECOMENDADO = "clinico";

  /* Vale para os três planos, por isso vive fora dos cartões. */
  const INCLUSO_EM_TODOS = [
    "Avaliações com correção normativa, ilimitadas",
    "Anamneses e planejamentos ilimitados",
    "Atendimentos e agenda ilimitados",
    "Rascunhos com IA para você revisar, ajustar e assinar",
    "Relatórios e laudos em PDF",
    "Envio por WhatsApp",
  ];

  const real = (centavos) =>
    (Number(centavos || 0) / 100).toLocaleString("pt-BR", { minimumFractionDigits: 2 });

  /* ---------------- contas da vitrine ----------------
     Puras de propósito: dá para conferir sem abrir navegador. */

  /* Plano com mais de um profissional não pode ser assinado sozinho: o
     produto ainda não tem organização nem conta de equipe. Em vez de
     marcar "sob consulta" na mão, derivamos do próprio catálogo, porque
     o motivo comercial e o motivo técnico são o mesmo. */
  const sobConsulta = (p) => Number(p.limite_profissionais || 1) > 1;

  function destaquesDe(p) {
    const pacientes = p.limite_pacientes_ativos == null
      ? "Pacientes ativos ilimitados"
      : `Até ${p.limite_pacientes_ativos} pacientes ativos`;
    const profissionais = Number(p.limite_profissionais || 1) > 1
      ? `Até ${p.limite_profissionais} profissionais`
      : "1 profissional";
    return [pacientes, profissionais];
  }

  /* Quanto o ano de uma vez economiza, em reais e em porcentagem. Sai
     do catálogo, nunca de um número escrito na tela: se um preço mudar
     no banco e a porcentagem ficar para trás, vira propaganda enganosa
     sem ninguém perceber. */
  function economiaAnual(p) {
    const doze = Number(p.preco_mensal_centavos || 0) * 12;
    const ano = Number(p.preco_anual_centavos || 0);
    if (!doze || !ano || ano >= doze) return null;
    return { centavos: doze - ano, porcento: Math.round((1 - ano / doze) * 100) };
  }

  /* A chamada do toggle fala por todos os planos de uma vez, então usa
     a MENOR economia da vitrine. Anunciar a maior seria prometer, num
     plano, o desconto de outro. */
  function economiaDaVitrine(planos) {
    const pcts = (planos || []).map(economiaAnual).filter(Boolean).map((e) => e.porcento);
    return pcts.length ? Math.min(...pcts) : null;
  }

  /* ---------------- pedaços da tela ---------------- */

  /* Esta faixa prometia "teste grátis por 3 dias, sem cartão". O teste
     saiu do produto e a faixa continuou no ar, prometendo na tela de
     venda uma coisa que o sistema não entrega mais.

     No lugar entra o que de fato tira o peso do clique hoje: a garantia
     de reembolso. É a mesma faixa, no mesmo lugar, com a mesma copy da
     página de vendas (src/components/landing/Pricing.jsx no repo
     "Educare - LP"). Quem mexer em uma, olha a outra. */
  function FaixaDeGarantia() {
    return (
      <div className="pl-garantia">
        <b>Não gostou? Devolvemos o dinheiro em até 7 dias.</b>
        <span>Um WhatsApp basta, e a gente devolve sem perguntar por quê.</span>
      </div>
    );
  }

  function Ciclo({ ciclo, onChange, porcento }) {
    const botao = (valor, rotulo) => (
      <button
        type="button"
        role="tab"
        aria-selected={ciclo === valor}
        className={ciclo === valor ? "on" : ""}
        onClick={() => onChange(valor)}
      >
        {rotulo}
      </button>
    );
    return (
      <div className="pl-ciclo">
        <div className="seg" role="tablist" aria-label="Periodicidade da cobrança">
          {botao("mensal", "Mensal")}
          {botao("anual", "Anual")}
        </div>
        {porcento != null && (
          <span className="pl-economia">Pagando o ano de uma vez, você economiza {porcento}%.</span>
        )}
      </div>
    );
  }

  /* Ação do cartão. Sem destino configurado não existe botão: o porquê
     está em app/assinatura-checkout.jsx. */
  function Acao({ plano, ciclo, atual }) {
    const C = window.EducareCheckout;
    const contato = C.contato();

    if (atual) {
      return <span className="pl-atual"><Icon name="clipboardCheck" size={16} /> Seu plano atual</span>;
    }

    /* O checkout manda: existindo link, o plano é assinável, mesmo o
       que antes era "fale com a gente". Quem decide isso é a
       configuração, não uma regra escrita aqui. */
    const url = C.urlDe(plano.id, ciclo);
    if (url) {
      return (
        <a className="btn btn-primary pl-cta" href={url} target="_blank" rel="noreferrer">
          {/* "Assinar o plano X", e não "Assinar o X": o nome vem do
              banco e pode ser feminino ("Clínica"), então o artigo tem
              que concordar com "plano", que é sempre masculino. */}
          <Icon name="sparkles" size={17} /> Assinar o plano {plano.nome}
        </a>
      );
    }

    if (sobConsulta(plano)) {
      return contato
        ? <a className="btn btn-primary pl-cta" href={contato} target="_blank" rel="noreferrer">
            <Icon name="headset" size={17} /> Fale com a gente
          </a>
        : <p className="pl-espera">Sob consulta. Montamos o plano da sua clínica junto com você.</p>;
    }
    return (
      <p className="pl-espera">
        Estamos finalizando o pagamento online.
        {contato
          ? <a href={contato} target="_blank" rel="noreferrer"> Fale com a gente para assinar agora.</a>
          : " Em breve você assina por aqui."}
      </p>
    );
  }

  function Cartao({ plano, ciclo, atual }) {
    const anual = ciclo === "anual";
    const recomendado = plano.id === RECOMENDADO;
    const economia = economiaAnual(plano);
    const preco = anual ? plano.preco_anual_centavos : plano.preco_mensal_centavos;

    return (
      <div className={"pl-card" + (recomendado ? " rec" : "") + (atual ? " atual" : "")}>
        {recomendado && <span className="pl-selo">Recomendado</span>}

        <h3>{plano.nome}</h3>

        <p className="pl-preco">
          <b>R$ {real(preco)}</b>
          <span>{anual ? "/ano" : "/mês"}</span>
        </p>
        {/* Linha sempre presente, com ou sem texto, para os três cartões
            alinharem o preço na mesma altura. */}
        <p className="pl-mes">
          {anual && plano.preco_anual_centavos
            ? `equivale a R$ ${real(Math.round(plano.preco_anual_centavos / 12))} por mês`
            : " "}
        </p>

        <ul className="pl-feats">
          {destaquesDe(plano).map((item) => (
            <li key={item} className="forte"><Icon name="clipboardCheck" size={15} /> {item}</li>
          ))}
          {INCLUSO_EM_TODOS.map((item) => (
            <li key={item}><Icon name="clipboardCheck" size={15} /> {item}</li>
          ))}
        </ul>

        <div className="pl-foot">
          <Acao plano={plano} ciclo={ciclo} atual={atual} />
          {anual && economia && !sobConsulta(plano) && (
            <p className="pl-nota">Economia de R$ {real(economia.centavos)} no ano.</p>
          )}
        </div>
      </div>
    );
  }

  /* ---------------- tela ---------------- */

  function TelaPlanos({ onBack, ciclo: cicloInicial }) {
    const assinatura = window.usarAssinatura();
    const [planos, setPlanos] = useState(null);   // null = ainda carregando
    const [erro, setErro] = useState("");
    const [ciclo, setCiclo] = useState(cicloInicial === "anual" ? "anual" : "mensal");
    const [tentativa, setTentativa] = useState(0); // "Tentar de novo" refaz a carga

    useEffect(() => {
      let vivo = true;
      (async () => {
        const { data, error } = await window.sb
          .from("billing_plans")
          .select("id,nome,preco_mensal_centavos,preco_anual_centavos,limite_pacientes_ativos,limite_profissionais,ordem")
          .eq("ativo", true)
          .order("ordem");
        if (!vivo) return;
        if (error) {
          console.error("[EducarePlanos] catálogo não carregou:", error);
          setErro("Não foi possível carregar os planos agora. Tente de novo em instantes.");
          return;
        }
        setPlanos(data || []);
      })();
      return () => { vivo = false; };
    }, [tentativa]);

    /* A garantia some para quem já assinou: ela fala com quem ainda está
       decidindo, e quem paga há meses não está mais nessa dúvida. */
    const mostrarGarantia = !assinatura.plano;

    return (
      <div className="pl-wrap">
        {onBack && (
          <div className="crumb">
            <button className="pt-back" onClick={onBack}><Icon name="chevL" size={16} /> Voltar</button>
          </div>
        )}

        <div className="page-head" style={{ marginBottom: 10 }}>
          <div>
            <h1><Icon name="sparkles" size={25} /> Planos do Educare</h1>
            <p className="sub">
              O Básico tem teto de pacientes; da Clínica para cima, não. Avaliações,
              anamneses, planejamentos e atendimentos são ilimitados em todos.
            </p>
          </div>
        </div>

        {mostrarGarantia && <FaixaDeGarantia />}

        {erro && <p className="form-err" role="alert" style={{ color: "#EF4444", fontWeight: 700 }}>{erro} <button className="btn btn-ghost btn-xs" onClick={() => { setErro(""); setPlanos(null); setTentativa((n) => n + 1); }}>Tentar de novo</button></p>}
        {!erro && planos === null && <p className="sub">Carregando planos…</p>}

        {planos !== null && planos.length > 0 && (
          <>
            <Ciclo ciclo={ciclo} onChange={setCiclo} porcento={economiaDaVitrine(planos)} />
            <div className="pl-grid">
              {planos.map((p) => (
                /* "Seu plano atual" (sem botão) só para quem está EM DIA
                   nesse plano e nesse ciclo. Antes bastava o plano: conta
                   vencida ou estornada não tinha como renovar, e "mudar
                   para anual" dava num cartão sem botão (auditoria 25/09). */
                <Cartao key={p.id} plano={p} ciclo={ciclo}
                  atual={assinatura.plano === p.id && assinatura.podeEscrever
                    && (!assinatura.ciclo || assinatura.ciclo === ciclo)} />
              ))}
            </div>
          </>
        )}

        <div className="pl-explica">
          <p>
            <b>Seu histórico é sempre seu.</b> Se você cancelar ou pedir o reembolso, sua conta
            continua com acesso de leitura a prontuário, laudos, avaliações, agenda e PDFs, e você
            pode exportar tudo quando quiser. Você só deixa de registrar coisas novas.
          </p>
          <p>
            <b>Paciente ativo é o que não está arquivado.</b> Encerrou um acompanhamento? Arquive:
            a vaga volta a ficar livre e o prontuário continua inteiro, legível e exportável.
            Nada é apagado.
          </p>
        </div>
      </div>
    );
  }

  window.TelaPlanos = TelaPlanos;
  /* Exposto para os testes: são as contas da vitrine, e elas precisam
     ser conferidas sem depender de navegador. */
  window.EducarePlanosCalculo = {
    real, destaquesDe, sobConsulta, economiaAnual, economiaDaVitrine, RECOMENDADO,
  };
})();