// Cadastro de Objetivos Pessoais — seleção de objetivos com detalhes (motivo, prazos, observações)
const { useState: useStateOp } = React;
const fmtDataOp = (v) => { if (!v) return ""; const p = String(v).split("-"); return p.length === 3 ? `${p[2]}/${p[1]}/${p[0]}` : v; };

const OBJ_PESSOAIS_CATALOGO = [
  { id: "imovel", icone: "🏠", nome: "Aquisição de Imóvel", desc: "Realização do sonho da casa própria ou investimento imobiliário" },
  { id: "automovel", icone: "🚗", nome: "Aquisição de Automóvel", desc: "Conquista do carro/moto ideal para seu dia-a-dia" },
  { id: "viagens", icone: "✈️", nome: "Viagens e Experiências", desc: "Planejamento de viagens nacionais e internacionais" },
  { id: "aposentadoria", icone: "🌴", nome: "Aposentadoria", desc: "Preparação para qualidade de vida futura" },
  { id: "familiar", icone: "👨‍👩‍👧", nome: "Planejamento Familiar", desc: "Preparação para unificar vida financeira e trazer tranquilidade à família" },
  { id: "seguranca", icone: "🛡️", nome: "Segurança Financeira Patrimonial", desc: "Proteção do patrimônio e preparo para sucessão" },
  { id: "crescimento", icone: "📈", nome: "Crescimento Patrimonial", desc: "Expansão do patrimônio com estratégias financeiras" },
  { id: "investimentos", icone: "🎯", nome: "Investimentos", desc: "Estratégias de investimentos seguras e diversificadas" },
  { id: "organizacao", icone: "🧮", nome: "Organização Financeira", desc: "Gestão estratégica do orçamento e das contas pessoais" },
  { id: "dividas", icone: "💳", nome: "Quitação de dívidas", desc: "Eliminação de dívidas e limpeza do nome" },
  { id: "educacao", icone: "🎓", nome: "Educação e Capacitação", desc: "Investimentos em cursos, graduação ou especializações" },
  { id: "outro", icone: "•••", nome: "Outro", desc: "Outros objetivos financeiros" },
];

// Espelha cada objetivo pessoal selecionado como meta financeira na sessão 2
window.syncMetasPessoais = function(objetivos, dados) {
  const cat = OBJ_PESSOAIS_CATALOGO;
  const ativo = (k) => { const d = dados[k]; return d && d.selecionado && (d.confirmado || (d.motivo && d.fim)); };
  let out = (objetivos || []).filter(o => !o.origem || ativo(o.origem));
  cat.forEach(i => {
    const d = dados[i.id];
    if (!d || !d.selecionado) return;
    if (!(d.confirmado || (d.motivo && d.fim))) return;
    const nome = i.id === "outro" && d.titulo ? d.titulo : i.nome;
    const existe = out.find(o => o.origem === i.id);
    if (!existe) {
      out = [...out, { id: "op_" + i.id, origem: i.id, nome, icone: i.icone, alvo: 0, acumulado: 0, prazo: d.fim || "" }];
    } else {
      out = out.map(o => o.origem === i.id ? { ...o, nome, prazo: o.prazo || d.fim || "" } : o);
    }
  });
  return out;
};

