/* ===========================================================
   Forja 3D — Dívidas & Configurações
   =========================================================== */
const DEBT_KINDS = [
  { value: 'impressora', label: 'Impressora' },
  { value: 'insumo', label: 'Insumos' },
  { value: 'equipamento', label: 'Equipamento' },
  { value: 'outro', label: 'Outro' },
];

function DebtForm({ initial, onSave, onClose }) {
  const [d, setD] = useState(initial || { name: '', total: '', paid: 0, kind: 'impressora', note: '' });
  const set = (k, v) => setD((p) => ({ ...p, [k]: v }));
  return (
    <>
      <Field label="Nome da dívida"><Text value={d.name} onChange={(v) => set('name', v)} placeholder="Ex: Impressora Ender 3 V3" /></Field>
      <div className="grid2">
        <Field label="Valor total"><Num value={d.total} onChange={(v) => set('total', v)} prefix="R$" /></Field>
        <Field label="Já pago"><Num value={d.paid} onChange={(v) => set('paid', v)} prefix="R$" /></Field>
      </div>
      <div className="grid2">
        <Field label="Tipo"><Select value={d.kind} onChange={(v) => set('kind', v)} options={DEBT_KINDS} /></Field>
        <Field label="Observação"><Text value={d.note} onChange={(v) => set('note', v)} placeholder="Ex: Parcelado 10x" /></Field>
      </div>
      <div className="modal-f" style={{ margin: '8px -22px -22px', borderTop: '1px solid var(--line)' }}>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button variant="primary" icon="check" onClick={() => { if (d.name && d.total) { onSave({ ...d, total: Number(d.total), paid: Number(d.paid) || 0 }); onClose(); } }}>Salvar</Button>
      </div>
    </>
  );
}

function PayForm({ debt, onClose }) {
  const rest = debt.total - debt.paid;
  const [amt, setAmt] = useState(rest);
  return (
    <>
      <p style={{ fontSize: 14, color: 'var(--muted)', marginBottom: 16 }}>Faltam <b style={{ color: 'var(--text)' }}>{fmt.brl(rest)}</b> em <b style={{ color: 'var(--text)' }}>{debt.name}</b>.</p>
      <Field label="Valor do pagamento"><Num value={amt} onChange={setAmt} prefix="R$" /></Field>
      <div style={{ display: 'flex', gap: 6, marginTop: -6 }}>
        {[rest / 2, rest].map((q, i) => <button key={i} className="btn btn-sm btn-ghost" onClick={() => setAmt(Math.round(q * 100) / 100)}>{i === 0 ? 'Metade' : 'Quitar tudo'} · {fmt.brl0(q)}</button>)}
      </div>
      <div className="modal-f" style={{ margin: '18px -22px -22px', borderTop: '1px solid var(--line)' }}>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button variant="primary" icon="pay" onClick={() => { store.payDebt(debt.id, Number(amt) || 0); onClose(); }}>Registrar pagamento</Button>
      </div>
    </>
  );
}

function Debts() {
  const s = useStore();
  const [modal, setModal] = useState(null);
  const [pay, setPay] = useState(null);
  const total = s.debts.reduce((a, d) => a + d.total, 0);
  const paid = s.debts.reduce((a, d) => a + d.paid, 0);
  const rest = total - paid;

  return (
    <div className="page">
      <PageHead title="Dívidas a Pagar" sub="Impressora, insumos e equipamentos — acompanhe quanto falta para quitar tudo."
        action={<Button variant="primary" icon="plus" onClick={() => setModal({ mode: 'add' })}>Nova dívida</Button>} />

      <div className="kpis" style={{ gridTemplateColumns: 'repeat(3,1fr)', marginBottom: 18 }}>
        <Kpi label="Dívida total" value={fmt.brl0(total)} />
        <Kpi label="Já pago" dot="g" value={fmt.brl0(paid)} sub={fmt.pct((paid / (total || 1)) * 100) + ' quitado'} />
        <Kpi label="Falta pagar" dot="b" value={fmt.brl0(rest)} />
      </div>

      {/* global progress */}
      <div className="panel panel-pad" style={{ marginBottom: 18 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <span className="panel-t" style={{ fontSize: 13 }}>Progresso geral</span>
          <span className="mono" style={{ fontWeight: 700, color: 'var(--orange)' }}>{fmt.pct((paid / (total || 1)) * 100)}</span>
        </div>
        <Bar value={paid} max={total} />
      </div>

      {s.debts.length === 0 ? <div className="panel"><Empty icon="debt" title="Sem dívidas cadastradas" action={<Button variant="primary" icon="plus" onClick={() => setModal({ mode: 'add' })}>Adicionar dívida</Button>}>Cadastre o que ainda falta pagar.</Empty></div> : (
        <div className="section-gap">
          {s.debts.map((d) => {
            const pct = (d.paid / d.total) * 100;
            const done = d.paid >= d.total;
            return (
              <div className="panel panel-pad" key={d.id}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 14 }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 9, flexWrap: 'wrap' }}>
                      <span style={{ fontWeight: 700, fontSize: 16 }}>{d.name}</span>
                      {done ? <Pill tone="g">Quitado</Pill> : <Pill tone="n">{DEBT_KINDS.find((k) => k.value === d.kind)?.label}</Pill>}
                    </div>
                    {d.note && <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 5 }}>{d.note}</div>}
                  </div>
                  <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
                    {!done && <Button size="sm" variant="primary" icon="pay" onClick={() => setPay(d)}>Pagar</Button>}
                    <IconBtn icon="edit" onClick={() => setModal({ mode: 'edit', data: d })} />
                    <IconBtn icon="trash" danger onClick={() => confirmDel(`Excluir "${d.name}"?`) && store.removeDebt(d.id)} />
                  </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                  <span className="mono" style={{ fontSize: 12.5, color: 'var(--muted)' }}>{fmt.brl(d.paid)} de {fmt.brl(d.total)}</span>
                  <span className="mono" style={{ fontSize: 13, fontWeight: 700, color: done ? 'var(--green)' : 'var(--orange)' }}>{done ? '100%' : 'faltam ' + fmt.brl(d.total - d.paid)}</span>
                </div>
                <Bar value={d.paid} max={d.total} />
              </div>
            );
          })}
        </div>
      )}

      <Modal open={!!modal} onClose={() => setModal(null)} title={modal?.mode === 'edit' ? 'Editar dívida' : 'Nova dívida'}>
        {modal && <DebtForm initial={modal.data} onSave={(d) => modal.mode === 'edit' ? store.updateDebt(modal.data.id, d) : store.addDebt(d)} onClose={() => setModal(null)} />}
      </Modal>
      <Modal open={!!pay} onClose={() => setPay(null)} title="Registrar pagamento">
        {pay && <PayForm debt={s.debts.find((x) => x.id === pay.id) || pay} onClose={() => setPay(null)} />}
      </Modal>
    </div>
  );
}
window.Debts = Debts;

