/* ============================================================
   Devonew — Apoie o Criador (shared)
   Modal usado no App do Membro e no Painel da Igreja.
   Abas: Sobre · Sugestões · Doação.
   As sugestões são gravadas em localStorage e lidas pelo
   Painel Master (Super Admin).
   ============================================================ */
const { useState: useStateS } = React;

const DEV_DEFAULTS = {
  name: 'Leonardo Prado',
  family: 'Leonardo, Yasmin e Margarida',
  role: 'Criador & desenvolvedor',
  pixKey: 'apoie@devonew.com',
  pixName: 'Leonardo Prado',
  pixCity: 'SÃO PAULO',
  about: `Olá! Sou o Leonardo, casado com a Yasmin e pai da Margarida. Criei o devonew movido por um desejo muito sincero: criar um apoio para a minha caminhada diária de fé e devoção, e ajudar a minha igreja local a se organizar.

Sei bem como o cansaço e a correria tentam engolir nossa rotina com Deus. Por isso, desenhei este espaço para ser um abraço na nossa comunidade — um lugar seguro para nos manter conectados com Deus diariamente.

Cada linha de código foi escrita por uma família comum que entende as suas lutas, feita para apoiar a sua comunhão. Que Deus abençoe sua jornada!`,
  aboutSign: 'Com carinho,\nLeonardo, Yasmin e Margarida.',
  donateTitle: 'Apoie este Ministério',
  donate: `O devonew nasceu de um propósito sincero: servir à igreja e apoiar a caminhada diária de cada irmão. Por ser um projeto independente, desenvolvido com muito carinho nas horas vagas entre o meu trabalho e os cuidados com a minha família, cada detalhe aqui é mantido de forma voluntária.

Se esta plataforma tem abençoado a sua vida devocional, facilitado a comunhão com a sua igreja ou te impulsionado a buscar mais ao Senhor, você pode caminhar junto conosco.

Sua doação voluntária de qualquer valor nos ajuda diretamente a arcar com os custos técnicos de servidores, segurança e e-mails do sistema, permitindo que eu continue dedicando tempo para criar novas ferramentas de estudo e oração para todos nós.

Sua generosidade é um combustível que nos lembra que não estamos caminhando sozinhos.

Muito obrigado por fazer parte disso e por abençoar a nossa família!`,
};

/* O Super Admin pode editar todos esses textos no Painel Master.
   Ordem de leitura: padrão → cache local → servidor (/__api/support-info). */
const SUPPORT_INFO_KEY = 'devonew_support_info';
function readSupportOverride() {
  try { return JSON.parse(localStorage.getItem(SUPPORT_INFO_KEY)) || null; } catch { return null; }
}
window.__devSupport = readSupportOverride();
function getDEV() {
  const o = window.__devSupport;
  return o && typeof o === 'object' ? { ...DEV_DEFAULTS, ...o } : DEV_DEFAULTS;
}
/* o servidor (worker e server.js) atende /__api/* em qualquer host, e o
   conteúdo é global — caminho relativo funciona em produção e no dev local */
const SUPPORT_API = (typeof location !== 'undefined' && /^https?:$/.test(location.protocol))
  ? '/__api/support-info' : null;
if (SUPPORT_API) {
  try {
    fetch(SUPPORT_API).then((r) => r.ok ? r.json() : null).then((info) => {
      if (info && typeof info === 'object') {
        window.__devSupport = info;
        try { localStorage.setItem(SUPPORT_INFO_KEY, JSON.stringify(info)); } catch {}
      }
    }).catch(() => {});
  } catch {}
}

/* feedback bridge → Painel Master */
const FB_KEY = 'devonew_devfeedback';
/* relay HTTP para o domínio principal (quando rodando no servidor multi-tenant).
   Permite que o feedback de um subdomínio de igreja chegue ao Painel Master,
   que vive em outra origem (devonew.localhost). */
const FB_API = (typeof window !== 'undefined' && window.DEVO_HOST)
  ? `//${window.DEVO_HOST}/__api/feedback`
  : (typeof location !== 'undefined' && location.hostname.endsWith('localhost'))
    ? `${location.protocol}//devonew.localhost:${location.port || 5050}/__api/feedback`
    : null;
