// Queue View Component
const { useState } = React;

const QueueView = ({ jobs, onViewJob, onRemoveJob, onRetryJob, onCancelJob, onViewProject }) => {
    const [filter, setFilter] = useState('all');
    
    const filteredJobs = jobs.filter(j => {
        if (filter === 'all') return true;
        if (filter === 'active') return ['queued', 'running'].includes(j.status);
        if (filter === 'completed') return j.status === 'completed';
        if (filter === 'failed') return j.status === 'error';
        return true;
    });

    const filters = [
        { id: 'all', label: 'Tutti', count: jobs.length },
        { id: 'active', label: 'Attivi', count: jobs.filter(j => ['queued', 'running'].includes(j.status)).length },
        { id: 'completed', label: 'Completati', count: jobs.filter(j => j.status === 'completed').length },
        { id: 'failed', label: 'Errori', count: jobs.filter(j => j.status === 'error').length },
    ];

    return (
        <div className="p-8 space-y-6">
            {/* Filters */}
            <div className="flex items-center gap-2 bg-white p-1 rounded-lg border border-slate-200 w-fit">
                {filters.map(f => (
                    <button
                        key={f.id}
                        onClick={() => setFilter(f.id)}
                        className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${
                            filter === f.id ? 'bg-brand-500 text-white' : 'text-slate-600 hover:bg-slate-50'
                        }`}
                    >
                        {f.label}
                        {f.count > 0 && <span className={`px-1.5 py-0.5 rounded text-xs ${filter === f.id ? 'bg-white/20' : 'bg-slate-100'}`}>{f.count}</span>}
                    </button>
                ))}
            </div>

            {/* Jobs Grid */}
            {filteredJobs.length === 0 ? (
                <Card className="p-12 text-center">
                    <div className="text-4xl mb-3">📭</div>
                    <div className="font-medium text-slate-900">Nessun lavoro</div>
                    <p className="text-sm text-slate-500 mt-1">I lavori aggiunti appariranno qui</p>
                </Card>
            ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {filteredJobs.map(job => (
                        <JobCard key={job.id} job={job} onView={onViewJob} onRemove={onRemoveJob} onRetry={onRetryJob} onCancel={onCancelJob} onViewProject={onViewProject} />
                    ))}
                </div>
            )}
        </div>
    );
};

window.QueueView = QueueView;