/**
 * TASK-008 : Customer Segments — SVG icons replace emoji, palette aligned to tokens.
 * Prop signature { data } unchanged.
 */
import Icon from '../Icon';

const SEGMENTS = [
    { key: 'champions', label: 'Champions', icon: 'trophy',   color: 'var(--se-success)', bg: 'var(--se-success-bg)', desc: 'Bought recently, often & spent the most' },
    { key: 'loyal',     label: 'Loyal',     icon: 'star',     color: 'var(--se-blue)',    bg: 'var(--se-blue-bg)',    desc: 'Regular buyers with good spending' },
    { key: 'at_risk',   label: 'At Risk',   icon: 'alertTriangle', color: 'var(--se-amber)', bg: 'var(--se-amber-bg)', desc: 'Used to buy often but not recently' },
    { key: 'lost',      label: 'Lost',      icon: 'moon',     color: 'var(--se-coral)',   bg: 'var(--se-coral-bg)',  desc: "Haven't purchased in a long time" },
    { key: 'new',       label: 'New',       icon: 'seedling', color: 'var(--se-purple)',  bg: 'var(--se-purple-bg)', desc: 'Recent first-time buyers' },
];

const CustomerSegmentsWidget = ({ data }) => {
    if (!data || data.total === 0) {
        return (
            <div className="card">
                <div className="card-header" style={{ padding: '16px 20px' }}>
                    <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>Customer Segments (RFM)</h3>
                </div>
                <div className="card-content" style={{ padding: 40, textAlign: 'center', color: 'var(--se-slate-400)' }}>
                    <p>No customer data available yet.</p>
                </div>
            </div>
        );
    }

    const total = data.total || 1;

    return (
        <div className="card">
            <div className="card-header" style={{ padding: '16px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                    <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'var(--se-slate-900)' }}>
                        Customer Segments (RFM)
                    </h3>
                    <p style={{ fontSize: 12, color: 'var(--se-slate-400)', margin: '2px 0 0' }}>
                        Recency · Frequency · Monetary
                    </p>
                </div>
                <span style={{
                    fontSize: 12, padding: '3px 10px',
                    background: 'var(--se-slate-100)',
                    borderRadius: 'var(--se-radius-pill)',
                    color: 'var(--se-slate-500)', fontWeight: 500,
                }}>
                    {total} customers
                </span>
            </div>

            <div className="card-content" style={{ padding: '8px 20px 20px' }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px,1fr))', gap: 12 }}>
                    {SEGMENTS.map(seg => {
                        const count = data.segments?.[seg.key] || 0;
                        const pct   = Math.round((count / total) * 100);
                        return (
                            <div key={seg.key} style={{
                                background: seg.bg,
                                borderRadius: 'var(--se-radius-inner)',
                                padding: 14,
                                border: `1px solid ${seg.color}22`,
                            }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                                    <span style={{ color: seg.color }}><Icon name={seg.icon} size={16} /></span>
                                    <span style={{ fontWeight: 600, color: seg.color, fontSize: 13 }}>{seg.label}</span>
                                </div>
                                <div style={{ fontSize: 26, fontWeight: 800, color: 'var(--se-slate-900)', lineHeight: 1 }}>{count}</div>
                                <div style={{ fontSize: 11, color: 'var(--se-slate-400)', marginTop: 2 }}>{pct}% of customers</div>
                                <div style={{ marginTop: 8, background: 'rgba(0,0,0,0.08)', borderRadius: 999, height: 4 }}>
                                    <div style={{ width: `${pct}%`, background: seg.color, borderRadius: 999, height: 4, transition: 'width 0.5s ease' }} />
                                </div>
                                <div style={{ fontSize: 11, color: 'var(--se-slate-400)', marginTop: 6 }}>{seg.desc}</div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
};

export default CustomerSegmentsWidget;