import React from 'react';

/**
 * Бейдж статуса публикации проекта (умная лента — RUBLOX_SMART_FEED_PLAN.md).
 * Показывается рядом с названием игры в редакторе и в «Мои игры».
 *
 * Premoderации больше нет. Статусы:
 *   draft     — черновик, не опубликована;
 *   published — в ленте, видна всем;
 *   review    — на быстрой автопроверке (скрипты ушли к админу);
 *   blocked   — заблокирована администрацией.
 *
 * Props:
 *   status  — 'draft' | 'published' | 'review' | 'blocked'
 *   comment — комментарий администрации (для blocked)
 */

// Самописные inline-SVG вместо эмодзи (правило проекта — никаких смайлов в UI).
const ICONS = {
    // Лист бумаги — черновик
    draft: (
        <path d="M6 2h7l5 5v15H6zM13 2v5h5" />
    ),
    // Галочка — опубликовано
    published: (
        <path d="M5 13l4 4L19 7" />
    ),
    // Лупа — на проверке
    review: (
        <>
            <circle cx="11" cy="11" r="6" />
            <path d="M20 20l-4.3-4.3" />
        </>
    ),
    // Перечёркнутый круг — заблокировано
    blocked: (
        <>
            <circle cx="12" cy="12" r="9" />
            <path d="M6 6l12 12" />
        </>
    ),
};

const STATUS_META = {
    draft: {
        label: 'Черновик',
        bg: 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)',
        glow: 'rgba(100, 116, 139, 0.40)',
    },
    published: {
        label: 'В ленте',
        bg: 'linear-gradient(135deg, #10b981 0%, #0f9d56 100%)',
        glow: 'rgba(16, 185, 129, 0.45)',
    },
    review: {
        label: 'На проверке',
        bg: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
        glow: 'rgba(245, 158, 11, 0.45)',
    },
    blocked: {
        label: 'Заблокировано',
        bg: 'linear-gradient(135deg, #ff6f7a 0%, #c0303f 100%)',
        glow: 'rgba(239, 68, 68, 0.45)',
    },
};

const PublishStatusBadge = ({ status, comment }) => {
    const meta = STATUS_META[status] || STATUS_META.draft;
    const icon = ICONS[status] || ICONS.draft;
    const tip = comment
        ? `${meta.label}\n\nКомментарий администрации:\n${comment}`
        : meta.label;
    return (
        <div
            title={tip}
            style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 5,
                padding: '4px 10px',
                background: meta.bg,
                border: '1px solid rgba(255, 255, 255, 0.18)',
                borderRadius: 999,
                color: '#fff',
                fontSize: 11,
                fontWeight: 800,
                letterSpacing: 0.2,
                whiteSpace: 'nowrap',
                fontFamily: '"Roboto Condensed", system-ui, sans-serif',
                cursor: comment ? 'help' : 'default',
                boxShadow: `0 4px 12px ${meta.glow}`,
                backdropFilter: 'blur(8px)',
                WebkitBackdropFilter: 'blur(8px)',
            }}
        >
            <svg width={12} height={12} viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" strokeWidth="2.4"
                 strokeLinecap="round" strokeLinejoin="round">
                {icon}
            </svg>
            <span>{meta.label}</span>
        </div>
    );
};

export default PublishStatusBadge;