import React from 'react';

const ICONS = {
    curate_weekly: '📋',
    signal_check: '🔍',
    daily_digest: '📊',
    weekly_evolution_report: '🧬',
    evolver_generate: '🌱',
    evolver_apply: '🎲',
};

const STATUS_CLS = {
    succeeded: 'ok',
    failed: 'err',
    working: 'pending',
    pending: 'pending',
};

function formatTaskDetail(t) {
    const r = t.result_data || {};
    switch (t.task_type) {
        case 'signal_check': return `${r.source} → ${r.overall_fire} (${r.n_results} results)`;
        case 'daily_digest': return `평가 ${r.evaluated} / 발화 ${r.fired}`;
        case 'weekly_evolution_report': return `draw=${r.draw_no} reason=${r.update_reason}`;
        case 'evolver_apply': return `${r.n_picks}세트 추출`;
        case 'evolver_generate': return `${r.trials_count} trials 생성`;
        case 'curate_weekly': return `draw=${r.draw_no || '?'} conf=${r.confidence || '?'}`;
        default: return '';
    }
}

function renderItem(item) {
    const ts = (item.ts || '').replace('T', ' ').slice(0, 19);
    if (item.kind === 'task') {
        const t = item.payload;
        const icon = ICONS[t.task_type] || '⚙️';
        const cls = STATUS_CLS[t.status] || '';
        const detail = formatTaskDetail(t);
        return (
            <li key={`task-${t.id}`} className={`activity-item task ${cls}`}>
                <span className="icon">{icon}</span>
                <div className="body">
                    <div className="line"><strong>{t.task_type}</strong> · <span className={`status ${cls}`}>{t.status}</span></div>
                    {detail && <div className="detail">{detail}</div>}
                </div>
                <span className="ts">{ts}</span>
            </li>
        );
    }
    if (item.kind === 'log') {
        const l = item.payload;
        return (
            <li key={`log-${l.id}`} className={`activity-item log level-${l.level}`}>
                <span className="icon">{l.level === 'error' ? '❌' : l.level === 'warning' ? '⚠️' : '·'}</span>
                <div className="body"><div className="line">{l.message}</div></div>
                <span className="ts">{ts}</span>
            </li>
        );
    }
    if (item.kind === 'evolver') {
        const e = item.payload;
        return (
            <li key={`evolver-${e.id}`} className="activity-item evolver">
                <span className="icon">⚖️</span>
                <div className="body">
                    <div className="line"><strong>weight_evolver_eval</strong> (lotto-lab)</div>
                    <div className="detail">reason={e.update_reason} winner_max={e.winner_max_correct}</div>
                </div>
                <span className="ts">{ts}</span>
            </li>
        );
    }
    return null;
}

export default function LottoActivityTimeline({ activity = [], days = 7 }) {
    if (!activity || activity.length === 0) {
        return (
            <div className="evolver-card activity-card empty">
                <h2>최근 활동</h2>
                <p className="muted">지난 {days}일 활동 없음.</p>
            </div>
        );
    }
    return (
        <div className="evolver-card activity-card">
            <h2>최근 {days}일 에이전트 활동 ({activity.length})</h2>
            <ul className="activity-list">{activity.map(renderItem)}</ul>
        </div>
    );
}