/* ===========================================================
   Configurações / parâmetros
   =========================================================== */
function Config() {
  const s = useStore();
  const st = s.settings;
  const upd = (k, v) => store.updateSettings({ [k]: v });
  return (
    <div className="page">
      <PageHead title="Configurações" sub="Parâmetros da impressora e padrões usados na calculadora de preço." />

      <div className="grid-2c">
        <div className="panel">
          <div className="panel-h"><div className="panel-t"><span className="mark" />Impressora & custos fixos</div></div>
          <div className="panel-pad">
            <Field label="Nome da impressora"><Text value={st.printerName} onChange={(v) => upd('printerName', v)} /></Field>
            <div className="grid2">
              <Field label="Valor da impressora" hint="Usado na depreciação"><Num value={st.printerCost} onChange={(v) => upd('printerCost', v)} prefix="R$" /></Field>
              <Field label="Vida útil estimada" hint="Horas até trocar/repor"><Num value={st.printerLifeHours} onChange={(v) => upd('printerLifeHours', v)} suffix="h" /></Field>
            </div>
            <div className="grid2">
              <Field label="Potência média"><Num value={st.powerWatts} onChange={(v) => upd('powerWatts', v)} suffix="W" /></Field>
              <Field label="Custo da energia"><Num value={st.energyCostKwh} onChange={(v) => upd('energyCostKwh', v)} prefix="R$" suffix="/kWh" /></Field>
            </div>
            <Field label="Mão de obra por hora" hint="Seu tempo de operação/pós-processamento"><Num value={st.laborPerHour} onChange={(v) => upd('laborPerHour', v)} prefix="R$" suffix="/h" /></Field>
          </div>
        </div>

        <div className="section-gap">
          <div className="panel">
            <div className="panel-h"><div className="panel-t"><span className="mark" />Padrões da calculadora</div></div>
            <div className="panel-pad">
              <div className="grid2">
                <Field label="Margem de lucro"><Num value={st.defaultMargin} onChange={(v) => upd('defaultMargin', v)} suffix="%" /></Field>
                <Field label="Reserva p/ falhas"><Num value={st.failRate} onChange={(v) => upd('failRate', v)} suffix="%" /></Field>
              </div>
              <div className="grid2">
                <Field label="Embalagem padrão"><Num value={st.defaultPackaging} onChange={(v) => upd('defaultPackaging', v)} prefix="R$" /></Field>
                <Field label="Taxa marketplace"><Num value={st.marketplaceFee} onChange={(v) => upd('marketplaceFee', v)} suffix="%" /></Field>
              </div>
            </div>
          </div>

          <div className="panel">
            <div className="panel-h"><div className="panel-t"><span className="mark" />Meus dados</div></div>
            <div className="panel-pad">
              <p style={{ fontSize: 13.5, color: 'var(--muted)', marginBottom: 14 }}>Tudo fica salvo só no seu navegador. Você pode recarregar a página sem perder nada.</p>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <Button variant="ghost" icon="history" onClick={() => confirmDel('Recarregar os dados de exemplo? Isto substitui seus dados atuais.') && store.resetAll()}>Restaurar exemplo</Button>
                <Button variant="danger" icon="trash" onClick={() => confirmDel('Apagar TODOS os seus dados? Não dá pra desfazer.') && store.wipe()}>Limpar tudo</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Config = Config;