// Dashboard View Component
const DashboardView = ({ queueData, onViewChange, onViewJob }) => {
    const { jobs = [], started, pending_count = 0 } = queueData || {};
    const running = jobs.filter(j => j.status === 'running').length;
    const pending = pending_count || jobs.filter(j => j.status === 'queued').length;
    const completed = jobs.filter(j => j.status === 'completed').length;
    const errors = jobs.filter(j => j.status === 'error').length;

    const stats = [
        { label: 'In Coda', value: pending, icon: '⏳', color: 'text-slate-600', bg: 'bg-slate-50' },
        { label: 'In Esecuzione', value: running, icon: '⚡', color: 'text-blue-600', bg: 'bg-blue-50' },
        { label: 'Completati', value: completed, icon: '✓', color: 'text-emerald-600', bg: 'bg-emerald-50' },
        { label: 'Errori', value: errors, icon: '✕', color: 'text-red-600', bg: 'bg-red-50' },
    ];

    const runningJobs = jobs.filter(j => j.status === 'running');
    const recentJobs = jobs.filter(j => j.status === 'completed' || j.status === 'error').slice(0, 5);

    // Use shared status configuration
    const getStatusConfig = (status) => {
        const config = getJobStatusConfig(status);
        // Transform to match expected format (split color class into separate properties)
        const [bg, textColor] = config.color.split(' ');
        return {
            icon: config.icon,
            color: textColor,
            bg: bg,
            label: config.label,
        };
    };

    return (
        <div className="p-8 space-y-6">
            {/* Stats */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                {stats.map(stat => (
                    <Card key={stat.label} className={`p-5 ${stat.bg}`}>
                        <div className="flex items-center gap-3">
                            <span className="text-2xl">{stat.icon}</span>
                            <div>
                                <div className={`text-2xl font-bold ${stat.color}`}>{stat.value}</div>
                                <div className="text-sm text-slate-500">{stat.label}</div>
                            </div>
                        </div>
                    </Card>
                ))}
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Running Jobs */}
                <Card className="p-6">
                    <h3 className="font-semibold text-slate-900 mb-4 flex items-center gap-2">
                        <span>⚡</span> Lavori in Esecuzione
                    </h3>
                    {runningJobs.length === 0 ? (
                        <p className="text-sm text-slate-500 text-center py-8">Nessun lavoro in esecuzione</p>
                    ) : (
                        <div className="space-y-3">
                            {runningJobs.map(job => (
                                <div 
                                    key={job.id} 
                                    className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg cursor-pointer hover:bg-blue-100 transition-colors"
                                    onClick={() => onViewJob(job)}
                                >
                                    <Spinner className="w-4 h-4 text-blue-600" />
                                    <div className="flex-1 min-w-0">
                                        <div className="font-medium text-slate-900 truncate">
                                            {job.personal_data?.first_name} {job.personal_data?.last_name}
                                        </div>
                                        <div className="text-xs text-slate-500 truncate">{job.message}</div>
                                    </div>
                                    <Badge variant={job.additional_data?.crif_mode ? 'brand' : 'info'}>
                                        {job.additional_data?.crif_mode ? 'CRIF' : 'Email'}
                                    </Badge>
                                </div>
                            ))}
                        </div>
                    )}
                </Card>

                {/* Recent Activity */}
                <Card className="p-6">
                    <h3 className="font-semibold text-slate-900 mb-4 flex items-center gap-2">
                        <span>📋</span> Attività Recente
                    </h3>
                    {recentJobs.length === 0 ? (
                        <p className="text-sm text-slate-500 text-center py-8">Nessuna attività recente</p>
                    ) : (
                        <div className="space-y-2">
                            {recentJobs.map(job => {
                                const statusCfg = getStatusConfig(job.status);
                                return (
                                    <div 
                                        key={job.id} 
                                        className="flex items-center gap-3 p-2.5 rounded-lg hover:bg-slate-50 border border-slate-100 cursor-pointer transition-colors"
                                        onClick={() => onViewJob(job)}
                                    >
                                        <div className={`w-7 h-7 rounded-full flex items-center justify-center text-sm ${statusCfg.bg}`}>
                                            {job.status === 'running' ? <Spinner className="w-3.5 h-3.5 text-blue-600" /> : <span className={statusCfg.color}>{statusCfg.icon}</span>}
                                        </div>
                                        <div className="flex-1 min-w-0">
                                            <div className="text-sm font-medium text-slate-900 truncate">
                                                {job.personal_data?.first_name} {job.personal_data?.last_name}
                                            </div>
                                            <div className="text-xs text-slate-500 truncate">{job.message || statusCfg.label}</div>
                                        </div>
                                        <div className="flex items-center gap-2 shrink-0">
                                            <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${statusCfg.bg} ${statusCfg.color}`}>
                                                {statusCfg.label}
                                            </span>
                                            <span className="text-xs text-slate-400">#{job.id?.slice(-6)}</span>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    )}
                    <Button variant="ghost" size="sm" className="w-full mt-4" onClick={() => onViewChange('queue')}>
                        Vedi tutti i lavori →
                    </Button>
                </Card>
            </div>

            {/* Quick Actions */}
            <Card className="p-6">
                <h3 className="font-semibold text-slate-900 mb-4">⚡ Azioni Rapide</h3>
                <div className="flex flex-wrap gap-3">
                    <Button variant="primary" onClick={() => onViewChange('new')}>
                        ➕ Nuova Registrazione
                    </Button>
                    <Button variant="secondary" onClick={() => onViewChange('profiles')}>
                        📬 Gestisci Profili Email
                    </Button>
                    <Button variant="secondary" onClick={() => onViewChange('archive')}>
                        📦 Visualizza Archivio
                    </Button>
                </div>
            </Card>
        </div>
    );
};

window.DashboardView = DashboardView;