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

// Mock Aircraft for Map
const MOCK_TRAFFIC = [
    { id: 'MH123', x: 20, y: 30, heading: 45, type: 'B737' },
    { id: 'AX554', x: 70, y: 60, heading: 270, type: 'A320' },
    { id: 'WS99', x: 50, y: 50, heading: 180, type: 'AW139', own: true }, // Our heli
];

const ADSBWidget = () => {
    const [traffic, setTraffic] = useState(MOCK_TRAFFIC);
    const requestRef = useRef();

    // Animation Loop
    const animate = () => {
        setTraffic(prevTraffic => prevTraffic.map(ac => {
            // Simple movement logic
            let newX = ac.x + Math.sin(ac.heading * Math.PI / 180) * 0.05;
            let newY = ac.y - Math.cos(ac.heading * Math.PI / 180) * 0.05;

            // Wrap around
            if (newX > 100) newX = 0;
            if (newX < 0) newX = 100;
            if (newY > 100) newY = 0;
            if (newY < 0) newY = 100;

            return { ...ac, x: newX, y: newY };
        }));
        requestRef.current = requestAnimationFrame(animate);
    };

    useEffect(() => {
        requestRef.current = requestAnimationFrame(animate);
        return () => cancelAnimationFrame(requestRef.current);
    }, []);

    return (
        <WidgetContainer title="Live ADSB Feed">
            <div style={{
                width: '100%',
                height: '100%',
                background: 'radial-gradient(circle, rgba(14,165,233,0.1) 0%, rgba(15,23,42,0) 70%)',
                display: 'flex',
                position: 'relative',
                overflow: 'hidden',
                borderRadius: '8px',
                border: '1px solid rgba(255,255,255,0.05)'
            }}>
                {/* Radar Grid */}
                <div style={{
                    position: 'absolute',
                    top: '50%', left: '50%',
                    transform: 'translate(-50%, -50%)',
                    width: '180%', height: '180%',
                    border: '1px dashed rgba(255,255,255,0.1)',
                    borderRadius: '50%'
                }} />
                <div style={{
                    position: 'absolute',
                    top: '50%', left: '50%',
                    transform: 'translate(-50%, -50%)',
                    width: '100%', height: '100%', // Inner circle
                    border: '1px dashed rgba(255,255,255,0.1)',
                    borderRadius: '50%'
                }} />

                {/* Radar Sweep */}
                <div style={{
                    position: 'absolute',
                    width: '50%', left: '50%', top: '50%',
                    height: '2px',
                    background: 'linear-gradient(90deg, rgba(14,165,233,0) 0%, rgba(14,165,233, 0.8) 100%)',
                    transformOrigin: '0 0',
                    animation: 'scan 4s infinite linear'
                }} />

                {/* Traffic */}
                {traffic.map(ac => (
                    <div key={ac.id} style={{
                        position: 'absolute',
                        left: `${ac.x}%`,
                        top: `${ac.y}%`,
                        transform: `rotate(${ac.heading}deg)`,
                        transition: 'al 0.1s linear',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center'
                    }}>
                        <div style={{
                            fontSize: '1.2rem',
                            color: ac.own ? '#4ade80' : 'rgba(255,255,255,0.6)',
                            textShadow: ac.own ? '0 0 10px rgba(74, 222, 128, 0.5)' : 'none'
                        }}>
                            ✈️
                        </div>
                        <div style={{
                            fontSize: '0.6rem',
                            color: ac.own ? '#4ade80' : 'rgba(255,255,255,0.5)',
                            whiteSpace: 'nowrap',
                            marginTop: '-4px',
                            transform: `rotate(-${ac.heading}deg)` // Keep text upright
                        }}>
                            {ac.id}
                        </div>
                    </div>
                ))}
            </div>
            <style>{`
                @keyframes scan {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            `}</style>
        </WidgetContainer>
    );
};

export default ADSBWidget;
