import { OFFICES_DATA } from '@/data/data';
import type { OfficeItem } from '@/types/types';
import { Activity, ChevronLeft, Lightbulb, Thermometer, Wifi, WifiOff, Zap, Plus } from 'lucide-react-native';
import React from 'react';
import { useRouter, useLocalSearchParams } from 'expo-router';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';

export default function AutomationDetail() {
    const router = useRouter();
    const { id } = useLocalSearchParams<{ id: string }>();

    const selectedOffice: OfficeItem | undefined = OFFICES_DATA.find(o => o.id.toString() === id);
    if (!selectedOffice) return <Text>Ufficio non trovato</Text>;

    return (
        <View className="flex-1 bg-gray-50">
            {/* Header Dettaglio */}
            <View className="bg-white p-6 pt-16 shadow-sm flex-row justify-between items-center border-b border-gray-100">
                <View className='flex-row items-center'>
                    <TouchableOpacity
                        onPress={() => router.back()}
                        className="mr-4 p-3 rounded-full bg-gray-50 active:bg-gray-200"
                    >
                        <ChevronLeft size={28} color="#4b5563" />
                    </TouchableOpacity>
                    <Text className="text-2xl font-bold text-gray-800">{selectedOffice.name}</Text>
                </View>
                {/* Status Dot */}
                <View className={`ms-auto w-4 h-4 rounded-full border-2 border-white shadow-sm ${selectedOffice.status === 'online' ? 'bg-green-500' : 'bg-red-500'}`} />
            </View>

            <ScrollView contentContainerStyle={{ padding: 20, gap: 24 }} showsVerticalScrollIndicator={false}>
                <View className="flex-row gap-5">
                    {/* Lights Card Grande */}
                    <TouchableOpacity className={`flex-1 p-6 rounded-3xl border-2 active:scale-95 ${selectedOffice.lights ? 'border-[#099499] bg-teal-50' : 'border-transparent bg-white shadow-sm'}`}>
                        <View className="flex-row justify-between items-start mb-6">
                            <Lightbulb size={40} color={selectedOffice.lights ? '#099499' : '#d1d5db'} />
                            {/* Switch UI Grande - FIXED: Rimossa 'transition-colors' che causava il crash */}
                            <View className={`w-14 h-8 rounded-full p-1 ${selectedOffice.lights ? 'bg-[#099499]' : 'bg-gray-200'}`}>
                                <View className={`bg-white w-6 h-6 rounded-full shadow-sm ${selectedOffice.lights ? 'translate-x-6' : 'translate-x-0'}`} />
                            </View>
                        </View>
                        <Text className="text-lg font-bold text-gray-800 mb-1">Luci</Text>
                        <Text className="text-gray-500 font-medium">{selectedOffice.lights ? 'Accese - 80%' : 'Spente'}</Text>
                    </TouchableOpacity>

                    {/* Temp Card Grande */}
                    <View className="flex-1 bg-white p-6 rounded-3xl border border-transparent shadow-sm">
                        <Thermometer size={40} color="#fb923c" className="mb-6" />
                        <Text className="text-lg font-bold text-gray-800 mb-1">Clima</Text>
                        <View className="flex-row items-end">
                            <Text className="text-4xl font-bold text-gray-800">{selectedOffice.temp}</Text>
                            <Text className="text-gray-500 mb-2 ml-1 text-lg">°C</Text>
                        </View>
                    </View>
                </View>

                {/* Chart Card Grande */}
                <View className="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
                    <View className="flex-row items-center mb-6 gap-3">
                        <Activity size={28} color="#099499" />
                        <Text className="text-xl font-bold text-gray-700">Consumo Oggi</Text>
                    </View>
                    <View className="flex-row items-end justify-between h-48 gap-4">
                        {[40, 65, 30, 80, 55, 90, 45].map((h, i) => (
                            <View key={i} className="flex-1 bg-gray-100 rounded-t-xl relative overflow-hidden h-full justify-end">
                                <View style={{ height: `${h}%` }} className="w-full bg-[#099499] rounded-t-xl opacity-80" />
                            </View>
                        ))}
                    </View>
                </View>
            </ScrollView>
        </View>
    );
}