import React, { useState } from 'react';
import { IonPage, 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;
  es_favorito?: number;
  total_favs?: number;
};

const BuscarFavorito: React.FC = () => {
  const history = useHistory();
  const [busqueda, setBusqueda] = useState('');
  const [resultados, setResultados] = useState<DriverFav[]>([]);
  const [loading, setLoading] = useState(false);
  const [aviso, setAviso] = useState('');
  const [abierto, setAbierto] = useState<string | number | null>(null);

  const buscar = (q: string) => {
    const texto = q.trim();
    if (texto.length < 2) {
      setResultados([]);
      alert('Escribe al menos 2 letras del nombre o del teléfono');
      return;
    }
    $.getJSON(localStorage.apiurl, {
      op: 'buscar_drivers_fav',
      id_cliente: localStorage.id_cliente,
      q: texto,
    }, (data) => {
      setAbierto(null);
      setResultados(Array.isArray(data) ? data : []);
    });
  };

  const toggle = (driver: DriverFav, quitar: boolean) => {
    if (quitar && !confirm(`¿Quitar a ${driver.nombre} de tus favoritos?`)) return;
    setLoading(true);
    setAviso('');
    $.getJSON(localStorage.apiurl, {
      op: 'toggle_fav_driver',
      id_cliente: localStorage.id_cliente,
      id_driver: driver.id_driver,
    }, (data) => {
      setLoading(false);
      const ahoraFavorito = data && Number(data.favorito) === 1;
      const eraFavorito = Number(driver.es_favorito) === 1;
      const delta = ahoraFavorito && !eraFavorito ? 1 : !ahoraFavorito && eraFavorito ? -1 : 0;
      setAviso(ahoraFavorito ? 'Agregado a favoritos' : 'Quitado de favoritos');
      setResultados((prev) =>
        prev.map((d) =>
          String(d.id_driver) === String(driver.id_driver)
            ? { ...d, es_favorito: ahoraFavorito ? 1 : 0, total_favs: Math.max(0, Number(d.total_favs || 0) + delta) }
            : d
        )
      );
    }).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 }}>Buscar driver</p>
            <div className="v2_back_btn" onClick={() => history.push('/favoritos')}>
              <img src={back} alt="back" />
            </div>
          </div>

          <div className="v2_fav_buscar_bar">
            <input
              className="v2_modal_input"
              placeholder="Nombre o teléfono"
              value={busqueda}
              autoFocus
              onChange={(e) => {
                setBusqueda(e.target.value);
                setAviso('');
              }}
              onKeyDown={(e) => { if (e.key === 'Enter') buscar(busqueda); }}
            />
            <button className="v2_fav_lupa" type="button" aria-label="Buscar" onClick={() => buscar(busqueda)}>
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="currentColor" strokeWidth="2.2" />
                <path d="M15.2 15.2L20 20" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
              </svg>
            </button>
          </div>

          {resultados.map((d) => (
            <div key={d.id_driver} className="v2_fav_search_row">
              <button
                type="button"
                className="v2_fav_photo_btn"
                aria-label={`Ver ${d.nombre}`}
                onClick={() => setAbierto(d.id_driver)}
              >
                <img src={d.foto} alt="" />
              </button>
              <div style={{ minWidth: 0, flex: 1 }}>
                <p className="v2_addr_text" style={{ margin: 0 }}>{d.nombre}</p>
                <p style={{ margin: 0, fontSize: 12, color: 'var(--v2-muted)' }}>{d.tel}</p>
                <p style={{ margin: '2px 0 0', fontSize: 12, color: '#f5c542', fontWeight: 700 }}>
                  {Number(d.total_favs) === 1
                    ? '1 persona lo tiene de favorito'
                    : `${Number(d.total_favs) || 0} personas lo tienen de favorito`}
                </p>
              </div>
              {Number(d.es_favorito) === 1 ? (
                <button type="button" className="v2_fav_plus" aria-label="Quitar" onClick={() => toggle(d, true)}>✓</button>
              ) : (
                <button type="button" className="v2_fav_plus" aria-label="Agregar a favoritos" onClick={() => toggle(d, false)}>+</button>
              )}
            </div>
          ))}

          {aviso !== '' && <p className="v2_fav_added">{aviso}</p>}

          {abierto != null && (() => {
            const d = resultados.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} />
                  <p className="v2_modal_text" style={{ textAlign: 'center', marginTop: 10 }}>
                    {Number(d.total_favs) === 1
                      ? '1 persona lo tiene de favorito'
                      : `${Number(d.total_favs) || 0} personas lo tienen de favorito`}
                  </p>
                  {Number(d.es_favorito) === 1 ? (
                    <button type="button" className="v2_fav_quitar" style={{ width: '100%', marginTop: 8 }} onClick={() => toggle(d, true)}>Quitar</button>
                  ) : (
                    <button type="button" className="v2_fav_agregar" style={{ width: '100%', marginTop: 8 }} onClick={() => toggle(d, false)}>Agregar a favoritos</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 BuscarFavorito;