import React, { useEffect, useState } from 'react';
import { IonContent, IonHeader, IonPage, IonRow, IonCol, IonTitle, IonToolbar } from '@ionic/react';
import bg3 from '../../assets/bg3.png';
import namelogo from '../../assets/namelogo.png';
import back from '../../assets/back.png';
import dump from '../../assets/dump.png';
import add from '../../assets/add.png';
import { useHistory, useLocation } from 'react-router-dom';
import { useIonViewWillEnter } from "@ionic/react"
import  $  from 'jquery';
const Facturacion: React.FC = () => {

    const [lineas, setLineas] = useState<any>([]); 
    const [porPagar, setPorPagar] = useState("");
    const [total, setTotal] = useState("");
    const history = useHistory();
   

    const del = (key) => {
        
    }

    const gotohome = () => {
        history.push('/home');
    }

    useEffect(() => {
        //add
        const total = lineas.reduce((acc, curr) => acc + curr.monto, 0);
        setTotal(total);
    }, [lineas]);

    const getlineasFacturacion = () =>{
         $.getJSON(localStorage.apiurl,{
            op: "getLineas",
            email: localStorage.getItem('email')
        }).done(function(data) {
            console.log(data);
            console.log(data[0].data);
            if (data[0].status === "OK") {
                setLineas(data[0].data);
                
            }
        }); 
    }

    useIonViewWillEnter(() => {
       getlineasFacturacion();
    });

   
    return (
  <IonPage>
    <div className="v2_subpage_wrap">
      <div className="logincontainer">

        {/* HEADER */}
        <div className="v2_subpage_header v2_animate_in">
          <p className="v2_section_title">Transacciones</p>
          <div className="v2_back_btn" onClick={gotohome}>
            <img src={back} alt="back" />
          </div>
        </div>

        {/* SALDO PENDIENTE */}
        <div className="v2_total_pill v2_animate_in" style={{ animationDelay: '0.06s' }}>
          💰 Saldo pendiente a pago: L. {total}
        </div>

        {/* LISTA */}
        <div className="v2_addr_list">
          {lineas.length === 0 ? (
            <div className="v2_empty_state v2_animate_in">
              <span className="v2_empty_icon">🧾</span>
              <p className="v2_empty_text">No hay transacciones aún</p>
            </div>
          ) : (
            lineas.map((x, index) => {
              const esAbono = !x.desde_dir || x.desde_dir.trim() === "";
              const monto = Math.abs(x.monto);

              return (
                <div
                  key={index}
                  className="v2_tx_card"
                  style={{ animationDelay: `${0.08 + index * 0.04}s` }}
                >
                  <div className="v2_tx_left">

                    {/* Badge tipo */}
                    <div className={`v2_tx_badge ${esAbono ? 'abono' : 'carrera'}`}>
                      {esAbono ? '💵 Pago recibido' : '🚗 Carrera'}
                    </div>

                    <p className="v2_tx_nombre">{x.nombre}</p>

                    {esAbono ? null : (
                      <>
                        <p className="v2_tx_detail">📍 {x.desde_dir}</p>
                        <p className="v2_tx_detail">📍 {x.hasta_dir}</p>
                      </>
                    )}

                    <p className="v2_tx_time">— {x.time}</p>
                  </div>

                  <p className="v2_tx_amount">L. {monto}</p>
                </div>
              );
            })
          )}
        </div>

        <div className="v2_spacer_footer" />

      </div>
    </div>
  </IonPage>
);
};

export default Facturacion;