function ObjPessoalCard({ item, data, open, onToggleSelect, onToggleOpen, onChange, onConfirm }) {
  const selected = !!data.selecionado;
  return (
    <div className={`opes-card ${selected ? "on" : ""}`}>
      <button className="opes-head" onClick={() => onToggleSelect(item.id)}>
        <div className="opes-icon">{item.icone}</div>
        {selected && <span className="opes-check">✓</span>}
        <div className="opes-name">{item.nome}</div>
        <div className="opes-desc">{item.desc}</div>
      </button>
      {selected && (
        <button className="opes-toggle" onClick={() => onToggleOpen(item.id)}>
          {data.confirmado ? "✓ Cadastrado — editar detalhes" : "Detalhes"} <span className={`opes-chev ${open ? "up" : ""}`}>⌄</span>
        </button>
      )}
      {selected && open && (
        <div className="opes-form">
          <label className="opes-field">
            <span>Por que esse objetivo é uma prioridade para você?</span>
            <textarea rows="3" value={data.motivo || ""} placeholder="Descreva sua motivação..."
              onChange={e => onChange(item.id, { motivo: e.target.value })}/>
          </label>
          <div className="opes-row">
            <label className="opes-field">
              <span>Data de Início</span>
              <input type="date" value={data.inicio || ""} onChange={e => onChange(item.id, { inicio: e.target.value })}/>
            </label>
            <label className="opes-field">
              <span>Data de Conclusão</span>
              <input type="date" value={data.fim || ""} onChange={e => onChange(item.id, { fim: e.target.value })}/>
            </label>
          </div>
          <label className="opes-field">
            <span>Informações adicionais</span>
            <textarea rows="3" value={data.obs || ""} placeholder="Adicione qualquer informação relevante sobre este objetivo..."
              onChange={e => onChange(item.id, { obs: e.target.value })}/>
          </label>
          {item.id === "outro" && (
            <label className="opes-field">
              <span>Qual objetivo?</span>
              <input type="text" value={data.titulo || ""} placeholder="Nomeie seu objetivo"
                onChange={e => onChange(item.id, { titulo: e.target.value })}/>
            </label>
          )}
          <div className="opes-confirm-row">
            <button className="btn-green opes-confirm" disabled={!data.motivo || !data.fim} onClick={() => onConfirm(item.id)}>
              {data.confirmado ? "Salvar alterações" : "✓ Confirmar cadastro do objetivo"}
            </button>
            {(!data.motivo || !data.fim) && <span className="opes-confirm-hint">Preencha o motivo e a data de conclusão para confirmar.</span>}
          </div>
        </div>
      )}
    </div>
  );
}