function readFeedback() { try { return JSON.parse(localStorage.getItem(FB_KEY)) || []; } catch { return []; } }
function pushFeedback(entry) {
  const list = readFeedback();
  list.unshift(entry);
  try { localStorage.setItem(FB_KEY, JSON.stringify(list)); } catch {}
  if (FB_API) {
    try {
      fetch(FB_API, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(entry) }).catch(() => {});
    } catch {}
  }
}

const FB_TYPES = [
  { id: 'sugestao', label: 'Sugestão', icon: 'bulb' },
  { id: 'elogio', label: 'Elogio', icon: 'smile' },
  { id: 'reclamacao', label: 'Problema', icon: 'warning' },
  { id: 'outro', label: 'Outro', icon: 'chat' },
];

function paragraphs(text) {
  return text.split('\n\n').map((p, i) => <p key={i} className="sup-p">{p}</p>);
}

/* ---------- Sobre ---------- */
function SupportAbout() {
  const DEV = getDEV();
  return (
    <div className="sup-pane">
      <div className="sup-dev">
        {DEV.photo
          ? <div className="sup-portrait" style={{ backgroundImage: `url(${DEV.photo})`, backgroundSize: 'cover', backgroundPosition: 'center' }} role="img" aria-label={DEV.family}/>
          : <div className="sup-portrait ph">foto · {DEV.family}</div>}
        <div>
          <div className="sup-dev-name">{DEV.name}</div>
          <div className="sup-dev-role">{DEV.role} · uma família comum</div>
        </div>
      </div>
      <h3 className="sup-h">Sobre o Criador</h3>
      {paragraphs(DEV.about)}
      <div className="sup-sign">{DEV.aboutSign.split('\n').map((l, i) => <div key={i}>{l}</div>)}</div>
    </div>
  );
}

/* ---------- Sugestões ---------- */
function SupportFeedback({ sender, toast, onClose }) {
  const [type, setType] = useStateS('sugestao');
  const [msg, setMsg] = useStateS('');
  const [name, setName] = useStateS(sender.name || '');
  const [sent, setSent] = useStateS(false);

  const submit = () => {
    if (!msg.trim()) { toast && toast('Escreva sua mensagem antes de enviar'); return; }
    const t = FB_TYPES.find((x) => x.id === type);
    pushFeedback({
      id: 'fb' + Date.now().toString(36),
      type: t.label, typeId: type,
      message: msg.trim(),
      from: name.trim() || 'Anônimo',
      role: sender.role || '—',
      church: sender.church || '—',
      source: sender.source || 'app',
      when: new Date().toISOString(),
      read: false,
    });
    setSent(true);
    toast && toast('Mensagem enviada ao desenvolvedor 💬');
  };

  if (sent) {
    return (
      <div className="sup-pane sup-thanks">
        <div className="sup-thanks-ico"><Icon name="check" size={30}/></div>
        <h3 className="sup-h" style={{ marginTop: 14 }}>Recebido com gratidão!</h3>
        <p className="sup-p" style={{ textAlign: 'center' }}>Sua mensagem foi enviada diretamente para a equipe do devonew. Lemos cada palavra com carinho — obrigado por ajudar a melhorar a plataforma.</p>
        <div className="sup-thanks-actions">
          <button className="btn btn-quiet" onClick={() => { setSent(false); setMsg(''); }}>Enviar outra</button>
          <button className="btn btn-primary" onClick={onClose}>Fechar</button>
        </div>
      </div>
    );
  }

  return (
    <div className="sup-pane">
      <h3 className="sup-h">Fale com o desenvolvedor</h3>
      <p className="sup-p">Sugestões de melhoria, elogios, problemas ou ideias — sua mensagem vai direto para quem cuida do devonew.</p>

      <span className="sup-lab">Tipo de mensagem</span>
      <div className="sup-types">
        {FB_TYPES.map((t) => (
          <button key={t.id} className={`sup-type ${type === t.id ? 'on' : ''}`} onClick={() => setType(t.id)}>
            <Icon name={t.icon} size={17}/>{t.label}
          </button>
        ))}
      </div>

      <span className="sup-lab">Sua mensagem</span>
      <textarea className="sup-textarea" rows={5} value={msg} onChange={(e) => setMsg(e.target.value)}
        placeholder="Escreva aqui o que você gostaria de compartilhar…"/>

      <span className="sup-lab">Seu nome (opcional)</span>
      <input className="sup-input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Como podemos te chamar?"/>

      <button className="btn btn-primary sup-send" onClick={submit}><Icon name="share" size={17}/>Enviar mensagem</button>
      <p className="sup-fine">Enviado com segurança para o administrador geral do devonew.</p>
    </div>
  );
}

