import { useState, useEffect } from 'react';
import {
    Thermometer, Droplets, Wind, Sun, AlertTriangle,
    Activity, Settings, RefreshCw, ChevronRight, Loader2
} from 'lucide-react';
import api from '../lib/api';
import { PageHeader, MetricCard, EmptyState, CardSkeleton } from '../components/ui/LinearPrimitives';

interface SensorData {
    id: string;
    name: string;
    type: string;
    roomId?: string;
    latestReading?: {
        value: number;
        unit: string;
        timestamp: string;
    };
    minThreshold?: number;
    maxThreshold?: number;
    alertCount: number;
}

interface EnvironmentAlert {
    id: string;
    type: string;
    severity: string;
    message: string;
    value?: number;
    createdAt: string;
    sensor?: { name: string };
}

interface DashboardData {
    sensors: number;
    readings: Record<string, { value: number; unit: string; sensor: string }[]>;
    averages: Record<string, number>;
    alerts: {
        active: number;
        list: EnvironmentAlert[];
    };
    profile?: any;
}

const sensorIcons: Record<string, any> = {
    TEMPERATURE: Thermometer,
    HUMIDITY: Droplets,
    CO2: Wind,
    LIGHT_PAR: Sun,
    LIGHT_LUX: Sun,
    VPD: Activity,
};

const sensorAccents: Record<string, 'success' | 'warning' | 'destructive' | 'accent'> = {
    TEMPERATURE: 'warning',
    HUMIDITY: 'accent',
    CO2: 'accent',
    LIGHT_PAR: 'warning',
    LIGHT_LUX: 'warning',
    VPD: 'success',
};

