import React, { useState } from 'react';
import { IonPage, useIonViewWillEnter, IonLoading } from '@ionic/react';
import back from '../../assets/back.png';
import { useHistory } from 'react-router-dom';
import $ from 'jquery';

type DriverFav = {
  id_driver: string | number;
  nombre: string;
  tel: string;
  foto: string;
};

const Favoritos: React.FC = () => {
  const history = useHistory();
  const [favoritos, setFavoritos] = useState<DriverFav[]>([]);
  const [loading, setLoading] = useState(false);
  const [abierto, setAbierto] = useState<string | number | null>(null);

  const cargar = () => {
    $.getJSON(localStorage.apiurl, {
      op: 'list_fav_drivers',
      id_cliente: localStorage.id_cliente,
    }, (data) => {
      setFavoritos(Array.isArray(data) ? data : []);
    });
  };

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

  const quitar = (driver: DriverFav) => {
    if (!confirm(`¿Quitar a ${driver.nombre} de tus favoritos?`)) return;
    setLoading(true);
    $.getJSON(localStorage.apiurl, {
      op: 'toggle_fav_driver',
      id_cliente: localStorage.id_cliente,
      id_driver: driver.id_driver,
    }, () => {
      setLoading(false);
      setAbierto(null);
      cargar();
    }).fail(() => setLoading(false));
  };

  return (
    <IonPage>
      <div className="v2_subpage_wrap">
        <div className="logincontainer">
          <div className="v2_subpage_header v2_animate_in">
            <p className="v2_section_title" style={{ margin: 0 }}>Mis favoritos</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <button
                type="button"
                className="v2_fav_plus"
                aria-label="Buscar conductor"
                onClick={() => history.push('/buscar-favorito')}
              >
                +
              </button>
              <div className="v2_back_btn" onClick={() => history.push('/home')}>
                <img src={back} alt="back" />
              </div>
            </div>
          </div>

          {favoritos.length === 0 ? (
            <div className="v2_empty_state v2_animate_in">
              <span className="v2_empty_icon">★</span>
              <p className="v2_empty_text">Aún no tienes conductores favoritos</p>
            </div>
          ) : (
            <div className="v2_fav_list">
              {favoritos.map((d) => (
                <div key={d.id_driver} className="v2_fav_row">
                  <button
                    type="button"
                    className="v2_fav_photo_btn"
                    aria-label={`Ver ${d.nombre}`}
                    onClick={() => setAbierto(d.id_driver)}
                  >
                    <img className="v2_fav_avatar" src={d.foto} alt="" />
                  </button>
                  <p className="v2_fav_name">{d.nombre}</p>
                  <button type="button" className="v2_fav_quitar" onClick={() => quitar(d)}>
                    Eliminar
                  </button>
                </div>
              ))}
            </div>
          )}

          {abierto != null && (() => {
            const d = favoritos.find((x) => String(x.id_driver) === String(abierto));
            if (!d) return null;
            return (
              <div className="v2_modal_overlay" onClick={() => setAbierto(null)}>
                <div className="v2_modal_box v2_fav_photo_modal" onClick={(e) => e.stopPropagation()}>
                  <p className="v2_modal_title">{d.nombre}</p>
                  <img className="v2_fav_photo_lg" src={d.foto} alt={d.nombre} />
                  <button type="button" className="v2_fav_quitar" style={{ width: '100%', marginTop: 16 }} onClick={() => quitar(d)}>
                    Eliminar
                  </button>
                  <button type="button" className="v2_modal_btn_secondary" style={{ width: '100%', marginTop: 10 }} onClick={() => setAbierto(null)}>
                    Cerrar
                  </button>
                </div>
              </div>
            );
          })()}
        </div>
      </div>
      <IonLoading isOpen={loading} message="Espere..." />
    </IonPage>
  );
};

export default Favoritos;