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

type PremioClienteRow = {
  id: number;
  id_cliente: number;
  created_at: string;
  redimido: number;
};

const meses = [
  'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
  'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
];

const now = new Date();
const currentMonth = now.getMonth() + 1;
const currentYear = now.getFullYear();

function nivelClientePorVecesMetaMes(veces: number): {
  key: 'ninguno' | 'oro' | 'diamante' | 'platino';
  label: string;
  emoji: string;
} {
  if (veces <= 0) {
    return { key: 'ninguno', label: 'Sin nivel', emoji: '—' };
  }
  if (veces === 1) {
    return { key: 'oro', label: 'Oro', emoji: '🥇' };
  }
  if (veces === 2) {
    return { key: 'diamante', label: 'Diamante', emoji: '💎' };
  }
  return { key: 'platino', label: 'Mes Platino', emoji: '✨' };
}

const PremiosClientes: React.FC = () => {
  const history = useHistory();
  const [loading, setLoading] = React.useState(true);
  const [premios, setPremios] = React.useState<PremioClienteRow[]>([]);
  const [badgeNoRedimidos, setBadgeNoRedimidos] = React.useState(0);
  const [mes, setMes] = React.useState(currentMonth);
  const [anio, setAnio] = React.useState(currentYear);

  const [showDriverOptions, setShowDriverOptions] = useState(false);
  const [addresses, setAddresses] = useState<any[]>([]);
  const [showModal, setShowModal] = useState(false);
  const [showtelprompt, setShowtelprompt] = useState(false);
  const [telNum, setTelNum] = useState('');

  const cargarConteoNoRedimidos = () => {
    const idCliente = localStorage.getItem('id_cliente');
    if (!idCliente) {
      setBadgeNoRedimidos(0);
      return;
    }
    $.getJSON(localStorage.apiurl, {
      op: 'premios_cliente_no_redimidos',
      id_cliente: idCliente
    }, (data: unknown[]) => {
      setBadgeNoRedimidos(Array.isArray(data) ? data.length : 0);
    }).fail(() => setBadgeNoRedimidos(0));
  };

  const isuseradriver = () => {
    if (localStorage.isadriver == null) {
      $.getJSON(localStorage.apiurl, {
        op: 'isuseradriver',
        email: localStorage.email
      }, (data: { status?: string; drivers?: { id_driver: number }[] }[]) => {
        if (data[0]?.status === 'yes' && data[0].drivers?.[0]) {
          setShowDriverOptions(true);
          localStorage.setItem('isadriver', 'yes');
          localStorage.setItem('driver_id', String(data[0].drivers[0].id_driver));
        } else {
          setShowDriverOptions(false);
        }
      });
    } else if (localStorage.isadriver === 'yes') {
      setShowDriverOptions(true);
    } else {
      setShowDriverOptions(false);
    }
  };

  /** Como gotocarrera en Home, sin cuentas master: solo valida carrera activa y avanza a /carrera. */
  const gotocarreraPremio = () => {
    if (localStorage.carreraencurso) {
      $.getJSON(localStorage.apiurl, {
        op: 'checkorderstatus',
        id_carrera: localStorage.carreraencurso
      }, (data: { status?: string; resumen?: string }[]) => {
        if (data[0]?.status === 'OK') {
          if (data[0]?.resumen === 'activo') {
            window.alert('Tienes una carrera activa, utiliza el botón verde de carrera activa');
          } else {
            history.push('/carrera');
          }
        }
      });
    } else {
      history.push('/carrera');
    }
  };

  const preCarrera = () => {
    if (showDriverOptions && localStorage.yxchack == 0) {
      window.alert(
        'Duper Drivers no pueden solicitar carreras, crea una nueva cuenta como cliente para realizar una carrera'
      );
    } else if (addresses.length === 0) {
      localStorage.setItem('prelat', '0');
      localStorage.setItem('prelon', '0');
      gotocarreraPremio();
    } else {
      setShowModal(true);
    }
  };

  const checkifuserhastel = () => {
    $.getJSON(localStorage.apiurl, {
      id_cliente: localStorage.id_cliente,
      op: 'check_if_user_has_tel'
    }, (data: { status?: string; tel?: string | null }[]) => {
      if (data[0]?.status === 'OK') {
        const t = data[0].tel;
        if (t === '' || t == null || t === '0') {
          setShowtelprompt(true);
        } else {
          preCarrera();
        }
      }
    });
  };

  const saveTel = () => {
    if (telNum.length < 8) {
      window.alert('Por favor ingrese un numero de celular valido');
      return;
    }
    $.getJSON(localStorage.apiurl, {
      op: 'update_tel',
      id_cliente: localStorage.id_cliente,
      tel: telNum
    }, (data: { status?: string }[]) => {
      if (data[0]?.status === 'OK') {
        setShowtelprompt(false);
        preCarrera();
      }
    });
  };

  const closeShoModal = () => {
    setShowModal(false);
  };

  const exitshowtelprompt = () => {
    setShowtelprompt(false);
  };

  /**
   * Igual que nuevaCarreraCliente + flujo Home, pero forcefree = 1 (carrera gratis con bono).
   * Sin pendingNuevaCarrera ni navegación a Home.
   */
  const nuevaCarreraPremio = () => {
    window.alert(
      'El bono aplica solo si la tarifa de la carrera es igual o menor a L.150. ' +
        'Es una carrera normal: no cambia de estado ni se envía a otro flujo distinto.'
    );
    sessionStorage.setItem('forcefree', '1');
    checkifuserhastel();
  };

  const cargarPremios = (targetMes: number, targetAnio: number) => {
    setLoading(true);
    const idCliente = localStorage.getItem('id_cliente');
    if (!idCliente) {
      setPremios([]);
      setLoading(false);
      return;
    }
    $.getJSON(localStorage.apiurl, {
      op: 'listar_premios_cliente',
      id_cliente: idCliente,
      mes: targetMes,
      anio: targetAnio
    }, (resp: PremioClienteRow[]) => {
      setPremios(Array.isArray(resp) ? resp : []);
      setLoading(false);
    }).fail(() => {
      setPremios([]);
      setLoading(false);
    });
  };

  useIonViewDidEnter(() => {
    isuseradriver();
    if (localStorage.savedAddress) {
      try {
        setAddresses(JSON.parse(localStorage.savedAddress));
      } catch {
        setAddresses([]);
      }
    } else {
      setAddresses([]);
    }
    cargarConteoNoRedimidos();
    cargarPremios(mes, anio);
  });

  const goPrevMonth = () => {
    let nextMes = mes - 1;
    let nextAnio = anio;
    if (nextMes < 1) {
      nextMes = 12;
      nextAnio -= 1;
    }
    setMes(nextMes);
    setAnio(nextAnio);
    cargarPremios(nextMes, nextAnio);
  };

  const canGoNext = anio < currentYear || (anio === currentYear && mes < currentMonth);

  const goNextMonth = () => {
    if (!canGoNext) return;
    let nextMes = mes + 1;
    let nextAnio = anio;
    if (nextMes > 12) {
      nextMes = 1;
      nextAnio += 1;
    }
    setMes(nextMes);
    setAnio(nextAnio);
    cargarPremios(nextMes, nextAnio);
  };

  const vecesMetaMes = premios.length;
  const nivel = nivelClientePorVecesMetaMes(vecesMetaMes);

  return (
    <IonPage>
      <div className="v2_pagewrap">
        <div className="logincontainer">
          <div className="v2_subpage_header v2_animate_in">
            <img className="v2_logo_name" src={namelogo} alt="logo" />
            <div className="v2_back_btn" onClick={() => history.push('/home')}>
              <span style={{ fontSize: '22px', lineHeight: 1 }}>&lt;</span>
            </div>
          </div>

          <div className="v2_month_nav v2_animate_in" style={{ animationDelay: '0.03s' }}>
            <button type="button" className="v2_month_btn" onClick={goPrevMonth}>&lt;</button>
            <p>{meses[mes - 1]} {anio}</p>
            <button type="button" className="v2_month_btn" onClick={goNextMonth} disabled={!canGoNext}>&gt;</button>
          </div>

          {!loading && (
            <div
              className={`v2_premio_card v2_animate_in v2_tier_card v2_tier_${nivel.key}`}
              style={{ animationDelay: '0.04s', margin: '0 20px 12px' }}
            >
              <p className="v2_premio_title" style={{ marginBottom: 6 }}>
                Tu nivel este mes
              </p>
              <div className="v2_pills_row" style={{ alignItems: 'center' }}>
                <span className="v2_tier_badge">
                  <span className="v2_tier_emoji">{nivel.emoji}</span>
                  <span>{nivel.label}</span>
                </span>
                <span className="v2_pill v2_pill_meta">
                  {vecesMetaMes} {vecesMetaMes === 1 ? 'bono' : 'bonos'}
                </span>
              </div>
              <p style={{ margin: '10px 0 0', fontSize: 11, opacity: 0.75, lineHeight: 1.4 }}>
                Oro: 1 meta · Diamante: 2 metas · Mes Platino: 3 o más. Cada mes nuevo comienza de cero.
              </p>
              {badgeNoRedimidos > 0 && (
                <button
                  type="button"
                  className="v2_premio_btn_carrera"
                  onClick={nuevaCarreraPremio}
                >
                  Realizar carrera
                </button>
              )}
            </div>
          )}

          <div className="v2_premios_list">
            {loading && (
              <div className="v2_premio_card v2_animate_in">
                <p className="v2_premio_title">Cargando bonos...</p>
              </div>
            )}

            {!loading && premios.length === 0 && (
              <div className="v2_premio_card v2_animate_in">
                <p className="v2_premio_title">No hay carreras gratis registradas en este mes.</p>
                <div className="v2_pills_row">
                  <span className="v2_pill v2_pill_meta">Sigue sumando sellos</span>
                </div>
              </div>
            )}

            {!loading && premios.map((row, idx) => (
              <div
                key={row.id}
                className="v2_premio_card v2_animate_in"
                style={{ animationDelay: `${0.04 + idx * 0.03}s` }}
              >
                <p className="v2_premio_title">Carrera gratis</p>
                <div className="v2_pills_row">
                  <span className="v2_pill v2_pill_meta">{row.created_at}</span>
                  {row.redimido === 1 ? (
                    <span className="v2_pill v2_pill_paid">Usada</span>
                  ) : (
                    <span className="v2_pill v2_pill_ok">Disponible</span>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {showModal && (
        <div className="v2_modal_overlay">
          <div className="v2_modal_box">
            <p className="v2_modal_title">¿Ir a uno de tus lugares favoritos?</p>
            {addresses.map((address, index) => (
              <div
                key={index}
                className="v2_modal_addr_item"
                onClick={() => {
                  localStorage.setItem('prelat', address.lat);
                  localStorage.setItem('prelon', address.lng);
                  localStorage.setItem('resi', address.resi);
                  closeShoModal();
                  gotocarreraPremio();
                }}
              >
                📌 {address.direccion}
              </div>
            ))}
            <div
              className="v2_modal_addr_item"
              onClick={() => {
                localStorage.setItem('prelat', '0');
                localStorage.setItem('prelon', '0');
                closeShoModal();
                gotocarreraPremio();
              }}
            >
              🗺️ Otro lugar
            </div>
            <button type="button" className="v2_modal_btn_close" onClick={closeShoModal}>
              Cerrar
            </button>
          </div>
        </div>
      )}

      {showtelprompt && (
        <div className="v2_modal_overlay">
          <div className="v2_modal_box">
            <p className="v2_modal_title">Número de Celular</p>
            <p className="v2_modal_text">Para solicitar una carrera es necesario tu número de celular</p>
            <input
              onChange={(e) => setTelNum(e.target.value)}
              className="v2_modal_input"
              placeholder="Número de Celular"
              type="tel"
            />
            <div className="v2_rate_btn_row">
              <button type="button" className="v2_modal_btn_secondary" onClick={exitshowtelprompt}>
                Cerrar
              </button>
              <button type="button" className="v2_modal_btn_primary" onClick={saveTel}>
                Aceptar
              </button>
            </div>
          </div>
        </div>
      )}
    </IonPage>
  );
};

export default PremiosClientes;