export default function EnvironmentDashboard() {
    const [dashboard, setDashboard] = useState<DashboardData | null>(null);
    const [sensors, setSensors] = useState<SensorData[]>([]);
    const [loading, setLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(false);
    const [selectedRoom, setSelectedRoom] = useState<string>('');

    useEffect(() => {
        loadData();
        const interval = setInterval(loadData, 60000);
        return () => clearInterval(interval);
    }, [selectedRoom]);

    const loadData = async () => {
        try {
            const [dashRes, sensorsRes] = await Promise.all([
                api.get('/api/environment/dashboard', { params: { roomId: selectedRoom || undefined } }),
                api.get('/api/environment/sensors', { params: { roomId: selectedRoom || undefined } })
            ]);
            setDashboard(dashRes.data);
            setSensors(sensorsRes.data);
        } catch (error) {
            console.error('Failed to load environment data:', error);
        } finally {
            setLoading(false);
        }
    };

    const handleRefresh = async () => {
        setRefreshing(true);
        await loadData();
        setRefreshing(false);
    };

    const getStatusClass = (value: number, min?: number, max?: number): string => {
        if (min && value < min) return 'text-accent';
        if (max && value > max) return 'text-destructive';
        return 'text-success';
    };

    if (loading) {
        return (
            <div className="space-y-6 animate-in">
                <PageHeader title="Environment Monitor" subtitle="Loading..." />
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                    {Array.from({ length: 4 }).map((_, i) => <CardSkeleton key={i} />)}
                </div>
            </div>
        );
    }

    return (
        <div className="space-y-6 pb-20 animate-in">
            <PageHeader
                title="Environment Monitor"
                subtitle="Real-time sensor data and alerts"
                actions={
                    <button
                        onClick={handleRefresh}
                        disabled={refreshing}
                        className="btn btn-ghost p-2"
                    >
                        <RefreshCw size={16} className={refreshing ? 'animate-spin' : ''} />
                    </button>
                }
            />

            {/* Active Alerts */}
            {dashboard?.alerts.active && dashboard.alerts.active > 0 && (
                <div className="card p-4 border-destructive/50 bg-destructive-muted">
                    <div className="flex items-center gap-2 mb-3">
                        <AlertTriangle className="text-destructive" size={18} />
                        <span className="font-medium text-destructive text-sm">
                            {dashboard.alerts.active} Active Alert{dashboard.alerts.active > 1 ? 's' : ''}
                        </span>
                    </div>
                    <div className="space-y-2">
                        {dashboard.alerts.list.slice(0, 3).map(alert => (
                            <div
                                key={alert.id}
                                className="card p-3 flex items-center justify-between"
                            >
                                <div>
                                    <p className="text-sm font-medium text-primary">{alert.message}</p>
                                    <p className="text-xs text-tertiary">
                                        {new Date(alert.createdAt).toLocaleString()}
                                    </p>
                                </div>
                                <span className={`
                                    text-[10px] font-medium px-2 py-0.5 rounded
                                    ${alert.severity === 'CRITICAL' ? 'badge-destructive' :
                                        alert.severity === 'WARNING' ? 'badge-warning' : 'badge'}
                                `}>
                                    {alert.severity}
                                </span>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* Quick Stats Grid */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                {Object.entries(dashboard?.averages || {}).map(([type, value]) => {
                    const Icon = sensorIcons[type] || Activity;
                    const readings = dashboard?.readings[type] || [];
                    const unit = readings[0]?.unit || '';
                    const accent = sensorAccents[type] || 'accent';

                    return (
                        <MetricCard
                            key={type}
                            icon={Icon}
                            label={type.replace('_', ' ').toLowerCase()}
                            value={`${typeof value === 'number' ? value.toFixed(1) : value}${unit}`}
                            accent={accent}
                            subtitle={`${readings.length} sensor${readings.length !== 1 ? 's' : ''}`}
                        />
                    );
                })}
            </div>

            {/* Sensors List */}
            <div>
                <h2 className="text-sm font-medium text-primary mb-3">All Sensors</h2>
                <div className="card overflow-hidden divide-y divide-subtle">
                    {sensors.map(sensor => {
                        const Icon = sensorIcons[sensor.type] || Activity;
                        const reading = sensor.latestReading;

                        return (
                            <div
                                key={sensor.id}
                                className="p-4 flex items-center gap-4 hover:bg-tertiary transition-colors duration-fast"
                            >
                                <div className="w-9 h-9 rounded-md bg-accent-muted flex items-center justify-center">
                                    <Icon className="text-accent" size={16} />
                                </div>
                                <div className="flex-1 min-w-0">
                                    <div className="font-medium text-primary text-sm">{sensor.name}</div>
                                    <div className="text-xs text-tertiary capitalize">
                                        {sensor.type.replace('_', ' ').toLowerCase()}
                                    </div>
                                </div>
                                <div className="text-right">
                                    {reading ? (
                                        <>
                                            <div className={`text-base font-semibold ${getStatusClass(reading.value, sensor.minThreshold, sensor.maxThreshold)}`}>
                                                {reading.value.toFixed(1)} {reading.unit}
                                            </div>
                                            <div className="text-[10px] text-tertiary">
                                                {new Date(reading.timestamp).toLocaleTimeString()}
                                            </div>
                                        </>
                                    ) : (
                                        <span className="text-tertiary text-xs">No data</span>
                                    )}
                                </div>
                                {sensor.alertCount > 0 && (
                                    <span className="badge-destructive text-[10px]">{sensor.alertCount}</span>
                                )}
                                <ChevronRight size={14} className="text-tertiary" />
                            </div>
                        );
                    })}
                    {sensors.length === 0 && (
                        <EmptyState
                            icon={Activity}
                            title="No sensors configured"
                            description="Add sensors to start monitoring."
                        />
                    )}
                </div>
            </div>

            {/* Environment Profile */}
            {dashboard?.profile && (
                <div className="card p-4">
                    <div className="flex items-center gap-2 mb-4">
                        <Settings size={16} className="text-tertiary" />
                        <span className="font-medium text-primary text-sm">
                            Active Profile: {dashboard.profile.name}
                        </span>
                    </div>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                        {dashboard.profile.tempMinF && dashboard.profile.tempMaxF && (
                            <div>
                                <span className="text-xs text-tertiary uppercase tracking-wider">Temperature</span>
                                <div className="font-medium text-primary">
                                    {dashboard.profile.tempMinF}°F - {dashboard.profile.tempMaxF}°F
                                </div>
                            </div>
                        )}
                        {dashboard.profile.humidityMin && dashboard.profile.humidityMax && (
                            <div>
                                <span className="text-xs text-tertiary uppercase tracking-wider">Humidity</span>
                                <div className="font-medium text-primary">
                                    {dashboard.profile.humidityMin}% - {dashboard.profile.humidityMax}%
                                </div>
                            </div>
                        )}
                        {dashboard.profile.co2Min && dashboard.profile.co2Max && (
                            <div>
                                <span className="text-xs text-tertiary uppercase tracking-wider">CO₂</span>
                                <div className="font-medium text-primary">
                                    {dashboard.profile.co2Min} - {dashboard.profile.co2Max} ppm
                                </div>
                            </div>
                        )}
                        {dashboard.profile.lightHours && (
                            <div>
                                <span className="text-xs text-tertiary uppercase tracking-wider">Light Cycle</span>
                                <div className="font-medium text-primary">
                                    {dashboard.profile.lightHours}h on
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
}
