import React from 'react';
import { IonPage, useIonViewDidEnter } from '@ionic/react';
import { useHistory } from 'react-router-dom';
import $ from 'jquery';
import driverlogo from '../../assets/driverlogo.png';
import { formatTrimestreRangoBonito } from '../utils/formatTrimestre';

type PremioDriver = {
  id_incentivo: number;
  descripcion: string;
  meta: number;
  obtenido_mes: number;
  acreditado_mes: number;
};

type TrimestreMeta = {
  indice: number;
  offset: number;
  etiqueta: string;
  desde: string;
  hasta: string;
  puede_anterior: boolean;
  puede_siguiente: boolean;
};

const PremiosDriver: React.FC = () => {
  const history = useHistory();
  const [loading, setLoading] = React.useState(true);
  const [premios, setPremios] = React.useState<PremioDriver[]>([]);
  const [trimestre, setTrimestre] = React.useState<TrimestreMeta | null>(null);
  /** 0 = trimestre actual, 1 = anterior, etc. */
  const [trimestreOffset, setTrimestreOffset] = React.useState(0);

  const cargarPremios = (offset: number) => {
    setLoading(true);
    $.getJSON(localStorage.apiurl, {
      op: 'listar_premios_driver',
      id_driver: localStorage.driver_id,
      trimestre_offset: offset
    }, (resp: { trimestre?: TrimestreMeta; premios?: PremioDriver[] }) => {
      if (resp && Array.isArray(resp.premios)) {
        setPremios(resp.premios);
        setTrimestre(resp.trimestre ?? null);
      } else {
        // respuesta antigua u inesperada
        setPremios(Array.isArray(resp) ? (resp as unknown as PremioDriver[]) : []);
        setTrimestre(null);
      }
      setLoading(false);
    }).fail(() => {
      setPremios([]);
      setTrimestre(null);
      setLoading(false);
    });
  };

  useIonViewDidEnter(() => {
    setTrimestreOffset(0);
    cargarPremios(0);
  });

  const goPrevTrimestre = () => {
    if (!trimestre?.puede_anterior) return;
    const next = trimestreOffset + 1;
    setTrimestreOffset(next);
    cargarPremios(next);
  };

  const goNextTrimestre = () => {
    if (!trimestre?.puede_siguiente) return;
    const next = Math.max(0, trimestreOffset - 1);
    setTrimestreOffset(next);
    cargarPremios(next);
  };

  const desde = trimestre?.desde?.trim() ?? '';
  const hasta = trimestre?.hasta?.trim() ?? '';
  const tieneRango = Boolean(desde) && Boolean(hasta);
  const textoPeriodo = tieneRango
    ? formatTrimestreRangoBonito(desde, hasta)
    : (trimestre?.etiqueta?.trim() || 'Trimestre');

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

          <div
            className="v2_month_nav v2_trimestre_nav_wrap v2_animate_in"
            style={{ animationDelay: '0.03s' }}
          >
            <button
              type="button"
              className="v2_month_btn"
              onClick={goPrevTrimestre}
              disabled={!trimestre?.puede_anterior}
              aria-label="Trimestre anterior"
            >
              &lt;
            </button>
            <div className="v2_trimestre_nav_center">
              <p className="v2_trimestre_period_main">{textoPeriodo}</p>
              {trimestreOffset === 0 && tieneRango ? (
                <span className="v2_trimestre_badge">Trimestre vigente</span>
              ) : null}
            </div>
            <button
              type="button"
              className="v2_month_btn"
              onClick={goNextTrimestre}
              disabled={!trimestre?.puede_siguiente}
              aria-label="Trimestre siguiente (más reciente)"
            >
              &gt;
            </button>
          </div>

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

            {!loading && premios.length === 0 && (
              <div className="v2_premio_card v2_animate_in">
                <p className="v2_premio_title">No hay datos de incentivos en este trimestre.</p>
                <div className="v2_pills_row">
                  <span className="v2_pill v2_pill_meta">Meta</span>
                </div>
              </div>
            )}

            {!loading && premios.map((premio, idx) => (
              <div
                key={premio.id_incentivo}
                className="v2_premio_card v2_animate_in"
                style={{ animationDelay: `${0.04 + idx * 0.03}s` }}
              >
                <p className="v2_premio_title">{premio.descripcion}</p>
                <div className="v2_pills_row">
                  <span className="v2_pill v2_pill_meta">Meta {premio.meta}</span>
                  {premio.obtenido_mes === 1 && (
                    <span className="v2_pill v2_pill_ok">Obtenido</span>
                  )}
                  {premio.acreditado_mes === 1 && (
                    <span className="v2_pill v2_pill_paid">Redimido</span>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </IonPage>
  );
};

export default PremiosDriver;