import React from 'react';

export const getFgColor = (score) => {
    if (score <= 25) return '#ef4444';
    if (score <= 45) return '#f97316';
    if (score <= 55) return '#eab308';
    if (score <= 75) return '#84cc16';
    return '#22c55e';
};

export const getFgLabel = (score) => {
    if (score <= 25) return '극단적 공포';
    if (score <= 45) return '공포';
    if (score <= 55) return '중립';
    if (score <= 75) return '탐욕';
    return '극단적 탐욕';
};

const FG_LEVELS = [
    {
        range: '0 – 25',
        label: '극단적 공포',
        color: '#ef4444',
        desc: '투자자들이 극도로 불안해하는 상태. 역사적으로 매수 기회가 되기도 하나, 하락세가 이어질 수 있습니다.',
    },
    {
        range: '26 – 45',
        label: '공포',
        color: '#f97316',
        desc: '시장 심리가 위축된 상태. 불확실성이 높고, 매도 압력이 강합니다.',
    },
    {
        range: '46 – 55',
        label: '중립',
        color: '#eab308',
        desc: '공포와 탐욕이 균형을 이루는 상태. 뚜렷한 방향성 없이 관망세가 지속됩니다.',
    },
    {
        range: '56 – 75',
        label: '탐욕',
        color: '#84cc16',
        desc: '투자자들이 낙관적이고 시장에 적극 참여하는 상태. 과열 신호를 주의해야 합니다.',
    },
    {
        range: '76 – 100',
        label: '극단적 탐욕',
        color: '#22c55e',
        desc: '시장이 과열된 상태. 조정 가능성이 높아지므로 리스크 관리가 필요합니다.',
    },
];

/**
 * Fear & Greed 게이지 컴포넌트
 * @param {{ score: number, date?: string, showLevels?: boolean }} props
 */
const FearGreedGauge = ({ score, date, showLevels = false }) => {
    const color = getFgColor(score);
    const label = getFgLabel(score);

    return (
        <div className="fg-wrap">
            <div className="fg-panel">
                <div className="fg-score-display">
                    <span className="fg-score-number" style={{ color }}>{score}</span>
                    <span className="fg-score-label" style={{ color }}>{label}</span>
                    {date && <span className="fg-score-date">{date}</span>}
                </div>
                <div className="fg-gauge">
                    <div className="fg-gauge__track">
                        <div
                            className="fg-gauge__needle"
                            style={{ left: `${Math.min(100, Math.max(0, score))}%` }}
                        />
                    </div>
                    <div className="fg-gauge__labels">
                        <span>극단적 공포</span>
                        <span>공포</span>
                        <span>중립</span>
                        <span>탐욕</span>
                        <span>극단적 탐욕</span>
                    </div>
                </div>
            </div>

            {showLevels && (
                <div className="fg-levels">
                    {FG_LEVELS.map((lv) => (
                        <div
                            key={lv.label}
                            className={`fg-level${getFgLabel(score) === lv.label ? ' is-current' : ''}`}
                        >
                            <div className="fg-level__head">
                                <span className="fg-level__dot" style={{ background: lv.color }} />
                                <span className="fg-level__label" style={{ color: lv.color }}>{lv.label}</span>
                                <span className="fg-level__range">{lv.range}</span>
                            </div>
                            <p className="fg-level__desc">{lv.desc}</p>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

export default FearGreedGauge;
