import React, { useEffect, useState, useCallback, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import * as Kubikon3DApi from '../../api/Kubikon3DService';

/**
 * Форматирует время в мс → "1:23.45" (мин:сек.сотые) или "23.45" если меньше минуты.
 */
export function formatTimeMs(ms) {
    if (ms == null || !Number.isFinite(ms)) return '—';
    const totalSec = ms / 1000;
    const mm = Math.floor(totalSec / 60);
    const sec = totalSec - mm * 60;
    if (mm > 0) {
        return mm + ':' + sec.toFixed(2).padStart(5, '0');
    }
    return sec.toFixed(2);
}

const RANK_BADGES = ['🥇', '🥈', '🥉', '4️⃣', '5️⃣'];

/**
 * KubikonLeaderboard — таблица топ-N рекордов прохождения игры.
 *
 * Props:
 *   projectId  — id проекта Кубикон 3D
 *   limit      — топ N (default 5)
 *   currentTimeMs — текущее время игрока (показывается отдельной строкой)
 *   currentUserId — id текущего игрока (выделить его строку)
 *   onClose    — если задан, показывается крестик в углу для скрытия
 *   compact    — если true, компактный режим (для оверлея в игре)
 *   refreshKey — менять чтобы перезагрузить (например при submit)
 *   style, className — для оборачивания
 */
export default function KubikonLeaderboard({
    projectId, limit = 5, currentTimeMs = null, currentUserId = null,
    onClose = null, compact = false, refreshKey = 0,
    clickable = true, onLoaded = null,
    style = {}, className = '',
}) {
    const navigate = useNavigate();
    const [records, setRecords] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    // onLoaded храним в ref чтобы не плодить fetchData при каждом рендере
    // родителя (если он не оборачивает onLoaded в useCallback). Без этого
    // компонент попадал в бесконечный цикл fetch.
    const onLoadedRef = useRef(onLoaded);
    useEffect(() => { onLoadedRef.current = onLoaded; }, [onLoaded]);

    const fetchData = useCallback(async () => {
        if (!projectId) return;
        setLoading(true);
        setError(null);
        try {
            const r = await Kubikon3DApi.getLeaderboard(projectId, limit);
            const list = r.data?.records || [];
            setRecords(list);
            const cb = onLoadedRef.current;
            if (cb) try { cb(list); } catch (e) {}
        } catch (e) {
            setError(e?.message || 'Ошибка загрузки');
        } finally {
            setLoading(false);
        }
    }, [projectId, limit]);

    useEffect(() => { fetchData(); }, [fetchData, refreshKey]);

    const goProfile = (uid) => {
        if (!clickable) return;
        if (!uid) return;
        // Профили живут на rublox.pro, не в плеере. Внешний редирект.
        window.location.assign(`https://rublox.pro/app/profile/${uid}`);
    };

    // Палитра — берём «золотистую» гамму с лёгким бирюзовым акцентом (соответствует Кубикону)
    const C = {
        bg:        compact ? 'rgba(10, 14, 26, 0.92)' : 'rgba(20, 24, 45, 0.96)',
        bgRow:     'rgba(15, 19, 38, 0.55)',
        bgRowAlt:  'rgba(15, 19, 38, 0.30)',
        bgRowMe:   'rgba(255, 215, 0, 0.16)',
        border:    'rgba(255, 215, 0, 0.45)',
        borderSoft:'rgba(255, 255, 255, 0.10)',
        gold:      '#ffd700',
        goldDim:   '#caa01c',
        text:      '#f1f5fb',
        muted:     'rgba(241, 245, 251, 0.55)',
        accent:    '#3357ff',
        success:   '#22d97a',
    };

    return (
        <div
            className={className}
            style={{
                background: C.bg,
                border: `2px solid ${C.border}`,
                borderRadius: compact ? 14 : 18,
                padding: compact ? 12 : 16,
                color: C.text,
                fontFamily: '"Roboto Condensed", system-ui, sans-serif',
                backdropFilter: 'blur(8px)',
                boxShadow: '0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,215,0,0.10) inset',
                minWidth: compact ? 240 : 320,
                maxWidth: compact ? 320 : 480,
                ...style,
            }}
        >
            {/* Заголовок */}
            <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                marginBottom: 10, gap: 8,
            }}>
                <div style={{
                    display: 'flex', alignItems: 'center', gap: 8,
                    fontSize: compact ? 16 : 18, fontWeight: 800,
                    letterSpacing: 0.5,
                    color: C.gold,
                    textShadow: '0 0 12px rgba(255,215,0,0.35)',
                }}>
                    <span style={{ fontSize: compact ? 22 : 26 }}>🏆</span>
                    Топ-{limit}
                </div>
                {onClose && (
                    <button
                        onClick={onClose}
                        title="Скрыть таблицу (Tab)"
                        style={{
                            background: 'transparent', border: 'none',
                            color: C.muted, cursor: 'pointer', fontSize: 18,
                            padding: '2px 8px', borderRadius: 6,
                        }}
                        onMouseEnter={e => { e.currentTarget.style.color = C.text; }}
                        onMouseLeave={e => { e.currentTarget.style.color = C.muted; }}
                    >✕</button>
                )}
            </div>

            {/* Тело */}
            {loading ? (
                <div style={{ color: C.muted, fontSize: 14, textAlign: 'center', padding: '12px 0' }}>
                    Загружаю…
                </div>
            ) : error ? (
                <div style={{ color: '#ff6f7a', fontSize: 13, textAlign: 'center', padding: '12px 0' }}>
                    {error}
                </div>
            ) : records.length === 0 ? (
                <div style={{
                    color: C.muted, fontSize: 13, textAlign: 'center',
                    padding: '14px 6px',
                    background: C.bgRowAlt, borderRadius: 10,
                    border: `1px dashed ${C.borderSoft}`,
                }}>
                    Пока нет рекордов.<br/>
                    <span style={{ color: C.gold }}>Стань первым!</span>
                </div>
            ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    {records.map((r, idx) => {
                        const isMe = currentUserId && r.user_id === currentUserId;
                        return (
                            <div
                                key={r.id}
                                onClick={() => goProfile(r.user_id)}
                                style={{
                                    display: 'grid',
                                    gridTemplateColumns: '32px 1fr auto',
                                    alignItems: 'center',
                                    gap: 8,
                                    padding: '8px 10px',
                                    borderRadius: 10,
                                    background: isMe ? C.bgRowMe :
                                                idx % 2 === 0 ? C.bgRow : C.bgRowAlt,
                                    border: isMe ? `1px solid ${C.gold}` : `1px solid ${C.borderSoft}`,
                                    cursor: clickable ? 'pointer' : 'default',
                                    transition: 'transform 0.12s ease, background 0.12s ease',
                                }}
                                onMouseEnter={e => {
                                    if (!clickable) return;
                                    e.currentTarget.style.transform = 'translateX(2px)';
                                    e.currentTarget.style.background = isMe ? 'rgba(255,215,0,0.24)' : 'rgba(51,87,255,0.18)';
                                }}
                                onMouseLeave={e => {
                                    if (!clickable) return;
                                    e.currentTarget.style.transform = 'translateX(0)';
                                    e.currentTarget.style.background = isMe ? C.bgRowMe :
                                        idx % 2 === 0 ? C.bgRow : C.bgRowAlt;
                                }}
                            >
                                <div style={{
                                    fontSize: idx < 3 ? 22 : 16,
                                    fontWeight: 700,
                                    color: idx < 3 ? C.gold : C.muted,
                                    textAlign: 'center',
                                }}>
                                    {RANK_BADGES[idx] || (idx + 1)}
                                </div>
                                <div style={{
                                    fontWeight: 600, fontSize: 14,
                                    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                                    color: isMe ? C.gold : C.text,
                                }}>
                                    {r.username || `id ${r.user_id}`}
                                    {isMe && <span style={{ marginLeft: 6, fontSize: 11, opacity: 0.7 }}>(ты)</span>}
                                </div>
                                <div style={{
                                    fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
                                    fontSize: 14, fontWeight: 700,
                                    color: idx === 0 ? C.gold : C.text,
                                    minWidth: 60, textAlign: 'right',
                                }}>
                                    {formatTimeMs(r.time_ms)}
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}

            {/* Текущее время игрока (если идёт прохождение) */}
            {currentTimeMs != null && currentTimeMs > 0 && (
                <div style={{
                    marginTop: 10,
                    padding: '8px 10px',
                    borderRadius: 10,
                    background: 'linear-gradient(135deg, rgba(34, 217, 122, 0.18), rgba(51, 87, 255, 0.14))',
                    border: `1px solid ${C.success}`,
                    display: 'grid',
                    gridTemplateColumns: 'auto 1fr auto',
                    alignItems: 'center',
                    gap: 8,
                }}>
                    <span style={{ fontSize: 18 }}>⏱️</span>
                    <span style={{ fontSize: 13, color: C.success, fontWeight: 700 }}>
                        Твоё время
                    </span>
                    <span style={{
                        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
                        fontSize: 16, fontWeight: 800,
                        color: C.success,
                    }}>
                        {formatTimeMs(currentTimeMs)}
                    </span>
                </div>
            )}
        </div>
    );
}