/* ---------- Doação ---------- */
function SupportDonate({ toast }) {
  const DEV = getDEV();
  const [val, setVal] = useStateS(25);
  const chips = [10, 25, 50, 100];
  const copyPix = () => {
    try { navigator.clipboard.writeText(DEV.pixKey); } catch {}
    toast && toast('Chave PIX copiada ✓');
  };
  return (
    <div className="sup-pane">
      <h3 className="sup-h">{DEV.donateTitle}</h3>
      {paragraphs(DEV.donate)}

      <div className="sup-donate-card">
        <span className="sup-lab" style={{ marginTop: 0 }}>Escolha um valor</span>
        <div className="sup-amounts">
          {chips.map((c) => (
            <button key={c} className={`sup-amt ${val === c ? 'on' : ''}`} onClick={() => setVal(c)}>R$ {c}</button>
          ))}
          <button className={`sup-amt ${!chips.includes(val) ? 'on' : ''}`} onClick={() => setVal('outro')}>Outro</button>
        </div>

        <div className="sup-pix">
          <div className="sup-qr"><Icon name="qr" size={64}/></div>
          <div className="sup-pix-body">
            <div className="sup-pix-lab">Chave PIX (e-mail)</div>
            <div className="sup-pix-key">{DEV.pixKey}</div>
            <button className="btn btn-quiet btn-sm" onClick={copyPix}><Icon name="copy" size={14}/>Copiar chave</button>
          </div>
        </div>

        <button className="btn btn-primary sup-send" onClick={() => toast && toast('Obrigado pela sua generosidade! 💚')}>
          <Icon name="heart" size={17}/>Doar {typeof val === 'number' ? `R$ ${val}` : 'agora'} via PIX
        </button>
        <p className="sup-fine">Doação voluntária e única · {DEV.pixName} · processada com segurança.</p>
      </div>
    </div>
  );
}

/* ---------- Modal shell ---------- */
function SupportModal({ onClose, toast, sender = {} }) {
  const [tab, setTab] = useStateS('sobre');
  const tabs = [
    { id: 'sobre', label: 'Sobre', icon: 'heart' },
    { id: 'sugestoes', label: 'Sugestões', icon: 'chat' },
    { id: 'doacao', label: 'Doação', icon: 'gift' },
  ];
  return (
    <div className="sup-overlay" onClick={onClose}>
      <div className="sup-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-label="Apoie o criador">
        <header className="sup-head">
          <div className="sup-head-id">
            <span className="sup-head-mark"><Icon name="heart" size={18}/></span>
            <div>
              <div className="sup-head-t">Apoie o criador</div>
              <div className="sup-head-s">devonew · feito por uma família, para a igreja</div>
            </div>
          </div>
          <button className="sup-close" onClick={onClose} aria-label="Fechar"><Icon name="x" size={20}/></button>
        </header>

        <div className="sup-tabs">
          {tabs.map((t) => (
            <button key={t.id} className={`sup-tab ${tab === t.id ? 'on' : ''}`} onClick={() => setTab(t.id)}>
              <Icon name={t.icon} size={16}/>{t.label}
            </button>
          ))}
        </div>

        <div className="sup-scroll">
          {tab === 'sobre' && <SupportAbout/>}
          {tab === 'sugestoes' && <SupportFeedback sender={sender} toast={toast} onClose={onClose}/>}
          {tab === 'doacao' && <SupportDonate toast={toast}/>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SupportModal, DEV_INFO: DEV_DEFAULTS, getSupportInfo: getDEV, SUPPORT_INFO_KEY, SUPPORT_API, readDevFeedback: readFeedback, FB_KEY });