import React, { useState } from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import { QrCode, CheckCircle2 } from 'lucide-react-native';
import { ATTENDANCE_DATA } from '@/data/data';
import QrScanModal from '@/components/QrScanModal';

export default function AttendanceScreen() {
    const [showScanner, setShowScanner] = useState(false);
    const [lastScan, setLastScan] = useState<{ type: string; time: string; site: string } | null>(null);

    const handleQRScan = () => {
        setShowScanner(true);
        // Simulate scanning process
        setTimeout(() => {
            setShowScanner(false);
            // Add new entry or update existing one
            setLastScan({
                type: 'Entrata',
                time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
                site: 'Cantiere Ospedale A.'
            });
        }, 3000);
    };

    return (
        <View className="flex-1 bg-gray-50">
            {/* Header */}
            <View className="bg-white p-6 pt-16 shadow-sm border-b border-gray-100">
                <Text className="text-3xl font-bold text-gray-800 mb-1">Gestione Presenze</Text>
                <Text className="text-base text-gray-500">Registra i tuoi movimenti</Text>
            </View>

            <ScrollView contentContainerStyle={{ paddingBottom: 40 }}>
                <View className="flex-1 p-5 items-center">

                    {/* Feedback Card - OPZIONALE */}
                    {lastScan ? (
                        <View className="w-full bg-green-50 border border-green-200 rounded-3xl p-6 mb-8 flex-row items-center gap-5 shadow-sm">
                            <View className="bg-green-500 rounded-full p-3 shadow-lg shadow-green-500/40">
                                <CheckCircle2 size={32} color="white" />
                            </View>
                            <View>
                                <Text className="font-bold text-green-800 text-xl">{lastScan.type} Registrata!</Text>
                                <Text className="text-base text-green-700 font-medium">{lastScan.site} alle {lastScan.time}</Text>
                            </View>
                        </View>
                    ) : (
                        null
                    )}

                    {/* Scanner Section */}
                    <View className="w-full mb-6">
                        <View className="bg-white rounded-3xl p-8 shadow-sm border border-gray-100">
                            <Text className="text-2xl font-bold text-gray-800 mb-6 text-center">Scansione QR/NFC</Text>

                            <TouchableOpacity
                                onPress={handleQRScan}
                                className="bg-[#099499] rounded-2xl py-6 flex-row items-center justify-center active:bg-[#077d82] shadow-lg shadow-teal-900/20 active:scale-[0.98]"
                            >
                                <QrCode color="white" size={32} />
                                <Text className="text-white text-xl font-bold ml-3">Scansiona Codice</Text>
                            </TouchableOpacity>

                            <Text className="text-gray-500 text-center mt-6 text-base px-2 leading-relaxed">
                                Posiziona il codice QR davanti alla fotocamera o usa il lettore NFC
                            </Text>
                        </View>
                    </View>

                    {/* Mini History */}
                    <View className="w-full mt-4">
                        <Text className="text-gray-500 font-bold text-base mb-4 uppercase tracking-wider px-2">Oggi</Text>
                        <View className="bg-white rounded-3xl shadow-sm overflow-hidden border border-gray-100">
                            {ATTENDANCE_DATA.map((item, index) => (
                                <View key={item.id} className={`p-6 flex-row justify-between items-center ${index !== 0 ? 'border-t border-gray-100' : ''}`}>
                                    <View className="flex-row items-center gap-4">
                                        <View className={`w-3 h-3 rounded-full shadow-sm ${item.status === 'complete' ? 'bg-green-500' : 'bg-orange-500'}`} />
                                        <View>
                                            <Text className="font-bold text-gray-800 text-lg mb-0.5">{item.site}</Text>
                                            <Text className="text-sm text-gray-400 font-medium">{item.in} - {item.out || 'In corso'}</Text>
                                        </View>
                                    </View>
                                    {item.status === 'complete' && (
                                    <View className="bg-gray-100 px-3 py-1.5 rounded-lg">
                                        <Text className="text-sm font-mono text-gray-600 font-bold">8h</Text>
                                    </View>
                                    )}
                                </View>
                            ))}
                        </View>
                    </View>

                </View>
            </ScrollView>

            {/* Scanner Modal */}
            <QrScanModal 
                visible={showScanner} 
                onClose={() => setShowScanner(false)} 
            />
        </View>
    );
}