function ObjetivosPessoaisPage({ objetivosPessoais, onUpdate, objetivos, onAsset, onEditAsset, onDeleteAsset, familia, onEditFamilia }) {
  const dados = objetivosPessoais || {};
  const metas = objetivos || [];
  const totalAlvo = metas.reduce((s, o) => s + Number(o.alvo || 0), 0);
  const totalAcum = metas.reduce((s, o) => s + Number(o.acumulado || 0), 0);
  const [open, setOpen] = useStateOp(null);
  const [flash, setFlash] = useStateOp(null);
  const selecionados = OBJ_PESSOAIS_CATALOGO.filter(i => dados[i.id] && dados[i.id].selecionado);
  const completos = selecionados.filter(i => {
    const d = dados[i.id];
    return d.motivo && d.inicio && d.fim;
  });

  function toggleSelect(id) {
    const cur = dados[id] || {};
    const next = { ...dados, [id]: { ...cur, selecionado: !cur.selecionado } };
    onUpdate(next);
    setOpen(!cur.selecionado ? id : null);
  }
  function change(id, patch) {
    onUpdate({ ...dados, [id]: { ...(dados[id] || {}), ...patch } });
  }
  function confirmar(id) {
    onUpdate({ ...dados, [id]: { ...(dados[id] || {}), selecionado: true, confirmado: true } });
    setOpen(null);
    setFlash(id);
    setTimeout(() => setFlash(null), 2200);
  }

  return (
    <div className="page" data-screen-label="Objetivos Pessoais">
      <div className="page-head">
        <div>
          <h2>🎯 Objetivos</h2>
          <span className="page-hint">Comece pela estrutura familiar, escolha seus objetivos pessoais e acompanhe as metas financeiras ligadas a eles.</span>
        </div>
        <button className="btn-green" onClick={() => onAsset && onAsset("objetivo")}>+ Nova Meta Financeira</button>
      </div>

      <div className="div-summary">
        <div className="ds-card"><div className="ds-label">Objetivos escolhidos</div><strong className="ds-big">{selecionados.length}</strong></div>
        <div className="ds-card"><div className="ds-label">Soma dos alvos</div><Amount value={totalAlvo}/></div>
        <div className="ds-card"><div className="ds-label">Já acumulado</div><Amount value={totalAcum}/></div>
        <div className="ds-stats">
          <div className="ds-stat"><span>Detalhados</span><strong>{completos.length}/{selecionados.length}</strong></div>
          <div className="ds-stat"><span>Metas financeiras</span><strong>{metas.length}</strong></div>
          <div className="ds-stat"><span>Falta acumular</span><strong>{window.fmtCompact(Math.max(0, totalAlvo - totalAcum))}</strong></div>
        </div>
      </div>

      <div className="opes-sec-title">1 · Estrutura familiar</div>
      <FamiliaCard familia={familia} onEdit={onEditFamilia}/>

      <div className="opes-sec-title">2 · Quais são seus objetivos?</div>
      <div className="opes-grid">
        {OBJ_PESSOAIS_CATALOGO.map(item => (
          <ObjPessoalCard
            key={item.id}
            item={item}
            data={dados[item.id] || {}}
            open={open === item.id}
            onToggleSelect={toggleSelect}
            onToggleOpen={(id) => setOpen(o => (o === id ? null : id))}
            onChange={change}
            onConfirm={confirmar}
          />
        ))}
      </div>

      <div className="opes-sec-title">3 · Metas financeiras {flash && <em className="opes-flash-msg">objetivo cadastrado aqui ↓</em>}</div>
      <div className="obj-grid">
        {metas.map(o => {
          const pct = o.alvo > 0 ? Math.min(o.acumulado / o.alvo, 1) : 0;
          const done = pct >= 1;
          const meses = o.prazo ? Math.max(0, Math.round((new Date(o.prazo) - new Date()) / (30.44 * 864e5))) : null;
          const aporteNec = meses > 0 ? Math.max(0, (o.alvo - o.acumulado) / meses) : null;
          return (
            <div className={`card obj-card ${done ? "done" : ""} ${flash && o.origem === flash ? "flash" : ""}`} key={o.id}>
              <div className="obj-head">
                <span className="obj-icon">{o.icone || "🎯"}</span>
                <div className="row-actions">
                  <button onClick={() => onEditAsset && onEditAsset({ ...o, __kind: "objetivo" })} title="Editar">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4v16h16v-7"></path><path d="M18 2l4 4-10 10H8v-4z"></path></svg>
                  </button>
                  <button onClick={() => onDeleteAsset && onDeleteAsset("__objetivos", o.id)} title="Excluir">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"></path></svg>
                  </button>
                </div>
              </div>
              <h3>{o.nome}</h3>
              {o.origem && <div className="obj-origem">🧭 vindo dos objetivos pessoais</div>}
              <div className="obj-nums">
                <strong>{window.fmtBRLString(o.acumulado)}</strong>
                <span>de {window.fmtBRLString(o.alvo)}</span>
              </div>
              {Number(o.alvo) > 0
                ? <div className="obj-bar"><div style={{ width: pct * 100 + "%" }}></div></div>
                : <button className="obj-definir" onClick={() => onEditAsset && onEditAsset({ ...o, __kind: "objetivo" })}>Definir valor e prazo →</button>}
              <div className="obj-foot">
                {Number(o.alvo) > 0 && <span>{Math.round(pct * 100)}%</span>}
                {o.prazo && <span>até {o.prazo.split("-").reverse().join("/")}</span>}
                {Number(o.alvo) > 0 && aporteNec != null && !done && <span className="obj-aporte">≈ {window.fmtCompact(aporteNec)}/mês</span>}
                {done && <span className="obj-done">✅ concluído</span>}
              </div>
            </div>
          );
        })}
        {metas.length === 0 && <div className="card empty-card">Nenhuma meta financeira. Adicione a primeira!</div>}
      </div>

      {selecionados.length > 0 && (
        <div className="card opes-resumo">
          <h3>Resumo dos objetivos escolhidos</h3>
          <div className="opes-resumo-list">
            {selecionados.map(i => {
              const d = dados[i.id] || {};
              const titulo = i.id === "outro" && d.titulo ? d.titulo : i.nome;
              return (
                <div className="opes-resumo-item" key={i.id}>
                  <span className="opes-resumo-icon">{i.icone}</span>
                  <div>
                    <strong>{titulo}</strong>
                    <div className="opes-resumo-meta">
                      {d.inicio ? fmtDataOp(d.inicio) : "sem início"} → {d.fim ? fmtDataOp(d.fim) : "sem prazo"}
                    </div>
                    {d.motivo && <div className="opes-resumo-motivo">{d.motivo}</div>}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ObjetivosPessoaisPage, OBJ_PESSOAIS_CATALOGO });