/* sections2.jsx — secciones Fase 2: Correcciones, Aprobaciones, Resúmenes B2C */
const { useState, useEffect, useCallback } = React;

/* ============ CORRECCIONES FISCALES ============ */
const COD_MOD = {
  '1': 'Anulación', '2': 'Corrección de texto', '3': 'Corrección de montos',
  '4': 'Reemplazo', '5': 'Referencia de consumo',
}

function Correcciones() {
  const [filter, setFilter] = useState('todos')
  const [showCreate, setShowCreate] = useState(false)
  const { data, loading, reload } = useApi(function() { return API.corrections(filter !== 'todos' ? filter : undefined) }, [filter])
  const toast = useToast()

  var corrections = data && data.corrections ? data.corrections : []

  function approve(id) {
    API.approveCorrection(id).then(function() { toast({ title: 'Corrección aprobada' }); reload() })
      .catch(function(e) { toast({ title: 'Error', desc: e.message, tone: 'danger' }) })
  }
  function reject(id) {
    var reason = window.prompt('Motivo del rechazo:')
    if (!reason) return
    API.rejectCorrection(id, reason).then(function() { toast({ title: 'Corrección rechazada' }); reload() })
      .catch(function(e) { toast({ title: 'Error', desc: e.message, tone: 'danger' }) })
  }
  function emit(id) {
    if (!window.confirm('¿Emitir esta nota a DGII? Se firmará y enviará.')) return
    API.emitCorrection(id).then(function(d) { toast({ title: 'Nota emitida', desc: d.correction.emittedEncf }); reload() })
      .catch(function(e) { toast({ title: 'Error al emitir', desc: e.message, tone: 'danger' }) })
  }

  return (
    <div className="anim-in">
      <PageHeader title="Correcciones fiscales" desc="Notas de crédito y débito con flujo de aprobación">
        <Button icon="plus" onClick={function() { setShowCreate(true) }}>Nueva corrección</Button>
      </PageHeader>

      <div className="flex flex-wrap gap-2 mb-4">
        {[['todos','Todas'],['DRAFT','Borrador'],['APPROVED','Aprobadas'],['EMITTED','Emitidas'],['REJECTED','Rechazadas']].map(function(it) {
          return (
            <button key={it[0]} onClick={function() { setFilter(it[0]) }}
              className={cn('px-3.5 py-2 rounded-full text-[13px] font-semibold border transition-colors',
                filter === it[0] ? 'bg-primary text-primary-foreground border-primary' : 'bg-card border-border text-muted-foreground hover:bg-accent')}>
              {it[1]}
            </button>
          )
        })}
      </div>

      <Card className="overflow-hidden">
        {loading ? <div className="p-5 space-y-3">{[0,1,2].map(function(i){return <div key={i} className="h-12 bg-muted animate-pulse rounded" />})}</div>
        : corrections.length === 0 ? (
          <div className="py-14 text-center text-muted-foreground"><Icon name="fileCheck" size={28} className="mx-auto mb-3 opacity-30" /><div className="font-semibold">Sin correcciones</div></div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-[13px]">
              <thead><tr className="text-left text-[11px] uppercase tracking-wide text-muted-foreground border-b border-border">
                <th className="px-5 py-2.5 font-bold">Tipo / Modifica</th>
                <th className="px-3 py-2.5 font-bold">NCF afectado</th>
                <th className="px-3 py-2.5 font-bold text-right">Monto</th>
                <th className="px-3 py-2.5 font-bold">Estado</th>
                <th className="px-3 py-2.5 font-bold text-right">Acciones</th>
              </tr></thead>
              <tbody>
                {corrections.map(function(c) {
                  return (
                    <tr key={c.id} className="border-b border-border/60 last:border-0 hover:bg-muted/40 group">
                      <td className="px-5 py-3">
                        <div className="font-bold">{c.correctionType === '34' ? 'Nota de Crédito' : 'Nota de Débito'}</div>
                        <div className="text-[11px] text-muted-foreground">{COD_MOD[c.codigoModificacion]}{c.emittedEncf ? ' · ' + c.emittedEncf : ''}</div>
                      </td>
                      <td className="px-3 py-3 font-mono text-[12px]">{c.ncfModificado}</td>
                      <td className="px-3 py-3 text-right tabnum font-semibold">RD$ {rd(c.totalAmount)}</td>
                      <td className="px-3 py-3"><CorrectionBadge status={c.status} /></td>
                      <td className="px-3 py-3">
                        <div className="flex items-center justify-end gap-1.5">
                          {c.status === 'DRAFT' && <>
                            <Button size="sm" variant="soft" onClick={function(){approve(c.id)}}>Aprobar</Button>
                            <Button size="sm" variant="ghost" icon="x" onClick={function(){reject(c.id)}} />
                          </>}
                          {c.status === 'APPROVED' && <Button size="sm" icon="arrowRight" onClick={function(){emit(c.id)}}>Emitir</Button>}
                          {c.status === 'EMITTED' && <Badge tone="success" icon="check">Emitida</Badge>}
                          {c.status === 'REJECTED' && <span className="text-[12px] text-muted-foreground">{c.rejectionReason}</span>}
                        </div>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}
      </Card>

      {showCreate && <CreateCorrectionModal onClose={function(){setShowCreate(false)}} onCreated={reload} />}
    </div>
  )
}

function CorrectionBadge({ status }) {
  var map = { DRAFT: { t:'muted', l:'Borrador' }, APPROVED: { t:'primary', l:'Aprobada' }, EMITTED: { t:'success', l:'Emitida' }, REJECTED: { t:'danger', l:'Rechazada' }, ERROR: { t:'danger', l:'Error' } }
  var c = map[status] || map.DRAFT
  return <Badge tone={c.t}>{c.l}</Badge>
}

function CreateCorrectionModal({ onClose, onCreated }) {
  var [f, setF] = useState({ correctionType:'34', codigoModificacion:'3', ncfModificado:'', fechaNcfModificado:'', razon:'', customerRnc:'', customerName:'' })
  var [items, setItems] = useState([{ numeroLinea:1, indicadorBienServicio:'1', nombre:'', cantidad:1, precioUnitario:0, tasaITBIS:18 }])
  var [loading, setLoading] = useState(false)
  var toast = useToast()

  function upd(k) { return function(e){ var v=e.target.value; setF(function(p){var n=Object.assign({},p);n[k]=v;return n}) } }
  function updItem(i, k, v) { setItems(function(arr){ var n=arr.slice(); n[i]=Object.assign({},n[i]); n[i][k]= (k==='nombre'||k==='indicadorBienServicio')?v:parseFloat(v)||0; return n }) }

  function create() {
    if (!f.ncfModificado || !f.fechaNcfModificado) { toast({ title:'NCF y fecha del documento afectado son requeridos', tone:'warning' }); return }
    setLoading(true)
    API.createCorrection({
      correctionType: f.correctionType, codigoModificacion: f.codigoModificacion,
      ncfModificado: f.ncfModificado, fechaNcfModificado: f.fechaNcfModificado, razon: f.razon || undefined,
      customerRnc: f.customerRnc || undefined, customerName: f.customerName || undefined,
      items: items.map(function(it,idx){ return Object.assign({}, it, { numeroLinea: idx+1 }) }),
    }).then(function(){ toast({ title:'Corrección creada' }); onCreated(); onClose() })
      .catch(function(e){ toast({ title:'Error', desc:e.message, tone:'danger' }) })
      .finally(function(){ setLoading(false) })
  }

  return ReactDOM.createPortal(
    <div className="fixed inset-0 z-50 grid place-items-center bg-black/40 backdrop-blur-sm p-4" onClick={onClose}>
      <Card className="p-6 w-full max-w-2xl anim-in max-h-[90vh] overflow-y-auto" onClick={function(e){e.stopPropagation()}}>
        <h3 className="text-[18px] font-extrabold mb-4">Nueva corrección</h3>
        <div className="grid grid-cols-2 gap-4 mb-4">
          <Field label="Tipo de nota">
            <select value={f.correctionType} onChange={upd('correctionType')} className="w-full h-10 rounded-[var(--radius)] bg-card border border-input px-3 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-ring/50">
              <option value="34">Nota de Crédito (34)</option>
              <option value="33">Nota de Débito (33)</option>
            </select>
          </Field>
          <Field label="Código de modificación">
            <select value={f.codigoModificacion} onChange={upd('codigoModificacion')} className="w-full h-10 rounded-[var(--radius)] bg-card border border-input px-3 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-ring/50">
              {Object.entries(COD_MOD).map(function(e){return <option key={e[0]} value={e[0]}>{e[0]} · {e[1]}</option>})}
            </select>
          </Field>
          <Field label="NCF afectado"><Input placeholder="E310000000005" value={f.ncfModificado} onChange={upd('ncfModificado')} /></Field>
          <Field label="Fecha NCF afectado"><Input type="date" value={f.fechaNcfModificado} onChange={upd('fechaNcfModificado')} /></Field>
          <Field label="RNC cliente"><Input value={f.customerRnc} onChange={upd('customerRnc')} /></Field>
          <Field label="Nombre cliente"><Input value={f.customerName} onChange={upd('customerName')} /></Field>
        </div>
        <Field label="Razón de la modificación"><Input value={f.razon} onChange={upd('razon')} /></Field>

        <div className="mt-4 mb-2 text-[12px] font-bold uppercase tracking-wide text-muted-foreground">Items</div>
        {items.map(function(it, i) {
          return (
            <div key={i} className="grid grid-cols-12 gap-2 mb-2">
              <input className="col-span-5 h-9 rounded-md bg-card border border-input px-2 text-[13px]" placeholder="Descripción" value={it.nombre} onChange={function(e){updItem(i,'nombre',e.target.value)}} />
              <input className="col-span-2 h-9 rounded-md bg-card border border-input px-2 text-[13px] tabnum" type="number" placeholder="Cant" value={it.cantidad} onChange={function(e){updItem(i,'cantidad',e.target.value)}} />
              <input className="col-span-3 h-9 rounded-md bg-card border border-input px-2 text-[13px] tabnum" type="number" placeholder="Precio" value={it.precioUnitario} onChange={function(e){updItem(i,'precioUnitario',e.target.value)}} />
              <select className="col-span-2 h-9 rounded-md bg-card border border-input px-1 text-[12px]" value={it.tasaITBIS} onChange={function(e){updItem(i,'tasaITBIS',e.target.value)}}>
                <option value="18">18%</option><option value="16">16%</option><option value="0">0%</option>
              </select>
            </div>
          )
        })}
        <Button variant="ghost" size="sm" icon="plus" onClick={function(){setItems(function(a){return a.concat([{numeroLinea:a.length+1,indicadorBienServicio:'1',nombre:'',cantidad:1,precioUnitario:0,tasaITBIS:18}])})}}>Agregar item</Button>

        <div className="flex gap-3 mt-6">
          <Button variant="secondary" className="flex-1" onClick={onClose}>Cancelar</Button>
          <Button className="flex-1" loading={loading} onClick={create}>Crear corrección</Button>
        </div>
      </Card>
    </div>,
    document.body
  )
}

/* ============ APROBACIONES COMERCIALES ============ */
function Aprobaciones() {
  const [showCreate, setShowCreate] = useState(false)
  const { data, loading, reload } = useApi(function() { return API.approvals() }, [])
  var approvals = data && data.approvals ? data.approvals : []

  return (
    <div className="anim-in">
      <PageHeader title="Aprobaciones comerciales" desc="Acepta o rechaza comprobantes recibidos de tus proveedores">
        <Button icon="plus" onClick={function(){setShowCreate(true)}}>Aprobar / Rechazar e-CF</Button>
      </PageHeader>

      <Card className="overflow-hidden">
        {loading ? <div className="p-5 space-y-3">{[0,1,2].map(function(i){return <div key={i} className="h-12 bg-muted animate-pulse rounded" />})}</div>
        : approvals.length === 0 ? (
          <div className="py-14 text-center text-muted-foreground"><Icon name="check" size={28} className="mx-auto mb-3 opacity-30" /><div className="font-semibold">Sin aprobaciones registradas</div></div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-[13px]">
              <thead><tr className="text-left text-[11px] uppercase tracking-wide text-muted-foreground border-b border-border">
                <th className="px-5 py-2.5 font-bold">NCF</th>
                <th className="px-3 py-2.5 font-bold">Proveedor (RNC)</th>
                <th className="px-3 py-2.5 font-bold text-right">Monto</th>
                <th className="px-3 py-2.5 font-bold">Decisión</th>
                <th className="px-3 py-2.5 font-bold">Estado envío</th>
              </tr></thead>
              <tbody>
                {approvals.map(function(a) {
                  return (
                    <tr key={a.id} className="border-b border-border/60 last:border-0 hover:bg-muted/40">
                      <td className="px-5 py-3 font-mono text-[12px] font-bold">{a.encf}</td>
                      <td className="px-3 py-3 font-mono text-[12px]">{a.rnc_emisor}</td>
                      <td className="px-3 py-3 text-right tabnum font-semibold">RD$ {rd(a.monto_total||0)}</td>
                      <td className="px-3 py-3">{a.estado === 'ACCEPTED' ? <Badge tone="success" icon="check">Aceptado</Badge> : <Badge tone="danger" icon="x">Rechazado</Badge>}</td>
                      <td className="px-3 py-3">{a.status === 'SUBMITTED' ? <Badge tone="success">Enviado</Badge> : a.status === 'ERROR' ? <Badge tone="danger">Error</Badge> : <Badge tone="muted">Pendiente</Badge>}</td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}
      </Card>

      {showCreate && <CreateApprovalModal onClose={function(){setShowCreate(false)}} onCreated={reload} />}
    </div>
  )
}

function CreateApprovalModal({ onClose, onCreated }) {
  var [f, setF] = useState({ encf:'', rncEmisor:'', fechaEmision:'', montoTotal:'', estado:'ACCEPTED', motivo:'' })
  var [loading, setLoading] = useState(false)
  var toast = useToast()
  function upd(k){ return function(e){ var v=e.target.value; setF(function(p){var n=Object.assign({},p);n[k]=v;return n}) } }
  function submit() {
    if (!f.encf || !f.rncEmisor || !f.fechaEmision) { toast({title:'Completa NCF, RNC y fecha', tone:'warning'}); return }
    if (f.estado === 'REJECTED' && !f.motivo) { toast({title:'El rechazo requiere motivo', tone:'warning'}); return }
    setLoading(true)
    API.createApproval({ encf:f.encf, rncEmisor:f.rncEmisor, fechaEmision:f.fechaEmision, montoTotal:parseFloat(f.montoTotal)||0, estado:f.estado, motivo:f.motivo||undefined })
      .then(function(){ toast({title:'Aprobación enviada a DGII'}); onCreated(); onClose() })
      .catch(function(e){ toast({title:'Error', desc:e.message, tone:'danger'}) })
      .finally(function(){ setLoading(false) })
  }
  return ReactDOM.createPortal(
    <div className="fixed inset-0 z-50 grid place-items-center bg-black/40 backdrop-blur-sm p-4" onClick={onClose}>
      <Card className="p-6 w-full max-w-lg anim-in" onClick={function(e){e.stopPropagation()}}>
        <h3 className="text-[18px] font-extrabold mb-4">Aprobar / Rechazar comprobante</h3>
        <div className="space-y-4">
          <Field label="NCF del comprobante recibido"><Input placeholder="E310000000123" value={f.encf} onChange={upd('encf')} /></Field>
          <div className="grid grid-cols-2 gap-4">
            <Field label="RNC del proveedor"><Input value={f.rncEmisor} onChange={upd('rncEmisor')} /></Field>
            <Field label="Fecha emisión"><Input type="date" value={f.fechaEmision} onChange={upd('fechaEmision')} /></Field>
          </div>
          <Field label="Monto total"><Input type="number" value={f.montoTotal} onChange={upd('montoTotal')} /></Field>
          <Field label="Decisión">
            <select value={f.estado} onChange={upd('estado')} className="w-full h-10 rounded-[var(--radius)] bg-card border border-input px-3 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-ring/50">
              <option value="ACCEPTED">Aceptar</option>
              <option value="REJECTED">Rechazar</option>
            </select>
          </Field>
          {f.estado === 'REJECTED' && <Field label="Motivo del rechazo"><Input value={f.motivo} onChange={upd('motivo')} /></Field>}
        </div>
        <div className="flex gap-3 mt-6">
          <Button variant="secondary" className="flex-1" onClick={onClose}>Cancelar</Button>
          <Button className="flex-1" loading={loading} onClick={submit}>Enviar a DGII</Button>
        </div>
      </Card>
    </div>,
    document.body
  )
}

/* ============ RESÚMENES B2C ============ */
function ResumenesB2C() {
  const [date, setDate] = useState(new Date().toISOString().slice(0,10))
  const { data, loading, reload } = useApi(function() { return API.b2cSummaries() }, [])
  const toast = useToast()
  var summaries = data && data.summaries ? data.summaries : []

  function generate() {
    API.b2cGenerate(date).then(function(){ toast({title:'Resumen recalculado'}); reload() })
      .catch(function(e){ toast({title:'Error', desc:e.message, tone:'danger'}) })
  }
  function submit(d) {
    if (!window.confirm('¿Enviar el resumen del ' + d + ' a DGII?')) return
    API.b2cSubmit(d).then(function(){ toast({title:'Resumen enviado a DGII'}); reload() })
      .catch(function(e){ toast({title:'Error al enviar', desc:e.message, tone:'danger'}) })
  }

  return (
    <div className="anim-in">
      <PageHeader title="Resúmenes B2C" desc="Resumen diario de facturas de consumo (RFCE) que se envía a la DGII" />
      <Card className="p-5 mb-5">
        <div className="flex flex-wrap items-end gap-3">
          <Field label="Fecha del resumen"><Input type="date" value={date} onChange={function(e){setDate(e.target.value)}} className="w-48" /></Field>
          <Button variant="secondary" icon="refresh" onClick={generate}>Recalcular</Button>
          <Button icon="arrowRight" onClick={function(){submit(date)}}>Generar y enviar</Button>
        </div>
        <p className="text-[12px] text-muted-foreground mt-3 flex items-center gap-1.5"><Icon name="zap" size={13} />El envío automático corre todos los días después de las 23:00.</p>
      </Card>

      <Card className="overflow-hidden">
        <div className="px-5 py-3 border-b border-border text-[13px] font-bold">Historial de resúmenes</div>
        {loading ? <div className="p-5 space-y-3">{[0,1,2].map(function(i){return <div key={i} className="h-10 bg-muted animate-pulse rounded" />})}</div>
        : summaries.length === 0 ? (
          <div className="py-12 text-center text-muted-foreground"><Icon name="calendar" size={26} className="mx-auto mb-3 opacity-30" /><div className="font-semibold">Sin resúmenes</div></div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-[13px]">
              <thead><tr className="text-left text-[11px] uppercase tracking-wide text-muted-foreground border-b border-border">
                <th className="px-5 py-2.5 font-bold">Fecha</th>
                <th className="px-3 py-2.5 font-bold text-right">Facturas</th>
                <th className="px-3 py-2.5 font-bold text-right">Monto</th>
                <th className="px-3 py-2.5 font-bold text-right">ITBIS</th>
                <th className="px-3 py-2.5 font-bold">Estado</th>
                <th className="px-3 py-2.5 font-bold text-right">Acción</th>
              </tr></thead>
              <tbody>
                {summaries.map(function(s) {
                  return (
                    <tr key={s.id} className="border-b border-border/60 last:border-0 hover:bg-muted/40">
                      <td className="px-5 py-3 font-semibold">{s.summaryDate}</td>
                      <td className="px-3 py-3 text-right tabnum">{s.totalInvoices}</td>
                      <td className="px-3 py-3 text-right tabnum font-semibold">RD$ {rd(s.totalAmount)}</td>
                      <td className="px-3 py-3 text-right tabnum text-muted-foreground">RD$ {rd(s.totalItbis)}</td>
                      <td className="px-3 py-3">{s.status === 'ACCEPTED' || s.status === 'SUBMITTED' ? <Badge tone="success">{s.status === 'ACCEPTED' ? 'Aceptado' : 'Enviado'}</Badge> : s.status === 'ERROR' ? <Badge tone="danger">Error</Badge> : <Badge tone="muted">Pendiente</Badge>}</td>
                      <td className="px-3 py-3 text-right">{(s.status === 'PENDING' || s.status === 'ERROR') && s.totalInvoices > 0 && <Button size="sm" variant="soft" onClick={function(){submit(s.summaryDate)}}>Enviar</Button>}</td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}
      </Card>
    </div>
  )
}

Object.assign(window, { Correcciones, Aprobaciones, ResumenesB2C })