
import React, { useState } from 'react';
import WidgetContainer from './WidgetContainer';
import styles from './WidgetStyles.module.css';

const MOCK_BULLETINS = [
    { id: 1, type: 'Alert', title: 'AW139 Tail Rotor Inspection', date: '2026-01-10', priority: 'High', unread: true },
    { id: 2, type: 'Info', title: 'New ISO Standard Procedure', date: '2026-01-08', priority: 'Low', unread: false },
    { id: 3, type: 'Warning', title: 'Hydraulic System Fluid Check', date: '2026-01-05', priority: 'Medium', unread: true },
    { id: 4, type: 'Alert', title: 'Avionics Firmware Update Required', date: '2025-12-28', priority: 'High', unread: false },
];

const ServiceBulletinWidget = ({ onExpand, onNavigate }) => {
    const [bulletins, setBulletins] = useState(MOCK_BULLETINS);

    const getBadgeStyle = (priority) => {
        switch (priority) {
            case 'High': return { backgroundColor: 'rgba(239, 68, 68, 0.2)', color: '#ef4444' };
            case 'Medium': return { backgroundColor: 'rgba(245, 158, 11, 0.2)', color: '#f59e0b' };
            default: return { backgroundColor: 'rgba(56, 189, 248, 0.2)', color: '#38bdf8' };
        }
    };

    return (
        <WidgetContainer title="Service Bulletins" onExpand={onExpand}>
            <div className={styles.list}>
                {bulletins.map(sb => (
                    <div key={sb.id} onClick={() => onNavigate && onNavigate('Service Bulletins')} className={styles.listItem} style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '1rem',
                        padding: '0.75rem 1rem',
                        backgroundColor: sb.unread ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.03)',
                        borderRadius: '8px',
                        marginBottom: '0.5rem',
                        borderLeft: sb.unread ? '3px solid #38bdf8' : '3px solid transparent',
                        transition: 'all 0.2s',
                        cursor: 'pointer',
                        ':hover': { backgroundColor: 'rgba(255,255,255,0.1)' }
                    }}>
                        {/* Icon/Badge */}
                        <div style={{
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            width: '40px', height: '40px',
                            borderRadius: '50%',
                            ...getBadgeStyle(sb.priority),
                            fontSize: '1.2rem'
                        }}>
                            {sb.priority === 'High' ? '!' : 'i'}
                        </div>

                        {/* Content */}
                        <div style={{ flex: 1, overflow: 'hidden' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <span style={{
                                    fontSize: '0.75rem',
                                    fontWeight: 700,
                                    textTransform: 'uppercase',
                                    color: 'var(--text-secondary)',
                                    letterSpacing: '0.5px'
                                }}>
                                    {sb.type}
                                </span>
                                <span style={{ fontSize: '0.75rem', color: 'var(--text-secondary)' }}>{sb.date}</span>
                            </div>
                            <div style={{
                                fontSize: '0.9rem',
                                color: 'var(--text-primary)',
                                fontWeight: sb.unread ? 600 : 400,
                                whiteSpace: 'nowrap',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                marginTop: '0.2rem'
                            }}>
                                {sb.title}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </WidgetContainer>
    );
};

export default ServiceBulletinWidget;
