import React from 'react';
import { IonLoading, IonPage, useIonViewDidEnter } from '@ionic/react';
import { useHistory } from 'react-router-dom';
import $ from 'jquery';
import driverlogo from '../../assets/driverlogo.png';
import { APP_CONFIG } from '../config/app';

type LeaderEntry = {
  posicion: number;
  id_driver: number;
  nombre: string;
  apellido: string;
  marca: string;
  carreras: number;
  foto: string;
  es_yo: boolean;
};

type Reto10KResponse = {
  fecha_inicio: string;
  meta_carreras: number;
  reto_iniciado: boolean;
  reto_finalizado?: boolean;
  reto_congelado?: boolean;
  fecha_corte?: string | null;
  ganador?: {
    id_driver: number;
    nombre: string;
    apellido: string;
    marca: string;
    carreras: number;
    fecha_victoria: string;
    meta_alcanzada?: boolean;
  } | null;
  leaderboard: LeaderEntry[];
  mi_progreso: {
    id_driver: number;
    marca: string;
    carreras: number;
    posicion: number;
    faltan: number;
    porcentaje: number;
    meta_alcanzada: boolean;
  };
};

type Countdown = {
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
  started: boolean;
};

const RETO_CONFIG = APP_CONFIG.reto10k;

const parseStartDate = (fecha: string) => {
  const [y, m, d] = fecha.split('-').map(Number);
  return new Date(y, m - 1, d, 0, 0, 0, 0);
};

const formatFechaBonita = (fecha: string) => {
  const dt = parseStartDate(fecha);
  return dt.toLocaleDateString('es-HN', { day: 'numeric', month: 'long', year: 'numeric' });
};

const driverCode = (nombre: string, apellido: string) => {
  const base = (apellido || nombre || 'DRV').replace(/\s/g, '');
  return base.slice(0, 3).toUpperCase();
};

const getCountdown = (fechaInicio: string): Countdown => {
  const start = parseStartDate(fechaInicio).getTime();
  const now = Date.now();
  const diff = start - now;
  if (diff <= 0) {
    return { days: 0, hours: 0, minutes: 0, seconds: 0, started: true };
  }
  const totalSec = Math.floor(diff / 1000);
  return {
    days: Math.floor(totalSec / 86400),
    hours: Math.floor((totalSec % 86400) / 3600),
    minutes: Math.floor((totalSec % 3600) / 60),
    seconds: totalSec % 60,
    started: false,
  };
};

const pad2 = (n: number) => String(n).padStart(2, '0');

const CheckeredFlag: React.FC<{ title?: string; className?: string }> = ({ title, className }) => (
  <span
    className={`reto10k_checkered_flag${className ? ` ${className}` : ''}`}
    title={title ?? 'Meta alcanzada'}
    aria-label={title ?? 'Meta alcanzada'}
    role="img"
  />
);

const RETO10K_HERO_COLLAPSED_KEY = 'reto10k_hero_collapsed';

const readHeroCollapsed = (): boolean => localStorage.getItem(RETO10K_HERO_COLLAPSED_KEY) === '1';

