// Job Card Component
const JobCard = ({ job, onView, onRemove, onRetry, onCancel, onViewProject }) => {
    const name = job.personal_data?.first_name && job.personal_data?.last_name
        ? `${job.personal_data.first_name} ${job.personal_data.last_name}` : 'Sconosciuto';
    const isCrifMode = job.additional_data?.crif_mode;
    const isCrifOnly = job.additional_data?.crif_only;
    const isSuccess = job.result?.status === 'success';
    const linkedProjectName = job.additional_data?.project_name;
    const linkedProjectId = job.project_id;

    // Use shared status configuration
    const status = getJobStatusConfig(job.status);

    return (
        <Card className="p-4 hover:shadow-md transition-shadow">
            {/* Linked Project Banner */}
            {linkedProjectId && (
                <div className="flex items-center justify-between mb-3 pb-2 border-b border-slate-100">
                    <div className="flex items-center gap-1.5">
                        <span className="text-blue-500">🔗</span>
                        <span className="text-xs text-blue-700 font-medium">
                            Pratica: {linkedProjectName || `#${linkedProjectId.slice(-8)}`}
                        </span>
                    </div>
                    {onViewProject && (
                        <button
                            onClick={() => onViewProject(linkedProjectId)}
                            className="text-[10px] text-blue-600 hover:text-blue-800 underline"
                        >
                            Vai alla pratica →
                        </button>
                    )}
                </div>
            )}
            <div className="flex items-start justify-between mb-3">
                <div>
                    <div className="font-semibold text-slate-900">{name}</div>
                    <div className="text-xs text-slate-500 flex items-center gap-2 mt-0.5">
                        <span>#{job.id?.slice(-8)}</span>
                        <Badge variant={isCrifOnly ? 'success' : isCrifMode ? 'brand' : 'info'}>{isCrifOnly ? 'CRIF' : isCrifMode ? 'Email + CRIF' : 'Email'}</Badge>
                    </div>
                </div>
                <div className={`flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${status.color}`}>
                    <span>{status.icon}</span>
                    <span>{status.label}</span>
                    {job.status === 'running' && <Spinner className="w-3 h-3" />}
                </div>
            </div>

            {job.message && <p className="text-sm text-slate-600 mb-3 line-clamp-2">{job.message}</p>}

            {isSuccess && job.result && (
                <div className="bg-emerald-50 border border-emerald-200 rounded-lg p-3 mb-3 font-mono text-xs space-y-1">
                    <div className="flex items-center gap-2"><span>📧</span><span className="text-emerald-700">{job.result.username}</span></div>
                    <div className="flex items-center gap-2"><span>🔑</span><span className="text-slate-700">{job.result.password}</span></div>
                </div>
            )}

            <div className="flex items-center gap-2 pt-2 border-t border-slate-100">
                <Button variant="ghost" size="sm" onClick={() => onView(job)}>
                    {job.status === 'error' ? '🔍 Dettagli' : job.status === 'running' ? '📋 Logs' : '📄 Dettagli'}
                </Button>
                {(job.status === 'error' || job.status === 'cancelled') && <Button variant="ghost" size="sm" onClick={() => onRetry(job.id)}>🔄 Riprova</Button>}
                {job.status === 'running' && <Button variant="ghost" size="sm" className="text-red-600" onClick={() => onCancel(job.id)}>⛔ Annulla</Button>}
                <Button variant="ghost" size="sm" className="ml-auto" onClick={() => onRemove(job.id)}>📦</Button>
            </div>
        </Card>
    );
};

window.JobCard = JobCard;