import { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import api from '../api';

const API_URL = 'http://localhost:5000';

const Home = () => {
    const { t, i18n } = useTranslation();
    const [plugins, setPlugins] = useState<any[]>([]);
    const hasFetched = useRef(false);

    useEffect(() => {
        if (hasFetched.current) return;
        api.get('/plugins', { params: { q: '', sort: 'newest' } })
            .then(res => {
                setPlugins(res.data);
                hasFetched.current = true;
            })
            .catch(err => console.error('Fetch error:', err));
    }, []);

    const getDescription = (translatedStr: string) => {
        try {
            const data = JSON.parse(translatedStr);
            const currentLang = i18n.language.split('-')[0];
            return data[currentLang] || data.en || Object.values(data)[0] || 'No description available.';
        } catch {
            return 'No description available.';
        }
    };

    const getAccentColor = (name: string) => {
        const colors = [
            '#4f7eff', '#ff6b6b', '#ffd166', '#06d6a0',
            '#a855f7', '#f97316', '#06b6d4', '#ec4899',
        ];
        let hash = 0;
        for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
        return colors[Math.abs(hash) % colors.length];
    };

    // Compute effective display price respecting active sale
    const getEffectivePrice = (plugin: any): { display: string; isSale: boolean; originalDisplay: string } => {
        const base = plugin.price_cents ?? 0;
        const saleActive = plugin.sale_active && plugin.sale_discount_percent > 0;
        if (saleActive) {
            const saleCents = Math.round(base * (1 - plugin.sale_discount_percent / 100));
            return {
                display: `€${(saleCents / 100).toFixed(2)}`,
                isSale: true,
                originalDisplay: `€${(base / 100).toFixed(2)}`,
            };
        }
        return {
            display: `€${(base / 100).toFixed(2)}`,
            isSale: false,
            originalDisplay: '',
        };
    };

    return (
        <>
            <style>{`
                .home-plugin-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                    gap: 1.25rem;
                    padding: 2rem 0 4rem;
                }
                .plugin-card-link { text-decoration: none; display: block; }
                .plugin-card-v2 {
                    position: relative;
                    border-radius: 10px;
                    overflow: hidden;
                    background: var(--mp-surface, #16191f);
                    border: 1px solid var(--mp-border, rgba(255,255,255,0.07));
                    cursor: pointer;
                    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
                    will-change: transform;
                }
                .plugin-card-v2:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
                    border-color: rgba(255,255,255,0.14);
                }
                .pcv2-preview {
                    position: relative;
                    width: 100%;
                    aspect-ratio: 16 / 9;
                    overflow: hidden;
                    background: var(--mp-bg, #0d0f12);
                }
                .pcv2-preview-img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                    transition: transform 0.35s ease;
                }
                .plugin-card-v2:hover .pcv2-preview-img { transform: scale(1.04); }
                .pcv2-preview-fallback {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 2.8rem;
                    font-weight: 800;
                    letter-spacing: -0.04em;
                    color: rgba(255,255,255,0.9);
                    font-family: var(--font-display, system-ui);
                    user-select: none;
                }
                .pcv2-preview-fade {
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(to bottom, transparent 30%, rgba(13,15,18,0.55) 65%, rgba(13,15,18,0.96) 100%);
                    pointer-events: none;
                }
                .pcv2-category-badge {
                    position: absolute;
                    top: 10px; left: 10px;
                    font-size: 0.62rem;
                    font-weight: 700;
                    letter-spacing: 0.07em;
                    text-transform: uppercase;
                    background: rgba(13,15,18,0.72);
                    backdrop-filter: blur(6px);
                    border: 1px solid rgba(255,255,255,0.1);
                    color: rgba(255,255,255,0.75);
                    padding: 0.2rem 0.5rem;
                    border-radius: 4px;
                }
                .pcv2-price-badge {
                    position: absolute;
                    top: 10px; right: 10px;
                    font-size: 0.7rem;
                    font-weight: 700;
                    padding: 0.2rem 0.55rem;
                    border-radius: 4px;
                    backdrop-filter: blur(6px);
                    display: flex;
                    align-items: center;
                    gap: 0.35rem;
                }
                .pcv2-price-badge.free {
                    background: rgba(6,214,160,0.18);
                    border: 1px solid rgba(6,214,160,0.35);
                    color: #06d6a0;
                }
                .pcv2-price-badge.paid {
                    background: rgba(255,209,102,0.16);
                    border: 1px solid rgba(255,209,102,0.35);
                    color: #ffd166;
                }
                .pcv2-price-badge.sale {
                    background: rgba(255,107,107,0.18);
                    border: 1px solid rgba(255,107,107,0.4);
                    color: #ff6b6b;
                }
                .pcv2-price-original {
                    text-decoration: line-through;
                    opacity: 0.55;
                    font-weight: 500;
                }
                .pcv2-sale-pct {
                    font-size: 0.58rem;
                    font-weight: 800;
                    background: rgba(255,107,107,0.25);
                    border-radius: 3px;
                    padding: 1px 4px;
                    letter-spacing: 0.04em;
                }
                .pcv2-info { padding: 0.85rem 1rem 1rem; }
                .pcv2-name {
                    font-size: 0.95rem;
                    font-weight: 700;
                    color: var(--mp-text-1, #f0f0f0);
                    margin: 0 0 0.15rem;
                    font-family: var(--font-display, system-ui);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .pcv2-dev { font-size: 0.72rem; color: var(--mp-text-3, #5a6070); margin: 0 0 0.55rem; }
                .pcv2-desc {
                    font-size: 0.77rem;
                    color: var(--mp-text-2, #8b909a);
                    line-height: 1.55;
                    margin: 0 0 0.75rem;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                .pcv2-footer {
                    display: flex;
                    align-items: center;
                    gap: 0.9rem;
                    padding-top: 0.65rem;
                    border-top: 1px solid var(--mp-border, rgba(255,255,255,0.06));
                }
                .pcv2-stat {
                    display: flex; align-items: center; gap: 0.3rem;
                    font-size: 0.7rem; color: var(--mp-text-3, #5a6070);
                }
                .pcv2-stat svg { opacity: 0.6; }
                .pcv2-accent-bar {
                    position: absolute; bottom: 0; left: 0; right: 0;
                    height: 2px; opacity: 0;
                    transition: opacity 0.2s ease;
                }
                .plugin-card-v2:hover .pcv2-accent-bar { opacity: 1; }

                /* Sale banner strip at bottom of card */
                .pcv2-sale-strip {
                    background: linear-gradient(90deg, rgba(255,107,107,0.15), rgba(255,107,107,0.05));
                    border-top: 1px solid rgba(255,107,107,0.2);
                    padding: 0.3rem 1rem;
                    font-size: 0.65rem;
                    font-weight: 700;
                    color: #ff6b6b;
                    letter-spacing: 0.06em;
                    text-transform: uppercase;
                    display: flex;
                    align-items: center;
                    gap: 0.4rem;
                }
            `}</style>

            <section className="hero">
                <h1>{t('welcome')}</h1>
                <p>Explore powerful plugins for your PumpkinMC experience.</p>
            </section>

            <div className="container" id="browse">
                <div className="home-plugin-grid">
                    {plugins.map((plugin) => {
                        const accent = getAccentColor(plugin.name);
                        const desc = getDescription(plugin.translated_descriptions);
                        const initial = plugin.name.charAt(0).toUpperCase();
                        const priceInfo = getEffectivePrice(plugin);
                        const isSale = plugin.type === 'paid' && priceInfo.isSale;

                        return (
                            <Link to={`/plugin/${plugin.id}`} key={plugin.id} className="plugin-card-link">
                                <div className="plugin-card-v2">

                                    {/* Preview image */}
                                    <div className="pcv2-preview">
                                        {plugin.preview_path ? (
                                            <img
                                                className="pcv2-preview-img"
                                                src={plugin.preview_path}
                                                alt={plugin.name}
                                            />
                                        ) : (
                                            <div
                                                className="pcv2-preview-fallback"
                                                style={{ background: `linear-gradient(135deg, ${accent}22 0%, #0d0f12 100%)` }}
                                            >
                                                <span style={{ color: accent }}>{initial}</span>
                                            </div>
                                        )}
                                        <div className="pcv2-preview-fade" />
                                        <span className="pcv2-category-badge">{plugin.category}</span>

                                        {/* Price badge */}
                                        {plugin.type === 'free' ? (
                                            <span className="pcv2-price-badge free">Free</span>
                                        ) : isSale ? (
                                            <span className="pcv2-price-badge sale">
                                                <span className="pcv2-price-original">{priceInfo.originalDisplay}</span>
                                                {priceInfo.display}
                                                <span className="pcv2-sale-pct">-{plugin.sale_discount_percent}%</span>
                                            </span>
                                        ) : (
                                            <span className="pcv2-price-badge paid">{priceInfo.display}</span>
                                        )}
                                    </div>

                                    {/* Info */}
                                    <div className="pcv2-info">
                                        <p className="pcv2-name">{plugin.name}</p>
                                        <p className="pcv2-dev">by {plugin.dev_name}</p>
                                        <p className="pcv2-desc">{desc}</p>

                                        <div className="pcv2-footer">
                                            <span className="pcv2-stat">
                                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
                                                </svg>
                                                {(plugin.downloads ?? 0).toLocaleString()}
                                            </span>
                                            {plugin.rating != null && (
                                                <span className="pcv2-stat">
                                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none">
                                                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" opacity="0.7"/>
                                                    </svg>
                                                    {Number(plugin.rating).toFixed(1)}
                                                </span>
                                            )}
                                            {plugin.version && (
                                                <span className="pcv2-stat" style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono, monospace)', fontSize: '0.65rem' }}>
                                                    v{plugin.version}
                                                </span>
                                            )}
                                        </div>
                                    </div>

                                    {/* Sale strip at bottom */}
                                    {isSale && (
                                        <div className="pcv2-sale-strip">
                                            🔥 Sale — {plugin.sale_discount_percent}% off
                                        </div>
                                    )}

                                    <div
                                        className="pcv2-accent-bar"
                                        style={{ background: `linear-gradient(90deg, ${isSale ? '#ff6b6b' : accent}, transparent)` }}
                                    />
                                </div>
                            </Link>
                        );
                    })}

                    {plugins.length === 0 && (
                        <div className="empty-state">
                            <p>No plugins found. Check back later!</p>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
};

export default Home;