const Reto10K: React.FC = () => {
  const history = useHistory();
  const [loading, setLoading] = React.useState(true);
  const [data, setData] = React.useState<Reto10KResponse | null>(null);
  const [heroCollapsed, setHeroCollapsed] = React.useState(readHeroCollapsed);
  const [countdown, setCountdown] = React.useState<Countdown>(() =>
    getCountdown(RETO_CONFIG.fechaInicio)
  );

  const toggleHero = () => {
    setHeroCollapsed((prev) => {
      const next = !prev;
      localStorage.setItem(RETO10K_HERO_COLLAPSED_KEY, next ? '1' : '0');
      return next;
    });
  };

  const cargarDatos = () => {
    setLoading(true);
    $.getJSON(localStorage.apiurl, {
      op: 'reto_10k_leaderboard',
      id_driver: localStorage.driver_id,
      fecha_inicio: RETO_CONFIG.fechaInicio,
      meta_carreras: RETO_CONFIG.metaCarreras,
    }, (resp: Reto10KResponse) => {
      if ((resp as unknown as { status?: string }).status === 'ERR') {
        setData(null);
        setLoading(false);
        alert((resp as unknown as { message?: string }).message || 'Error al cargar el reto');
        return;
      }
      setData(resp);
      setLoading(false);
    }).fail(() => {
      setData(null);
      setLoading(false);
    });
  };

  useIonViewDidEnter(() => {
    cargarDatos();
  });

  React.useEffect(() => {
    const tick = () => setCountdown(getCountdown(RETO_CONFIG.fechaInicio));
    tick();
    const id = window.setInterval(tick, 1000);
    return () => window.clearInterval(id);
  }, []);

  const meta = data?.meta_carreras ?? RETO_CONFIG.metaCarreras;
  const mi = data?.mi_progreso;
  const retoCongelado = data?.reto_congelado ?? false;
  const retoFinalizado = data?.reto_finalizado ?? retoCongelado;
  const retoIniciado = retoFinalizado || (data?.reto_iniciado ?? countdown.started);
  const fechaLabel = formatFechaBonita(data?.fecha_inicio ?? RETO_CONFIG.fechaInicio);
  const fechaCorteLabel = data?.fecha_corte ? formatFechaBonita(data.fecha_corte) : '';
  const ganador = data?.ganador;

  return (
    <IonPage>
      <div className="v2_pagewrap reto10k_page">
        <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>

          {/* HERO — colapsable (estado en localStorage) */}
          <div className={`reto10k_hero v2_animate_in${heroCollapsed ? ' is-collapsed' : ''}`}>
            <div className="reto10k_hero_glow" />
            <button
              type="button"
              className="reto10k_hero_toggle"
              onClick={toggleHero}
              aria-expanded={!heroCollapsed}
              aria-label={heroCollapsed ? 'Ver información del reto' : 'Ocultar información del reto'}
            >
              <div className="reto10k_hero_head">
                <div>
                  <p className="reto10k_hero_badge">CHAMPIONSHIP CHALLENGE</p>
                  <h1 className="reto10k_hero_title">
                    RETO <span>10K</span>
                  </h1>
                </div>
                <span className="reto10k_hero_chevron" aria-hidden="true">
                  {heroCollapsed ? '▼' : '▲'}
                </span>
              </div>
            </button>

            {!heroCollapsed && (
              <div className="reto10k_hero_body">
                <p className="reto10k_hero_sub">
                  {RETO_CONFIG.premioDescripcion}
                </p>
                <p className="reto10k_instruccion">
                  El primero en llegar a <strong>{meta} carreras</strong> después del{' '}
                  <strong>{fechaLabel}</strong> recibirá un premio de{' '}
                  <strong>L. {RETO_CONFIG.premioMonto.toLocaleString('es-HN')} en efectivo</strong>.
                </p>
                <div className="reto10k_hero_meta">
                  <span>Meta: {meta} carreras</span>
                  <span>Desde {fechaLabel}</span>
                </div>
              </div>
            )}
          </div>

          {/* COUNTDOWN */}
          <div className="reto10k_countdown_wrap v2_animate_in" style={{ animationDelay: '0.05s' }}>
            {retoCongelado ? (
              <div className="reto10k_final_banner">
                <div className="reto10k_final_head">
                  <p className="reto10k_final_label">GANADOR</p>
                  <span className="reto10k_final_pos">1ST</span>
                </div>
                {ganador ? (
                  <div className="reto10k_final_grid">
                    <div className="reto10k_final_row">
                      <span className="reto10k_final_key">Escudería</span>
                      <span className="reto10k_final_val">{ganador.marca || '—'}</span>
                    </div>
                    <div className="reto10k_final_row">
                      <span className="reto10k_final_key">Piloto</span>
                      <span className="reto10k_final_val">{ganador.nombre} {ganador.apellido}</span>
                    </div>
                  </div>
                ) : (
                  <p className="reto10k_final_empty">Sin resultados en el período</p>
                )}
                <p className="reto10k_final_torneo">
                  Torneo {fechaLabel}
                  {fechaCorteLabel ? ` — ${fechaCorteLabel}` : ''}
                </p>
              </div>
            ) : retoIniciado ? (
              <div className="reto10k_live_banner">
                <span className="reto10k_live_dot" />
                RETO EN CURSO — LIVE
              </div>
            ) : (
              <>
                <p className="reto10k_countdown_label">LARGADA INICIA EN</p>
                <div className="reto10k_countdown_grid">
                  {[
                    { val: countdown.days, lbl: 'DÍAS' },
                    { val: countdown.hours, lbl: 'HRS' },
                    { val: countdown.minutes, lbl: 'MIN' },
                    { val: countdown.seconds, lbl: 'SEG' },
                  ].map((unit) => (
                    <div key={unit.lbl} className="reto10k_countdown_unit">
                      <span className="reto10k_countdown_num">{pad2(unit.val)}</span>
                      <span className="reto10k_countdown_unit_lbl">{unit.lbl}</span>
                    </div>
                  ))}
                </div>
              </>
            )}
          </div>

          {/* LEADERBOARD F1 */}
          <div className="reto10k_board v2_animate_in" style={{ animationDelay: '0.08s' }}>
            <div className="reto10k_board_header">
              <span>POS</span>
              <span>PILOTO / ESCUDERÍA</span>
              <span>CARRERAS</span>
            </div>

            {loading && (
              <p className="reto10k_board_empty">Cargando clasificación…</p>
            )}

            {!loading && (!data?.leaderboard || data.leaderboard.length === 0) && (
              <p className="reto10k_board_empty">
                {retoIniciado
                  ? 'Aún no hay carreras registradas en el reto.'
                  : 'La clasificación se activa cuando inicie el reto.'}
              </p>
            )}

            {!loading && data?.leaderboard?.map((row, index) => {
              const carrerasAhead = index > 0 ? data.leaderboard[index - 1].carreras : null;
              const gap = carrerasAhead !== null ? carrerasAhead - row.carreras : null;
              const metaAlcanzada = row.carreras >= meta;

              return (
              <div
                key={row.id_driver}
                className={`reto10k_board_row pos-${row.posicion}${row.es_yo ? ' is-me' : ''}${metaAlcanzada ? ' meta-done' : ''}`}
              >
                <span className="reto10k_pos">{row.posicion}</span>
                <div className="reto10k_driver_cell">
                  <span className="reto10k_driver_code" title={`${row.nombre} ${row.apellido}`.trim()}>
                    {driverCode(row.nombre, row.apellido)}
                  </span>
                  <div className="reto10k_driver_info">
                    <span className="reto10k_driver_name">
                      {row.nombre} {row.apellido}
                      {metaAlcanzada && (
                        <CheckeredFlag title={`${meta} carreras — meta alcanzada`} className="reto10k_checkered_inline" />
                      )}
                      {row.es_yo && <em className="reto10k_you_tag">TÚ</em>}
                    </span>
                    {row.marca ? (
                      <span className="reto10k_escuderia">{row.marca}</span>
                    ) : null}
                  </div>
                </div>
                <div className="reto10k_carreras">
                  {metaAlcanzada && (
                    <CheckeredFlag title="Meta alcanzada" className="reto10k_checkered_carreras" />
                  )}
                  <span className="reto10k_carreras_main">{row.carreras}</span>
                  {row.posicion === 1 ? (
                    <span className="reto10k_carreras_inter">INTER</span>
                  ) : gap !== null && gap > 0 ? (
                    <span className="reto10k_carreras_gap">/ +{gap}</span>
                  ) : null}
                </div>
              </div>
            );
            })}
          </div>

          {/* MI PROGRESO */}
          {mi && (
            <div className="reto10k_my_card v2_animate_in" style={{ animationDelay: '0.1s' }}>
              <div className="reto10k_my_top">
                <div>
                  <p className="reto10k_my_label">TU CLASIFICACIÓN</p>
                  {mi.marca ? (
                    <p className="reto10k_my_escuderia">
                      Escudería <strong>{mi.marca}</strong>
                    </p>
                  ) : null}
                  <p className="reto10k_my_pos">
                    P{mi.posicion > 0 ? mi.posicion : '—'}
                  </p>
                </div>
                <div className="reto10k_my_stats">
                  <span className="reto10k_my_carreras">{mi.carreras}</span>
                  <span className="reto10k_my_carreras_lbl">carreras</span>
                </div>
              </div>
              <div className="reto10k_progress_track">
                <div
                  className="reto10k_progress_fill"
                  style={{ width: `${Math.min(100, mi.porcentaje)}%` }}
                />
              </div>
              <p className="reto10k_my_footer">
                {mi.meta_alcanzada ? (
                  <>
                    <CheckeredFlag title="Meta alcanzada" className="reto10k_checkered_footer" />
                    {' '}¡Meta alcanzada! Estás en la pole del reto.
                  </>
                ) : (
                  `Faltan ${mi.faltan} carreras para los ${meta}`
                )}
              </p>
            </div>
          )}

          <div className="v2_spacer_footer" />
        </div>
      </div>
      <IonLoading isOpen={loading} message="Cargando reto…" />
    </IonPage>
  );
};

export default Reto10K;