/* global React, Card, Badge, Button, Avatar, Icon, ICONS, Field */
const { useState: useStateFM } = React;

function FinanceModal({ kind, onClose, onSave }) {
  const isReceivable = kind === 'receivable';
  const [desc, setDesc] = useStateFM('');
  const [value, setValue] = useStateFM('');
  const [date, setDate] = useStateFM('');
  const [category, setCategory] = useStateFM(isReceivable ? 'Entrega' : 'Recursos');
  const [emitNF, setEmitNF] = useStateFM(true);
  const [paid, setPaid] = useStateFM(false);
  const [installments, setInstallments] = useStateFM(1);

  const cats = isReceivable
    ? ['Sinal','Briefing','Entrega','Final','Bônus']
    : ['Recursos','Subcontrato','Software','Produção','Viagem','Outros'];

  const title = isReceivable ? 'Nova parcela / recebível' : 'Lançar despesa';
  const subtitle = isReceivable
    ? 'Adicione uma cobrança ao projeto. Pode emitir NF automaticamente.'
    : 'Registre um custo associado ao projeto para calcular margem.';

  const canSave = desc.trim().length > 1 && value.trim().length > 0 && date.trim().length > 0;

  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(7,11,28,0.72)', backdropFilter:'blur(6px)',
      display:'grid', placeItems:'center', zIndex:9999, padding:24,
    }}>
      <div onClick={(e)=>e.stopPropagation()} style={{
        width:'min(620px, 100%)', maxHeight:'90vh', display:'flex', flexDirection:'column',
        background:'var(--bg-surface)', border:'1px solid var(--border-strong)',
        borderRadius:18, boxShadow:'0 30px 80px rgba(0,0,0,0.55)', overflow:'hidden',
      }}>
        <div style={{ padding:'20px 24px', borderBottom:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', gap:14 }}>
          <div style={{ width:38, height:38, borderRadius:10, background: isReceivable ? 'rgba(34,197,94,0.14)' : 'rgba(250,84,28,0.14)', color: isReceivable ? '#22C55E' : '#FA541C', display:'grid', placeItems:'center' }}>
            <Icon d={ICONS.dollar} size={18}/>
          </div>
          <div style={{ flex:1 }}>
            <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--geek-blue-300)' }}>{isReceivable ? 'Recebível' : 'Despesa'}</div>
            <h2 style={{ margin:'2px 0 0', fontSize:18, fontWeight:700 }}>{title}</h2>
            <div style={{ fontSize:12, color:'var(--fg-muted)', marginTop:2 }}>{subtitle}</div>
          </div>
          <button onClick={onClose} style={{ background:'transparent', border:'1px solid var(--border-subtle)', color:'var(--fg-secondary)', width:34, height:34, borderRadius:8, cursor:'pointer', fontSize:18 }}>×</button>
        </div>

        <div style={{ padding:'22px 24px', overflow:'auto', flex:1, display:'flex', flexDirection:'column', gap:14 }}>
          <Field label={isReceivable ? 'Descrição da parcela' : 'Descrição da despesa'} placeholder={isReceivable ? 'Ex.: Entrega final do manual' : 'Ex.: Banco de imagens · Adobe Stock'} value={desc} onChange={(e)=>setDesc(e.target.value)}/>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
            <Field icon="dollar" label="Valor" placeholder="R$ 0,00" value={value} onChange={(e)=>setValue(e.target.value)}/>
            <Field icon="cal" label={isReceivable ? 'Vencimento' : 'Data'} placeholder="dd/mm/aaaa" value={date} onChange={(e)=>setDate(e.target.value)}/>
          </div>

          <div>
            <span style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--fg-muted)', display:'block', marginBottom:8 }}>Categoria</span>
            <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
              {cats.map(c => (
                <button key={c} onClick={()=>setCategory(c)} style={{
                  padding:'7px 12px', borderRadius:999, fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
                  background: category===c ? 'var(--primary-soft)' : 'var(--bg-elevated)',
                  color: category===c ? 'var(--geek-blue-200)' : 'var(--fg-secondary)',
                  border:'1px solid', borderColor: category===c ? 'var(--geek-blue-a40)' : 'var(--border-subtle)',
                }}>{c}</button>
              ))}
            </div>
          </div>

          {isReceivable && (
            <div>
              <span style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--fg-muted)', display:'block', marginBottom:8 }}>Parcelar</span>
              <div style={{ display:'flex', gap:6 }}>
                {[1,2,3,4,6,12].map(n => (
                  <button key={n} onClick={()=>setInstallments(n)} style={{
                    padding:'7px 14px', borderRadius:8, fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:'var(--font-mono)',
                    background: installments===n ? 'var(--primary-soft)' : 'var(--bg-elevated)',
                    color: installments===n ? 'var(--geek-blue-200)' : 'var(--fg-secondary)',
                    border:'1px solid', borderColor: installments===n ? 'var(--geek-blue-a40)' : 'var(--border-subtle)',
                  }}>{n}x</button>
                ))}
              </div>
            </div>
          )}

          <Card padding={14} style={{ background:'var(--bg-elevated)' }}>
            {isReceivable ? (
              <label style={{ display:'flex', alignItems:'center', gap:10, cursor:'pointer' }}>
                <button onClick={()=>setEmitNF(!emitNF)} style={{
                  width:36, height:20, borderRadius:999,
                  background: emitNF ? 'var(--primary)' : 'var(--bg-surface)',
                  border:'1px solid', borderColor: emitNF ? 'var(--primary)' : 'var(--border-strong)',
                  position:'relative', cursor:'pointer', padding:0, flexShrink:0,
                }}>
                  <span style={{ position:'absolute', top:1, left: emitNF ? 17 : 1, width:16, height:16, borderRadius:'50%', background:'#fff', transition:'left 160ms' }}/>
                </button>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:13, fontWeight:600 }}>Emitir NFS-e ao receber</div>
                  <div style={{ fontSize:11, color:'var(--fg-muted)' }}>A nota é gerada automaticamente quando o pagamento for confirmado.</div>
                </div>
              </label>
            ) : (
              <label style={{ display:'flex', alignItems:'center', gap:10, cursor:'pointer' }}>
                <button onClick={()=>setPaid(!paid)} style={{
                  width:36, height:20, borderRadius:999,
                  background: paid ? '#22C55E' : 'var(--bg-surface)',
                  border:'1px solid', borderColor: paid ? '#22C55E' : 'var(--border-strong)',
                  position:'relative', cursor:'pointer', padding:0, flexShrink:0,
                }}>
                  <span style={{ position:'absolute', top:1, left: paid ? 17 : 1, width:16, height:16, borderRadius:'50%', background:'#fff', transition:'left 160ms' }}/>
                </button>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:13, fontWeight:600 }}>Já foi pago</div>
                  <div style={{ fontSize:11, color:'var(--fg-muted)' }}>Marque como pago se a despesa já saiu da conta.</div>
                </div>
              </label>
            )}
          </Card>

          <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
            <Badge tone="brand" dot={false}>Vinculado a este projeto</Badge>
            {isReceivable && installments > 1 && <Badge tone="cyan" dot={false}>{installments} parcelas geradas</Badge>}
            {isReceivable && emitNF && <Badge tone="success" dot={false}>NF automática</Badge>}
            {!isReceivable && paid && <Badge tone="success" dot={false}>Pago</Badge>}
          </div>
        </div>

        <div style={{ padding:'14px 24px', borderTop:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', gap:10, background:'var(--bg-elevated)' }}>
          <span style={{ fontSize:11, color:'var(--fg-muted)' }}>Será lançado em <strong style={{ color:'var(--fg-secondary)' }}>{isReceivable ? 'Recebíveis' : 'Despesas'}</strong> do projeto</span>
          <div style={{ flex:1 }}/>
          <Button variant="ghost" onClick={onClose}>Cancelar</Button>
          <Button icon="check" onClick={()=>canSave && (onSave?.({desc, value, date, category, emitNF, paid, installments}), onClose())} style={{ opacity:canSave?1:0.5, pointerEvents:canSave?'auto':'none' }}>
            {isReceivable ? 'Criar parcela' : 'Lançar despesa'}
          </Button>
        </div>
      </div>
    </div>
  );
}
window.FinanceModal = FinanceModal;