import { HaEntity } from '@/types/types';
import { Lightbulb, Power, Cpu, Lock, Zap, Fan, Cctv, CloudSun } from 'lucide-react-native';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

const DeviceCard = ({ device, onToggle }: { device: HaEntity; onToggle: (entityId: string) => void; }) => {
    const getIcon = () => {
        const domain = device.entity_id.split('.')[0];

        switch (domain) {
            case 'light':
                return <Lightbulb size={32} color="#f59e0b" />;
            case 'switch':
                return <Power size={32} color="#3b82f6" />;
            case 'sensor':
                return <Cpu size={32} color="#ef4444" />;
            case 'lock':
                return <Lock size={32} color="#10b981" />;
            case 'fan':
                return <Fan size={32} color="#6b7280" />;
            case 'camera':
                return <Cctv size={32} color="#8b5cf6" />;
            case 'weather':
                return <CloudSun size={32} color="#3b82f6" />;
            default:
                return <Zap size={32} color="#8b5cf6" />;
        }
    };

    const isToggleable = ['light', 'switch', 'fan', 'input_boolean'].includes(device.entity_id.split('.')[0]);
    const isOn = device.state === 'on';

    const getDeviceState = (state: string) => {
        switch (state) {
            case 'on':
                return 'Acceso';
            case 'off':
                return 'Spento';
            case 'idle':
                return 'Inattivo';
            case 'locked':
                return 'Bloccato';
            case 'unlocked':
                return 'Sbloccato';
            case 'unavailable':
                return 'Non disponibile';
            case 'unknown':
                return 'Sconosciuto';
            default:
                return state;
        }
    }

    return (
        <View
            className={`bg-white rounded-3xl p-5 shadow-sm border border-gray-100 w-[48%] mb-4`}
            style={{ aspectRatio: 1 }}
        >
            <View className="flex-1 justify-between">
                <View className="flex-row justify-between items-start">
                    {getIcon()}
                    {isToggleable && (
                        <TouchableOpacity
                            onPress={() => onToggle(device.entity_id)}
                            className={`w-12 h-7 rounded-full p-1 ${isOn ? 'bg-[#099499]' : 'bg-gray-200'} active:scale-[0.9]`}
                        >
                            <View className={`bg-white w-5 h-5 rounded-full shadow-sm ${isOn ? 'translate-x-5' : 'translate-x-0'}`} />
                        </TouchableOpacity>
                    )}
                </View>

                <View>
                    <Text className="text-lg font-bold text-gray-800" numberOfLines={2}>{device.name}</Text>
                    <Text className="text-base text-gray-500 font-medium mt-1">
                        {getDeviceState(device.state)}
                    </Text>
                </View>
            </View>
        </View>
    );
};

export default DeviceCard;